/* Begin CSS Reset */

/* 1. Use a more-intuitive box-sizing model (less of a PITA) */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* End CSS Reset */

header {
  padding: 0.75rem 1.5rem;
  margin-bottom: 2rem;
  justify-content: space-between;
  display: flex;
  align-items: center;
  position: relative;
}

/* This was a super annoying problem, since applying blur to the header broke blurring for the other elements inside mobile nav, we have to use this workaround... Yknow this whole major website update thing was supposed to make things less complicated, not more. */

header::before {
  content: "";
  position: absolute;
  inset: 0; /* covers the full header bar */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: -1; /* keeps the frosted glass layer behind text and buttons */
}

/* this section is almost entirely header-related*/

#toptext {
  text-align: center;
  font-size: 1.25rem;
  margin: 0;
  color: red;
  display: block;
  padding: 4px 14px;
  user-select: none;
}

.topnav {
  padding: 0px;
}

.topnav ul {
  list-style-type: none;
  padding: 0;
}

.topnav a {
  text-decoration: none;
  color: black;
  font-size: 1.25rem;
  display: block;
}

/* Mobile styling and transitions */

.mobile-nav summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-size: 1.5rem;
  transition: transform 0.5s;
  user-select: none;
}

/* backup for older browsers */
.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-nav[open] summary {
  transform: rotate(-45deg);
}

/* Why use the checkbox hack when you can make yourself want to use the checkbox hacks */
.mobile-nav::details-content {
  transition: content-visibility 0.39s allow-discrete, display 0.5s allow-discrete;
}
/*  */
.mobile-nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute; 
  top: 100%;
  left: 0%;
  width: 100%;
  z-index: 10;
  background: transparent;
}

.mobile-nav li {
  display: none; /* We need this for the summary element so the browser recognizes the element and can properly animate it without having to open summary first. */
  width: 100%;
  opacity: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: opacity 0.15s ease, display 0s allow-discrete;
}


.mobile-nav[open]::details-content  {
  opacity: 1;
}

.mobile-nav[open] li {
  display: block;
  opacity: 1;
}

/* end my suffering PLEASE I HATE THE DETAILS ELEMENT and transform animations */
@starting-style {

  .mobile-nav[open] li {
    opacity: 0; /*I guess it helps*/
  }
}



/* Delay for each individual animation... this is gonna be a pain for future coding */
.mobile-nav[open] li:nth-child(1) { transition-delay: 0.08s, 0s; }
.mobile-nav[open] li:nth-child(2) { transition-delay: 0.16s, 0s; }
.mobile-nav[open] li:nth-child(3) { transition-delay: 0.24s, 0s; }

/* "It's [animating]... but backwards" */
.mobile-nav li:nth-last-child(1) {transition-delay: 0.08s, 0.4s;}
.mobile-nav li:nth-last-child(2) {transition-delay: 0.16s, 0.4s;}
.mobile-nav li:nth-last-child(3) {transition-delay: 0.24s, 0.4s;}

.mobile-nav a {
  width: 100%;
  text-align: center;
  padding: 10px 30px;
  transition: background-color 0.3s;
}

.mobile-nav a:hover {
    background-color: rgba(96, 95, 96, 0.6);
}

.desktop-nav {
  display: none;
}
/* Desktop version, going mobile-first because bEsT pRaCtIcEs */
@media (min-width: 42rem) {
  .mobile-nav {
    display: none;
  }
  .desktop-nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 0;
  }
  .desktop-nav a {
      padding: 4px 14px;
      transition: background-color 0.2s;
      border-radius: 8px;
  }
  .desktop-nav a:hover {
    background-color: rgba(96, 95, 96, 0.6);
  }
}

/* end of the big header section */

/* proper spacing for text so things look less horrid on certain screen sizes. */
h1,h2, h3, p, ul{
    margin-bottom: clamp(1rem, 2.0vw, 1.5rem);
}

#intro h1, #intro h2, #intro h3{
  text-align: center;
}

h1 {
  text-align: center;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
  flex: auto; /* take up all remaining space */
  width: 95vw; /* Need to make sure that  */
}

/* Standard sizing for each text element I use, makes headers look more reasonable on mobile (not gigantic). */
   
h1, h2 {
  font-size: clamp(1.5rem, 2vw + 0.8rem, 2rem);
}

h3 {
  font-size: clamp(1.2rem, 1vw + 1rem, 1.5rem);
}

p, a, li {
  font-size: clamp(0.8rem,0.25vw + 0.8rem, 1.125rem);
}