/* Styling for the page
 * Ignore the "mixin printing a linear gradient" thing below, it's added by an import
 * This feels overengineered to us but it's better than anything we've seen on more commercial sites
 */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/*
 * Mixin printing a linear-gradient
 * as well as a plain color fallback
 * and the `-webkit-` prefixed declaration
 * @access public
 * @param {Keyword | Angle} $direction - Linear gradient direction
 * @param {Arglist} $color-stops - List of color-stops composing the gradient
 *
 * @see https://www.sitepoint.com/building-linear-gradient-mixin-sass/
 */
/* VARIABLES */
* {
  --nav-bg: #000000;
  --nav-bg-transparent: #00000000;
  --nav-fg: #cfe7ef;
  --main-bg: #011;
  --bg: #122;
  --fg: #dfdfdf;
  --link: #cfefef;
  --link-visited: #cfdfdf; }

/* GENERAL STYLING */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0; }

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: "Atkinson Hyperlegible", "OpenDyslexic", sans-serif;
  font-size: 20px;
  line-height: 1.4; }

main {
  padding: 0.75rem;
  margin: 1em auto;
  width: min(80ch, 100% - 4rem);
  padding: 2em;
  border-radius: 2.5em;
  background-color: var(--main-bg); }

h1 {
  text-align: center; }

h2 {
  margin-top: 0.5em;
  text-align: center;
  text-decoration: underline; }

main a {
  color: var(--link); }
  main a:visited {
    color: var(--link-visited); }

/* header formatting */
header {
  position: sticky;
  top: 0;
  padding: 0.5rem 1rem 0.75rem;
  background-color: var(--nav-bg);
  background: linear-gradient(to bottom, var(--nav-bg) 75%, var(--nav-bg-transparent));
  color: var(--nav-fg);
  text-align: center;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center; }

footer {
  position: fixed;
  bottom: 0;
  padding: 0.75rem 1rem 0.5rem;
  width: 100%;
  background-color: var(--nav-bg);
  background: linear-gradient(to top, var(--nav-bg) 75%, var(--nav-bg-transparent));
  color: var(--nav-fg);
  text-align: right;
  font-style: italic;
  font-size: 18px; }

/* nav list formatting */
nav ul {
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem; }
  nav ul a {
    text-decoration: none;
    color: var(--nav-fg);
    position: relative;
    font-weight: bold;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-left: 0.2em solid var(--nav-fg);
    border-right: 0.2em solid var(--nav-fg);
    border-radius: 0.5em/1em;
    /* link underline animation */ }
    nav ul a::after {
      content: "";
      position: absolute;
      inset: 0;
      top: 0.5rem;
      border-bottom: 0.1em solid white;
      border-radius: 0.5em/0.15em;
      opacity: 0;
      transform: translate(0, 0) scale(0, 1);
      transition: transform 100ms ease-in, opacity 100ms ease-in; }
    nav ul a:hover::after, nav ul a:focus::after {
      opacity: 1;
      transform: translate(0, 0.25rem) scale(1, 1);
      transition: transform 100ms cubic-bezier(0.82, 0.42, 0.23, 1.41), opacity 100ms cubic-bezier(0.82, 0.42, 0.23, 1.41); }

@media (max-width: 500px) {
  nav ul {
    gap: 0.25rem;
    margin-bottom: 0.75rem; } }
/* resize the logo lol */
#logo {
  margin: 0;
  padding: 0;
  height: 100px; }

/* contact section formatting */
address {
  margin-top: 1em;
  font-style: initial; }
  address ul {
    margin-top: 1em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    list-style: none; }
  address li {
    margin: 0 0.5em;
    max-width: max(19.8%, 100px); }
  address img {
    width: 100px;
    height: 100px; }

/* About page formatting */
.about > p {
  margin-top: 1em; }

.bio-cards {
  padding: 0;
  list-style: none; }
  .bio-cards > li {
    display: block;
    margin-top: 1em;
    padding: 1.5em;
    border: 0.25em solid var(--bg);
    border-radius: 2em; }
  .bio-cards h4 {
    display: inline; }
  .bio-cards .pronouns {
    font-style: italic; }
  .bio-cards .bio-desc {
    font-style: italic; }
  .bio-cards .skills-list {
    display: inline;
    padding: 0;
    list-style: none; }
    .bio-cards .skills-list li {
      display: inline; }
      .bio-cards .skills-list li::after {
        content: ", "; }
      .bio-cards .skills-list li:last-child::after {
        content: "";
        display: none; }

.audiocomframe {
  width: 100%;
  height: 696px;
  border-radius: 0;
  border: none; }
  .audiocomframe:first-of-type {
    border-radius: 2em 2em 0 0;
    margin-top: 2em; }
  .audiocomframe:last-of-type {
    border-radius: 0 0 2em 2em; }

/*# sourceMappingURL=style.css.map */