:root {
  --text-light: rgb(255, 249, 242);
  --font-main: "Indie Flower", cursive;
  --font-korean: "Nanum Pen Script", cursive;
  --bg-color: #fff9f2;
  --text-primary-color: #2a2a2a;
  --bg-secondary-color: white;
  --header-color: #1675d1;
  --header-border: #3878b8;
  --thememode-color: #070b1d;
}

.darkmode{
  --bg-color: #070b1d;
  --text-primary-color: #7c7979;
  --thememode-color: #fff9f2;
}


#theme-switch{
  height: 50px;
  width: 50px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
}
#theme-switch svg{
  fill: var(--thememode-color);
}
#theme-switch svg:last-child{ /* Hide the sun icon*/
  display: none;
}
.darkmode #theme-switch svg:first-child{ /* Hide moon icon */
  display: none;
}
.darkmode #theme-switch svg:last-child{
  display: block;
}

body {
  background-color: var(--bg-color, white);
  font-family: var(--font-main, sans-serif);
  display: flex;
  flex-direction: column;
  color: var(--text-primary-color, black);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}


/* Dark Mode Styles */
body.dark {
  --text-primary-color: rgb(255, 255, 255);
  --bg-color: rgb(30, 30, 30);
  --bg-secondary-color: rgb(45, 45, 45);
  --header-color: rgb(50, 50, 50);
  --header-border: rgb(80, 80, 80);
  --text-light: #fbe774;
}

/* Theme Toggle Styles */
#theme-toggle {
  position: absolute;
  top: 1.5rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

#theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#theme-icon {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.3s ease;
}

#theme-toggle:hover #theme-icon {
  transform: scale(1.1);
}







.site-header {
  background-color: var(--header-color, blue);
  border: 3px solid var(--header-border, darkblue);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 1.5rem 1rem;
  gap: 1rem;

  li {
    &.curr_nav {
      a {
        font-style: italic;
        font-weight: 600;
        color: var(--text-light, white);
        transition: color 0.3s ease, transform 0.3s ease;
        display: inline-block;

        &:hover {
          color: #fbe774;
          transform: translateY(-3px);
        }
      }
    }

    &:not(.curr_nav) {
      a {
        text-decoration: none;
        color: var(--text-light, white);
        transition: color 0.3s ease, transform 0.3s ease;
        display: inline-block;

        &:hover {
          color: #fbe774;
          transform: translateY(-3px);
        }
      }
    }

    &.footer_nav {
      margin: 0 auto;

      a {
        font-style: italic;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--header-color, blue);
        transition: color 0.3s ease, transform 0.3s ease;

        &:hover {
          color: red;
          transform: translateY(-3px);
        }
      }
    }
  }
}

.index-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 3rem 3rem 0rem 3rem;

  h1 {
    font-size: 2.5rem;
    margin-top: 0;
    padding-top: 0;
    letter-spacing: 0.1em;
  }

  p {
    margin: 0 0 1rem 0;
  }
}

#contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 60%;
  margin: 0 calc((100vw - 60vw) / 2);

  legend {
    font-size: 3rem;
    margin: 0 2rem;
  }

  pre {
    margin: 0 2rem 1.5rem 2rem;
    padding: 0;
  }

  label {
    margin: 2rem 2rem 0 2rem;
    font-size: 1.2rem;
    display: block;
    text-transform: uppercase;
  }

  input {
    margin: 0 2rem;
    display: block;
    font: inherit;
    border-radius: 10px;
    background-color: white;
    box-sizing: border-box;
    width: 80%;
  }

  textarea {
    margin: 0 2rem;
    font: inherit;
    width: 80%;
    border-radius: 10px;
    border-color: var(--text-primary-color, black);
    border-width: 2px;
    background-color: white;
  }

  button {
    margin: 1rem 2rem;
    font: inherit;
    width: 30%;
    border-radius: 10px;
    border-color: var(--text-primary-color, black);
    border-width: 2px;
  }
}

.korean-text-transform {
  font-family: var(--font-korean, cursive);
  font-size: 5.5rem;
  line-height: 1;
  margin-bottom: -0.5rem;
  display: inline-block;
  transition: transform 0.6s ease-in-out;
}

.korean-text-transform:hover {
  transform: rotate(360deg);
}

.card-container {
  background-color: var(--bg-secondary-color, white);
  border-radius: 15px;
  border: 3px solid var(--header-border, darkblue);
  box-shadow: 6px 5px 5px rgba(0, 162, 255, 0.369);
  width: 80vw;
  margin: 2rem auto;
  padding: 1.5rem;

  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  /* COLUMN1: won't shrink past 200px or extend past 1fr; COLUMN2: text takes up 2fr*/
  grid-template-rows: auto minmax(200px, auto);
  /* Header row and flexible second row */
  grid-template-areas:
    "header header"
    "image content";
}

.card-container h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary-color, black);
  grid-area: header;
  margin-bottom: 1rem;
}

#image-profile {
  width: 100%;
  /* Grid's width and height */
  height: 100%;
  max-height: 350px;
  object-fit: cover;
  /* Scales img */
  border-radius: 20px;
  border: 2px solid var(--text-primary-color, black);
  grid-area: image;
}

.card-container p {
  font-size: 1.45rem;
  line-height: 2;
  margin: 0;
  padding-left: 2rem;
  /* Space between image and text */
  grid-area: content;
}

footer {
  text-align: left;
  margin: auto 1rem;
}

.row-small-containers {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 2rem;
  width: 80vw;
  margin: 2rem auto;
  align-items: start;
}

@media (max-width: 650px) {
  .row-small-containers {
    grid-template-columns: 1fr;
    /* stack small containers once <= 650px */
    width: 95vw;
  }

  .card-container {
    display: flex;
    flex-direction: column;
    padding: 1rem;

    h2 {
      padding: 0 0 1rem 0;
      margin: 0;
      text-align: center;
    }
  }
}

.small-container {
  background-color: var(--bg-secondary-color);
  border-radius: 15px;
  border: 3px solid var(--header-border);
  box-shadow: 6px 5px 5px rgba(0, 162, 255, 0.369);
  padding: 1rem 1.5rem;
  height: 100%;
  box-sizing: border-box;

  h2 {
    font-weight: 700;
    font-size: 2rem;
    margin: 0 0 1rem 0;
    padding: 0;
    text-align: center;
  }

  *:not(h2) {
    font-size: 1.4rem;
    text-align: left;
  }
}

.small-container,
.card-container {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 200ms;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

address {
  text-align: left;
}

iframe {
  aspect-ratio: 16 / 9;
  width: 80%;
}

#pdf-link {
  display: none;
  /* Does not show the link when its big */
}

@media (max-width: 900px) {
  #pdf-frame {
    display: none;
  }

  /* Does not show the embeded <=768px */

  #pdf-link {
    display: inline-block;
    font-size: 1.1rem;
    color: #007bff;
    margin-top: 1em;
  }
}

section:has(ol) {
  background-color: color(display-p3 1 0.7 0.75);
  border-radius: 15px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 2rem;
  box-sizing: border-box;
}

#main-404 {
  margin: auto auto;

  section {
    text-align: center;
  }
}


:user-invalid {
  border: 4px dashed red;
}

output:empty {
  display: none;
}

output {
  display: block;
  margin: 0 2rem;
  padding: 0.5rem;
  border-radius: 10px;
  background-color: rgb(237, 235, 235);
  font-weight: bold;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

#name-error-msg,
#email-error-msg,
#comment-error-msg{
  border: 1px solid red;
  color: red;
}

#name-info-msg{
  border: 1px solid green;
  color: green;
}

.progress-container {
  display: block;
  align-items: center;
  width: 80%;
  margin: 0 2rem;
} 

progress[value] {
  width: 100%;
  height: 10px;
  appearance: none;
}

/* WebKit (Chrome, Safari) */
progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 5px;
}
progress::-webkit-progress-value {
  background-color: var(--bar-color, rgb(19, 160, 19));
  border-radius: 5px;
}

/* Firefox */
progress::-moz-progress-bar {
  background-color: var(--bar-color, rgb(19, 160, 19));
  border-radius: 5px;
}

#remaining-chars {
  flex: 1;
  text-align: right;
}