:root {
  /* Generic sizing for the page */
  --wrapper-height: 80vh;
  --avatar-max-width: 96px;

  /* Fonts for different elements */
  --font-family: 'Commit Mono'; /* Font for body */
  --font-family-header: 'Commit Mono'; /* Font for name and headers */
  --font-family-sub: 'Commit Mono'; /* Font for subtext and profile description */
  --font-family-list: 'Commit Mono'; /* Font for buttons */

  /* Colors you'll see cascade through the elements */
  --color-bg: #a6c0f7; /* Color for page body background */
  --color-icon: #24273a; /* Color for social icons */
  --color-text-main: #1e2030; /* Main text color for name */
  --color-text-sub: #1e2030; /* Subtext color for profile description */
  --color-text-button: #cdd6f4; /* Button text color */
  --color-text-button-alt: #24273a; /* Button text color on hover */
  --color-button: #1e2030; /* Button background color */
  --color-button-border: #1e2030; /* Button border color */


  /* Basic page style resets */
  * {
    box-sizing: border-box;
  }
  [hidden] {
    display: none !important;
  }

  /* Page structure */
  body {
    font-family: var(--font-family), monospace;
    background: var(--color-bg);
    text-align: center;
  }

  /* Link list css */
  ul.link-list li a {
    background: var(--color-button);
  }
  ul.link-list li a:link,
  ul.link-list li a:visited {
    border: 4px solid var(--color-button-border);
    background: var(--color-button-border);
    justify-content: space-around;
  }
  ul.link-list li a:hover, ul.link-list li a:focus {
    background: var(--color-bg);
  }
  ul.link-list li a img {
    display: none;
  }

  .wrapper {
    min-height: var(--wrapper-height);
    place-items: center;
    margin: 3rem 2rem 0;
  }
  .content {
    display: flex;
    flex-direction: column;
    max-width: 550px;
    margin: 0 auto;
  }

  .btn--remix {
    font-family: var(--font-family-list), Lucida Console, monospace;
    padding: 0.8rem 1.75rem;
    /*font sizes scaled by viewport https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/*/
    font-size: clamp(0.9rem, 0.825rem + 0.3333vw, 1rem);
    line-height: 1rem;
    font-weight: 450;
    height: 3rem;
    align-items: center;
    cursor: pointer;
    background: var(--color-button);
    box-sizing: border-box;
    border-radius: 90rem;
    text-decoration: none;
    color: var(--color-text-button);
    white-space: nowrap;
    margin-left: auto;
    margin-right: 1rem;
  }
  .btn--remix img {
    position: relative;
    top: 1px;
    margin-right: 0.25rem;
  }


  /* Typography */
  p {
    margin: 0 0 1rem 0;
    line-height: 1.5 !important;
    font-family: var(--font-family-sub), Lucida Console, monospace;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--color-text-sub);
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: 2rem 0 0.8rem;
    font-family: var(--font-family-header), monospace;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-main);
  }
  h1 {
    margin-top: 0.80rem;
    margin-bottom: 0.35rem;
    font-size: 1.2rem;
    display: inline-flex;
    color: var(--color-text-main);
    justify-content: center;
  }
  ul > li,
  ol > li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-size: clamp(1rem, 0.625rem + 1.6667vw, 1.5rem);
  }
  ul {
    padding: 0 0 0 18px;
    margin: 0;
  }

  /* Link css */
  a:not(.btn--remix):link,
  a:not(.btn--remix):visited {
    text-decoration: none;
    border-bottom: 6px solid var(--color-button-border);
    color: var(--color-text-main);
    transition: background 0.15s linear;
    border-radius: 90em;
  }
  a:hover,
  a:active,
  a:focus {
    background: var(--color-button);
  }

  ul.link-list {
    margin: 0.5em 0 0;
    padding-left: 0;
  }
  ul.link-list li {
    font-family: var(--font-family-list), Lucida Console, monospace;
    font-weight: 450;
    list-style: none;
    clear: both;
    width: 100%;
    min-width: 100%;
    text-align: center;
    margin: 0.80rem auto;
    font-size: clamp(0.7rem, 0.425rem + 1.6667vw, 1rem);
  }
  ul.link-list li a {
    min-height: 1.5em;
    min-width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
  }
  ul.link-list li a:link,
  ul.link-list li a:visited {
    text-align: center;
    border: 2px solid var(--color-button-border);
    padding: 1rem;
    position: relative;
  }
  ul.link-list li a img {
    z-index: 1;
    aspect-ratio: 1 / 1;
    height: 1.52em;
    object-fit: cover;
    overflow: hidden;
    border-radius: 50%;
  }
  ul.link-list li a span {
    z-index: 2;
    padding-left: 1rem;
    padding-right: 1rem;
    color: var(--color-text-button);
    transition: color 0.15s linear;
    margin: 0 auto;
    text-align: center;
  }

  ul.link-list li a:hover span,
  ul.link-list li a:focus span {
    color: var(--color-text-button-alt);
  }

  /* Avatar style */
  .avatar-container {
    display: flex;
    justify-content: center;
  }
  .avatar {
    max-width: var(--avatar-max-width);
    max-height: var(--avatar-max-width);
    margin: 1rem 0 0.5rem;
    border-radius: 50%;
  }

  /* Social media icons */
  .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .social-icons a:link {
    border-bottom: none;
    background: transparent;
    width: 3rem;
  }
  .social-profile-icon {
    width: 2rem;
    margin-bottom: 1rem;
    display: inline-flex;
    transition: transform 0.15s linear;
    stroke: var(--color-icon);
  }

  /* Uncomment, if social icons are solid */
  /*.social-profile-icon path {*/
  /*  fill: var(--color-icon);*/
  /*}*/

  .social-profile-icon:hover,
  .social-profile-icon:focus {
    transform: scale(1.1);
  }

  /* Video aspect ratio helper */
  .video-wrapper__16-9 iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}