/* Custom styles for your website */
body {
  background-color: #FEFBF1;
  font-family: 'Inter';
}

h1, h2, h3 {
  font-family: 'EB Garamond';
  margin: 0px 0px .5em 0px;
}

section {
  margin-top: 6em;
  margin-bottom: 3em;
}

#about-me {
  margin-top: 10em;
}

/* 
#questions h1 {
  font-family: 'EB Garamond';
  font-size: 3em;
  margin: 0px 0px 1em 0px;
  color:hsl(40, 16%, 60%)

}

*/
#questions h2 {
  font-family: 'EB Garamond';
  font-weight: 600;
  font-size: 1.75em;
  margin: 0em 0em 1em;
}

#questions h3 {
  font-family: 'EB Garamond';
  font-weight: 600;
  font-size: 1.5em;
  color: #69675e;
  margin: 2em 0em .5em 0em;
}

#questions h3:first-of-type {
  margin: 0em 0em .5em 0em;
}

h1 {
  font-family: 'EB Garamond';
  font-size: 3em;
}

h2 {
  font-size: 2.5em;
  margin: .5em 0px .5em 0px;
}

h3 {
  font-family: 'EB Garamond';
  font-weight: 600;
  font-size: 1.75em;
}

p {
  font-family: 'Inter';
  font-size: 1em;
}

a {
  font-family: 'Inter';
  font-size: 1em;
  color: hsl(40, 16%, 60%);
}

.custom-navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: hsla(0, 0%, 95%, 0.8);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: 0px 4px 24px hsla(0, 0%, 0%, 0.10);
  z-index: 200;
}

/* Navbar Items Styling */
.custom-navbar ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.custom-navbar li {
  margin: 0 10px;
}

.custom-navbar a {
  text-decoration: none;
  color: hsla(0, 0%, 13%, 1.0);
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 1em;
}

.custom-navbar a:hover {
  background-color: #fff;
}

/* Special Button */
.nav-button {
  background-color: #EA7404;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 1rem;
  box-shadow: 0px 1px 3px hsla(0, 0%, 0%, 0.12), 0px 1px 2px hsla(0, 0%, 0%, 0.24);

}

.nav-button:hover {
  background-color: #EA7404;
  box-shadow: 0px 0px 1px hsla(0, 0%, 0%, 0.12), 0px 0px 1px hsla(0, 0%, 0%, 0.24);
}

.nav-button:focus {
  background-color: #EA7404;
  box-shadow: 0px 0px -2px hsla(0, 0%, 0%, 0.12);
}

/* Logo Style */
.custom-navbar a.navbar-brand {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits color from parent (optional) */
  display: flex; /* Allows the logo image to align within the container */
  align-items: center; /* Centers the image vertically */
  padding: 0px; /* Removes any default padding or margin */
}

#intro {
  font-family: 'EB Garamond';
  font-size: 2em;
}

#intro h1 {
  display: inline; /* Ensure the h1 is inline */
}

#intro h2 {
  font-size: 1em;
  font-style: italic;
  font-weight: 300;
  color: hsl(40, 31%, 36%);
  margin-top: 0.5em;
  margin-bottom: 3em;
}

#intro ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.none-bullet {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

ul.none-bullet li {
  padding-bottom: 1em;
}

#experience p {
  margin-bottom: .25em;
}

#experience a {
  margin-bottom: 2em;
}

#korean {
  display: inline; /* Ensure the span is inline */
  margin-left: 1em; /* Optional: Adds space between h1 and span */
  font-size: 0.8em; /* Optional: Make the pronunciation smaller */
}

img {
  max-width: 100%;
  height: auto;
}

.questions-and-answers {
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-auto-rows: 10px;
  gap: 20px;
}

.box {
  flex: 1 1 30%; /* Grow, shrink, and set the base size */
  margin: 10px; /* Space between boxes */
  padding: 20px; /* Padding inside boxes */
  background-color: #4CAF50; /* Box background color */
  color: white; /* Text color */
  display: flex;
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
  border-radius: 8px; /* Rounded corners */
  text-align: center; /* Center text alignment */
}

.box1 { grid-row: span 15; background-color: #ff6f61; }
.box2 { grid-row: span 20; background-color: #6b5b95; }
.box3 { grid-row: span 10; background-color: #88b04b; }
.box4 { grid-row: span 20; background-color: #d65076; }
.box5 { grid-row: span 10; background-color: #ffb347; }

.no-scroll {
  overflow: hidden;
}

/* Animation Area */
.animation-area {
  position: fixed;
  top: 0; /* Set to cover the whole viewport */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* Allow interaction */
  z-index: 750; /* Make sure it's above other content */
  display: none; /* Initially hidden */
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: backgroundChange 10s infinite; /* Background color animation */
  z-index: -1;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 1.5em;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1000; /* Ensure it’s above other elements in animation area */
}

.close-btn:hover {
  background-color: red;
}

.dancing_catLeft {
  top: 10rem;
  animation-delay: 0s;
  position: absolute;
  width: 10rem; /* Set the size of images */
  animation: moveLeft 3s linear infinite; /* Animation */
}

.dancing_catRight {
  top: 10rem;
  animation-delay: 0s;
  position: absolute;
  width: 10rem; /* Set the size of images */
  animation: moveRight 3s linear infinite; /* Animation */
}

.vibing_cat {
  position: absolute;
  width: 20rem;
  bottom: 0px;
  left:0px;
}

.happy_cat {
  position: absolute;
  width: 20rem;
  bottom: 0px;
  right: 0px;
  animation: bounce 1s infinite; /* Apply bounce animation */
}

.partyHeader {
  font-family: 'Inter';
  font-size: 3em;
  position: relative;
  margin-top: 2em;
  color: white;
  animation: strobe 1s infinite; /* Adjust the duration for speed */
}

.partyText{
  background-color: white;
  color: black;
  padding: 2rem;
}

.accordion .accordion-header {
  background: none;
  border: none;
  padding: 0;
}

.accordion-button{
font-size: 1.25rem;
font-weight: 600;
color:hsl(0, 0%, 16%);
background-color: hsl(0, 0%, 87%);
}

.accordion-button:not(.collapsed) {
  background-color: white; /* Change the background color for expanded state */
}



/* Background color change */
@keyframes backgroundChange {
  0% { background-color: blue; }
  50% { background-color: green; }
  100% { background-color: red; }
}

@keyframes strobe {
  0% {
    color: white;
  }
  20% {
    color: yellow; /* Change to yellow */
  }
  40% {
    color: red; /* Change to red */
  }
  60% {
    color: blue; /* Change back to yellow */
  }
  80% {
    color: green;
  }
  100% {
    color: purple;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(100vw); /* Start off-screen to the right */
  }
  100% {
    transform: translateX(-100px); /* Move off-screen to the left */
  }
}

@keyframes moveRight {
  0% {
    transform: translateX(-100%); /* Start off-screen to the left */
  }
  100% {
    transform: translateX(100vw); /* Move off-screen to the right */
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-15vh); /* Starting and ending at the original position */
  }
  50% {
    transform: translateY(0px); /* Change this value to increase height */
  }
}

@media (min-width: 1400px) {
  .container {
      max-width: 1180px;
  }
}