/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");

/* Global Styles */
html {
  scroll-snap-type: y mandatory;
  --size: 180px; /* control the size */
  --c1: #2a2c2e;
  --c2: #17181c;
  --_g: #0000 90deg, var(--c1) 0;
  background: conic-gradient(from 90deg at 1px 1px, var(--_g)), var(--c2);
  background-size: var(--size) var(--size), calc(var(--size) / 5) calc(var(--size) / 5);
}

body {
  color: #eae9f0;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: auto 0 auto 0;
  padding: 0;
  font-size: 18px;
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

p {
  font-family: "Figtree", sans-serif;
  font-size: 16px; /* Adjust the size as needed */
}
 h1 {
  font-size: 2rem; /* Adjust the size as needed */
  margin: 10px 0px;
}
h2 {
  font-size: 1.5rem; /* Adjust the size as needed */
  margin: 10px 0px;
}

.animebackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.animebackground img {
  opacity: 0.1; /* Set the transparency to 0.1% */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and span the screen */
}

/* Hide Scrollbars */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

*::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Section Styles */
.section {
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  color: rgb(235, 236, 241);
  scroll-snap-align: start;
}

/* Go Up Button */
#goUpBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #303030;
  color: white;
  font-size: 1.5rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none; /* Initially hidden */
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

#goUpBtn:hover {
  background: #3f3f3f;
}

#goUpBtn.show {
  display: block;
  opacity: 1;
  transform: scale(1);
}

#goUpBtn.hide {
  opacity: 0;
  transform: scale(0.9);
}

/* Glow Button */
.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  margin: 19px;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000;
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* HOME-SECTION */
.mouse-animated {
  position: absolute;
  bottom: 5vh;
}

/* Scroll down */
/* From Uiverse.io by mrhyddenn */
.scrolldown {
  --color: white;
  --sizeX: 30px;
  --sizeY: 50px;
  position: relative;
  width: var(--sizeX);
  height: var(--sizeY);
  margin-left: var(sizeX / 2);
  margin-left: calc(var(--sizeX) / 2);
  border-radius: 50px;
  box-sizing: border-box;
  margin-bottom: 16px;
  cursor: pointer;
}

@keyframes scrolldown-anim {
  0% {
    opacity: 0;
    height: 6px;
  }

  40% {
    opacity: 1;
    height: 10px;
  }

  80% {
    transform: translate(0, 20px);
    height: 10px;
    opacity: 0;
  }

  100% {
    height: 3px;
    opacity: 0;
  }
}

.chevrons {
  padding: 6px 0 0 0;
  margin-left: -3px;
  margin-top: 48px;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chevrondown {
  margin-top: -6px;
  position: relative;
  border: solid var(--color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.chevrondown:nth-child(odd) {
  animation: pulse54012 500ms ease infinite alternate;
}

.chevrondown:nth-child(even) {
  animation: pulse54012 500ms ease infinite alternate 250ms;
}

@keyframes pulse54012 {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}

#home {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#hero {
  margin-right: 50px;
}

#anime-girl {
  margin-left: 50px;
}

#anime-girl img {
  border-radius: 50%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  position: relative;
}

#anime-girl p {
  position: relative;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  color: rgb(255, 255, 255);
}

#anime-girl:hover p {
  opacity: 1;
  color: rgb(187, 92, 179);
  transform: translateY(0);
}

/* Square Strip Animation */
.square-strip {
  width: 300px;
  height: 50px;
  background-image: repeating-linear-gradient(-135deg, transparent, transparent 25px, rgb(224,160,224) 25px, rgb(224,160,224) 50px);
  -webkit-animation: progress 2s linear infinite;
  -moz-animation: progress 2s linear infinite;
  -ms-animation: progress 2s linear infinite;
  animation: progress 2s linear infinite;
  animation-play-state: paused;
  background-size: 150% 100%;
  filter: grayscale(1);
  transition: filter 0.5s;
}

.square-strip:hover {
  animation-play-state: running;
  filter: grayscale(0);
}

@-webkit-keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -75px 0px;
  }
}

@-moz-keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -75px 0px;
  }
}

@-ms-keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -75px 0px;
  }
}

@keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -70px 0px;
  }
}

/* ABOUT-SECTION */
.shared-border {
  border: 2px solid #2a2c2e;
  border-radius: 12px;
}

.about-container {
  margin-right: 50px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-img-wrapper {
  position: relative;
  display: flex;
  perspective: 180px;
  margin-right: 3em;
}

.about-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 18em;
  height: 28em;
  @extend .shared-border;
  transition: 400ms transform ease-out;
}

/* Define named variables for radial-gradient colors */
:root {
  --gradient-color1: rgba(153, 153, 153, 0.329);
  --gradient-color2: rgba(185, 226, 250, 0.568);
}

.cursive {
  width: 25em;
  height: 25em;
  background: radial-gradient(var(--gradient-color1), var(--gradient-color2));
  border-radius: 50%;
  display: none;
  position: absolute;
  pointer-events: none;
  filter: blur(100px);
}
.grid-container {
  display: grid;
  @extend .shared-border;
  border-radius: 12px;
  margin-top: 1em;
  margin-left: 3em;
}
.card {
  border: 2px solid #2a2c2e;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  padding: 1em;
  justify-content: center;
  align-items: center;
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
  html {
    --size: 120px; /* Adjust size for smaller screens */
  }

  body {
    font-size: 16px; /* Adjust font size for readability */
  }

  h1 {
    font-size: 1.8rem; /* Adjust heading size */
  }

  h2 {
    font-size: 1.3rem; /* Adjust heading size */
  }

  .section {
    flex-direction: column; /* Stack content vertically */
    padding: 20px; /* Add padding for spacing */
  }

  #home {
    flex-direction: column; /* Stack home section content */
    align-items: center;
  }

  #hero, #anime-girl {
    margin: 0;
    margin-top: 30px; /* Remove margins for better alignment */
  }

  #anime-girl img {
    width: 80%; /* Scale image for smaller screens */
    height: auto; /* Maintain aspect ratio */
  }
  .grid-container {
    grid-template-columns: 1fr; /* Single column layout for smaller screens */
    margin-left: 0; /* Remove left margin for smaller screens */
  }
  .card {
    margin: 10px; /* Add margin for spacing */
    width: 90%; /* Scale cards for smaller screens */
    padding: 0%;
  }
  .about-container {
    margin-right: 0; /* Remove right margin for smaller screens */
    align-items: center; /* Center content */
    text-align: center; /* Center text */
  }
  .about-img-wrapper {
    margin-right: 0; /* Remove right margin for smaller screens */
    justify-content: center; /* Center the image */
  }

}