@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/*
Theme Name: Seafront
Theme URI: http://lessmade.com/themes/less
Author: newperspectives.eu
Author URI: https://newperspectives.eu
Description: a core wordpress theme 
Version: 1.0
License: GNU General Public License

*/
/*  variables - Change the look of your site simply.

  font-family: "Spectral", serif;
  font-weight: 200;
  font-style: normal;

-------------------------------------------------------------- */
:root {
  --color-primary: #007998;
  --color-primary-hover: rgba(0, 121, 152, 0.5);
  --color-text: #ededed;
  --color-text-dark: #404040;
  --color-text-medium: #565656;
  --color-text-light: #888;
  --color-background: #081a36
  --color-border: #ddd;
  --color-code-bg: #eee;
  --color-highlight: #fff9c0;
  
  --font-body: "Spectral", serif;
  --font-heading: "Spectral", serif;
  --font-mono: Monaco, Consolas, "Andale Mono", monospace;
  
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 80px;
  
  --max-width: 720px;
  --border-radius: 5px;
}

/* Modern Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }

/* Base */
body {
  background: var(--color-background);
  font-family: var(--font-body);
  font-size: 1.8rem;
  color: var(--color-text);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-dark);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 4.8rem; }
h2 { font-size: 3.4rem; }
h3 { font-size: 2.8rem; }
h4 { font-size: 1.8rem; }

p { margin-bottom: 1.5em; }
ul, ol { margin: 0 0 1.5em 3em; }
b, strong { font-weight: 700; }
em, i { font-style: italic; }

blockquote { 
  margin: 0 1.5em;
  font-style: italic;
}

code, kbd, pre { font-family: var(--font-mono); }

pre {
  background: var(--color-code-bg);
  padding: 1.6em;
  overflow-x: auto;
  border-radius: var(--border-radius);
  font-size: 1.5rem;
}

mark { 
  background: var(--color-highlight);
  padding: 0 0.2em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 1.5em 0;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.25s;
}

a:hover, a:focus { color: var(--color-primary-hover); }

/* Forms */
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.5em;
  width: 100%;
}

input:focus, textarea:focus {
  color: var(--color-text-dark);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

textarea { resize: vertical; }

button,
input[type="button"],
input[type="submit"] {
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.8em 1.5em;
  cursor: pointer;
  font-size: 1.4rem;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  opacity: 0.8;
}

/* Layout */
.container {
  max-width: var(--max-width);
  padding: var(--spacing-sm);
  margin: 0 auto;
}

/* Header */
header {
  padding: var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

header #brand h1 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--color-text-medium);
  text-transform: uppercase;
}

header #brand h1 a { color: inherit; }

header #brand h1 span {
  font-weight: 200;
  color: var(--color-text-light);
  text-transform: lowercase;
}

header nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.5em;
  font-size: 1.4rem;
}

header nav a { color: var(--color-text-light); }

/* Articles */
article {
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

article .title {
  color: var(--color-text-dark);
  font-size: 3.8rem;
  margin-bottom: 0.5em;
}

article .title a { color: inherit; }
article .title a:hover { color: var(--color-primary); }

article .post-meta {
  margin-bottom: var(--spacing-md);
  font-size: 1.4rem;
  color: var(--color-text-light);
}

article .the-content a { font-weight: 700; }

article .meta {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: var(--spacing-sm);
}

article .post-categories {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1em;
}

/* Pages */
.page article { border-bottom: none; }

/* Pagination */
#pagination {
  margin-bottom: var(--spacing-md);
  display: flex;
  justify-content: space-between;
}

/* Comments */
.commentlist {
  list-style: none;
  padding: 0;
}

.commentlist .comment {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.commentlist .children {
  margin-top: var(--spacing-sm);
  margin-left: var(--spacing-md);
}

.comment-author .says { display: none; }

.comment-meta {
  font-size: 1.2rem;
  color: var(--color-text-light);
  margin-bottom: 1em;
}

/* Footer */
footer {
  text-align: center;
  padding: var(--spacing-md) 0;
  font-size: 1.2rem;
  color: var(--color-text-light);
}

/* Utilities */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin: 0 auto; }

/* Media Queries */
@media (max-width: 767px) {
  header { flex-direction: column; text-align: center; }
  header nav ul { justify-content: center; }
}