@import url('/assets/stylesheets/fonts.css');
@import url('/assets/stylesheets/print.css');

:root {
  --font-size-base: 20px;

  /* colors */
  --link-color: rgb(91, 94, 226);
  --purple:#693fdd;
  --gray: #eceeef;
  --gray-lighter: #f7f7f9;
  --sub-gray: #a0a0a0;
  --really-light-gray: #ccc;

  --header-blue: #7aa2f7;

  /*   --header-spacing: -0.04125em;*/
  --header-spacing: -0.05em;
  --subhed-spacing: -0.025em;
}

/* on desktop, h3 is 172% of font-size-base */

h1,h2,h3,h4,h5,h6, .tooltip {
  font-family:Header, sans-serif;
  font-weight:400;
}

h2 {
  padding-top:0;
  margin-top:0;
}

h3 {
  color:var(--purple);
  letter-spacing:var(--subhed-spacing);
  margin-bottom:0;

  font-weight:500;

  &+ul {
    margin-top:10px;
  }
}

h4 {
  margin-top:0;
}

.container {
  width: 55%;
  margin: 0 auto;
  min-height: calc(100vh - 150px);
  position: relative;
  display: flex;
  flex-direction: column;

  padding:0 5%;
}

/* links */
a {
  text-decoration:none;
  color:var(--link-color);

  &:hover {
    text-decoration:underline;
  }
}


/* Header */
.header-container {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 15px 0;

  border-bottom:1px solid var(--really-light-gray);
}

.portrait-container {
  flex-shrink: 0;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header {
  a, a:hover {
    text-decoration: none;
    color: #000;
  }

  .portrait {
    border:1px solid var(--header-blue);
    border-radius: 50%;
    width: 150px;
    display: block;
  }

  h1 {
    font-size: calc(var(--font-size-base) * 3.55);
    margin: 0;
    letter-spacing: var(--header-spacing);
    line-height: 1.1;
  }

  h2 {
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 32px;
    color: var(--sub-gray);
    letter-spacing: var(--header-spacing);
  }

  h3 {
    letter-spacing: var(--subhed-spacing);
  }
}

html, body {
  height: 100%;
}

html.lcase {
  text-transform:lowercase;

  #lcase {
    text-transform:none;
  }
}

body {
  font-family: "Lab Grotesque", monospace;
  font-size: var(--font-size-base);
  font-weight: 400;
  margin: 0;
  padding-top: 1em;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

p {
  line-height: 1.5em;
}

section {
  margin-top: 25px;
}

main {
  flex: 1;
  padding-bottom: 6rem;
}

.faded, h4 {
  color:var(--really-light-gray);
  font-size:19px;
}

ul {
  li {
    margin-bottom:10px;
  }
}

footer {
  font-family: Header;
  font-size: calc(var(--font-size-base) * 0.75);
  text-align: center;
  width: 100%;
  padding: 2em 0;
  margin-top: auto;
  height: 5rem;

  ul {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0;
    margin: 0;

    li {
      list-style: none;
    }
  }
}

footer, footer a {
  color:var(--really-light-gray);
}

@media screen {
  .print-only {
    display:none;
  }
}


@media (max-width: 768px) {
  .container {
    width: 90%;
  }

  .header-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  header h1 {
    font-size: calc(var(--font-size-base) * 2.8);
  }

  header h2 {
    font-size: 28px;
  }

  .header-container, section {
    margin-top:0;
  }
}

@media (prefers-color-scheme:dark) {
  body {
    background-color: #292e42;
    color:#a9b1d6;
  }

  .header-container {
    border-bottom:1px solid var(--header-blue);
  }

  h1 {
    a, a:hover {
      color:#c0caf5;/*7dcfff;*/
      cursor:default;
    }
  }

  header h2, h3 {
    color:#7aa2f7;
  }

  h4 {
    color:#3d59a1;
  }

  a {
    color:#bb9af7;

    &:hover {
      color:#9d7cd8;
    }
  }

  code {
    background-color:#1f2335;
    color:#ff007c;
  }
}