@import url('https://fonts.googleapis.com/css2?family=Asap&family=Biryani&family=Roboto+Mono:ital,wght@1,300&display=swap');

:root {
  --border-radius: 0.5rem;
  --shadow-blur: 0.3rem;
  --shadow-spread: 0.2rem;

  --page-padding-x: 3vw;
  --page-padding-y: 3vh;

  --header-height: 10vh;

  color-scheme: light dark;

  --background-color: light-dark(white, #282828);
  --header-color: light-dark(#83a598, #98971a);
  --header-text-color: light-dark(white, white);
  --nav-color: light-dark(#458588, #b8bb26);
  --nav-active-color: light-dark(white, #282828);
  --nav-text-active-color: light-dark(black, white);
  --text-color: light-dark(black, #ebdbb2);
  --h2-color: light-dark(#458588, #98971a);
  --h3-color: light-dark(#076678, #d79921);
  --card-color: light-dark(#e4e5f1, #504945);

  --font-header: "Roboto Mono", Arial, sans-serif;
  --font-subheader: "Asap", Arial, sans-serif;
  --font-body: "Biryani", Arial, sans-serif;
}

.light-theme {
  color-scheme: light;
}

.dark-theme {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-body, sans-serif);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  header {
    display: flex;
    flex-direction: column;
    min-height: var(--header-height);
    background-color: var(--header-color);
    color: var(--header-text-color);
    padding: var(--page-padding-y, 3vh) var(--page-padding-x, 3vw);
    justify-content: space-between;
    #header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        font-family: var(--font-header, sans-serif);
      }
      label {
        font-size: 1.5rem;
      }
    }
    nav {
      display: flex;
      flex-direction: column;
      #hamburger {
        display: none;
      }
      #hamburger-items {
        display: none;
        li {
          list-style: none;
        }
        a, button {
          color: var(--header-text-color);
          background-color: var(--header-color);
          font-family: var(--font-body, sans-serif);
          font-size: 0.9rem;
          display: block;
          padding: 0.6rem 0 0.3rem;
          text-decoration: none;
          border: none;
          border-radius: var(--border-radius, 0.5rem);
          width: 100%;
          text-align: center;
          cursor: pointer;
        }
        a:active, button:active {
          background-color: var(--nav-color);
        }
        #theme-toggle {
          display: none;
        }
        .js-enabled#theme-toggle {
          display: block;
        }
      }
      input:checked ~ #hamburger-items {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-top: 1rem;
        padding-bottom: 0;
      }
    }
  }

  main {
    padding: var(--page-padding-y, 3vh) var(--page-padding-x, 3vw);
    flex: 1;
    animation: fadeIn 0.6s ease-out forwards;
    h2, h3 {
      font-family: var(--font-subheader, sans-serif);
    }
    h2 {
      color: var(--h2-color);
    }
    h3 {
      color: var(--h3-color);
    }
    .card {
      background-color: var(--card-color);
      border-radius: var(--border-radius, 0.5rem);
      padding: 2rem;
      hr {
        margin: 0.7rem 0;
      }
    }
  }
  main#home {
    #landing-section {
      padding-top: 5vh;
      height: calc(100vh - var(--header-height, 10vh));
      #landing-pictures {
        display: flex;
        #portrait-placeholder {
          width: 10rem;
        }
      }
      h2 {
        font-family: var(--font-header, sans-serif);
        font-size: 4rem;
      }
      p {
        max-width: 70ch;
      }
    }
  }
  main#about {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    #skills {
      ul {
        list-style: none;
        column-count: 2;
        li + li {
          margin-top: 1rem;
        }
      }
    }
    ol {
      list-style: none;
    }
    .card-group {
      #education {
        margin-bottom: 2rem;
      }
    }
  }
  main#projects {
    #project-showcase {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      .project-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        picture {
          width: 80%;
          img {
            width: 100%;
          }
        }
      }
    }
  }
  main#contact {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    form {
      min-width: 17vw;
    }
    form fieldset {
      border: none;
      div + div {
        margin-top: 1rem;
      }
      input, textarea {
        width: 100%;
        padding: 0.3rem;
        resize: none;
      }

      input:focus,
      textarea:focus {
        outline: 2px solid light-dark(#458588, #b8bb26);
      }
      input:user-invalid,
      textarea:user-invalid {
        border-color: light-dark(#d65d0e, #fb4935);
      }

      .label-row {
        display: flex;
        justify-content: space-between;
      }

      .near-limit {
        color: light-dark(#b16286, #d65d0e);
      }

      #form-error, #form-info {
        position: absolute;
        display: block;
        width: 100%;
        height: 0.3rem;
        padding: 0.2rem 0;
        opacity: 0;
        transition: opacity .3s;
      }

      #form-error.show, #form-info.show {
        opacity: 1;
      }

      .flash {
        outline: 2px solid red !important;
      }

      button {
        margin-top: 1rem;
        width: 100%;
        padding: 0.6rem 0;
        color: light-dark(white, #ebdbb2);
        background-color: light-dark(#b16286, #d65d0e);
        border: none;
        border-radius: var(--border-radius, 0.5rem);
      }
    }
    #contact-info {
      h3 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      h3 ~ h3 {
        margin-top: 1rem;
      }
    }
  }

  footer {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 2vh 2vw;
    background-color: var(--header-color);
    color: var(--header-text-color);
  }
}

@media (min-width: 768px) {
  :root {
    --page-padding-x: 10vw;
    --page-padding-y: 2vh;
  }

  body {
    header {
      display: flex;
      flex-direction: row;
      align-items: center;
      label {
        display: none;
      }
      #hamburger {
        display: none;
      }
      nav {
        #hamburger-items {
          display: flex;
          gap: 1rem;
          a, button {
            background-color: var(--nav-color);
            padding: 0.5rem 1rem 0.2rem;
          }
          a:hover, button:hover {
            background-color: light-dark(lightgrey, grey);
            color: white;
          }
          a:active, button:active {
            background-color: var(--nav-active-color);
            color: var(--nav-text-active-color);
          }
        }
      }
    }

    main {
      #landing-section {
        padding-top: 10vh;
        height: calc(100vh - var(--header-height));
        #landing-pictures {
          display: flex;
          #portrait-placeholder {
            width: 10rem;
          }
        }
        h2 {
          font-family: var(--font-header, sans-serif);
          font-size: 8rem;
        }
      }
      .content-picture {
        display: flex;
        gap: 1rem;
      }
      .card-group {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
      }
    }
    main#about { }
    main#projects {
      #project-showcase {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
      }
    }
    main#contact {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
}

@media (min-width: 1200px) {
  :root {
    --page-padding-x: 15vw;
    --page-padding-y: 2vh;
  }

  body {
    header {
      nav {
        #hamburger-items {
          display: flex;
          gap: 2rem;
        }
      }
    }

    main { }
    main#about { }
    main#projects { }
    main#contact { }
  }
}