/* @font-face {
  font-family: 'pier-sans';
  src: url("../font/PierSans-Bold.woff2") format("woff2"), url("../fonts/PierSans-Bold.woff") format("woff"), url("../fonts/PierSans-Bold.ttf") format("truetype"); } */

@font-face {
  font-family: 'tiempos-text';
  src: url('/font/tiempos-text-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tiempos-text';
  src: url('/font/tiempos-headline-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

/* Variables
============================================ */
:root {
  --bg: #01060c;
  --bg-light: #011a30;
  --bg-highlight: #233e66;
  --text: #dbe1e8;
  --text-sub: #88b1e0;
  --purple: #c696ff;
  --purple-light: #ccadf1;
  --blue: #2FD3F9;
  --accent: var(--purple);
  --complement: var(--blue);
  /* --font-body: 'inter', sans-serif;
  --font-heading: 'pier-sans', sans-serif; */

  --font-body: 'tiempos-text', system-ui;
  --font-heading: var(--font-body);
  --font-mono: monospace;
  --width-container: 1200px; }

@media screen and (min-width: 700px) {
  :root {
    --font-size: 18px;
    --font-size-sm: .85em;
    --font-size-md: 1.5em;
    --font-size-lg: 2em;
    --font-size-xl: 5em;
    --sp: 3rem;
    --sp-lg: 6rem;
    --sp-edge: 1.5rem; } }
@media screen and (max-width: 699px) {
  :root {
    --font-size: 100%;
    --font-size-md: 1.25em;
    --font-size-lg: 1.5em;
    --font-size-xl: 3.5em;
    --sp: 2rem;
    --sp-lg: 3rem;
    --sp-edge: 1.5rem; } }
/* Utilities
============================================ */
/* Viewports smaller than $breakpoint */
/* Viewports larger than $breakpoint */
/* Basics
============================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: 1.6;
  margin: 0;
  --gap: 1em; }

a {
  color: var(--accent); 
  transition: .2s ease-in-out;
}
a:hover {
  color: var(--purple-light);
}

::selection {
  background: var(--bg-highlight); 
}

/* Site Header
============================================ */
.site-header {
  max-width: var(--width-container);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 1em var(--sp-edge); 

  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  align-items: baseline;
}

.site-header__title {
  color: var(--complement);
  /* font-family: var(--font-heading); */
  font-variant-caps: all-small-caps;
  font-weight: normal;
  font-size: 1em;
  letter-spacing: .1em;
  margin-inline: 0; }

.site-header__desc {
  color: var(--text-sub);
}

.site-nav {
  margin-left: auto; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--text-sub);
  font-weight: bold;
  text-transform: lowercase; }

.site-nav__item {
  margin-left: 1.25em; }


main {
  max-width: var(--width-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-edge);
  padding-right: var(--sp-edge); }

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, auto));
  grid-gap: var(--gap);

  position: relative;
}
section + section {
  margin-top: var(--sp);
}

h2 {
  grid-column: 1 / -1;
  scroll-margin-top: var(--sp);
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 1.25em;
  text-align: center; 
  text-transform: capitalize;
}

.copy {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  box-sizing: border-box;
  border: 2px solid var(--bg-highlight);
  border-radius: 8px;
  padding: 1em;
  
  display: grid;
  align-content: start;
  grid-row-gap: .5em;
}
.copy:active {
  background: var(--bg-light); 
}
.copy:hover {
  cursor: pointer; 
}

.character {
  flex: 1 0 100%;
}


.character {
  font-size: var(--font-size-xl);
  /* font-family: georgia, serif;  */
  line-height: 1;
  margin: 0;
}


.kaomoji {
  display: flex;
  flex-wrap: wrap; 
}
.kaomoji h2 {
  flex: 1 0 100%;
}
.kaomoji .character {
  font-size: 1.75em;
  font-family: var(--font-body);
  font-weight: normal;
}


.mac, 
.alt,
.name {
  margin: 0;

  color: var(--text-sub);
  font-family: var(--font-mono);
  font-size: 1em;
}

.alt::before {
  content: 'ALT ';
}


.links-list {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

.links-list > li {
  margin-left: .75em; }
  .links-list > li:not(:last-of-type)::after {
    content: '\2B25';
    margin-left: .75em; }

/* Site Footer
============================================ */
.site-footer {
  max-width: var(--width-container);
  margin-left: auto;
  margin-right: auto;
  border-top: 2px solid var(--bg-highlight);
  margin-top: var(--sp-lg);
  padding: var(--sp) var(--sp-edge);
  font-size: var(--font-size-sm); 
  text-align: center;
}

.cite {
  color: var(--blue);
  text-decoration: none; }

.citations {
  list-style: none;
  margin: 0;
  padding: 0; 
}