:root {
  --color-one: #ccc8eb;
  --color-two: #97d5ff;
  --color-three: #3b85ff;
  --color-four: #fcff46;
  --color-five: #96ff6e;
  --color-six: #df9dff;
  --color-seven: #ff0000;

  --gradient: linear-gradient(280deg, #386dff, #0066ff);

  font-size: 18px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  background: var(--gradient);
  background-attachment: fixed;
}

@font-face {
  font-family: "Hello";
  src: url(./assets/fonts/Hello_Headline_W00_Regular.ttf);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  font-family: "Hello", sans-serif;
  color: white;
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-size: 6rem;
}

h2 {
  font-size: 8rem;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000,
    -2px 2px 0 #000;
  letter-spacing: 5px;
  line-height: 0.9em;
}

h3 {
  font-size: 4rem;
}

h4 {
  font-size: 3rem;
}

h5 {
  font-size: 2rem;
}

p,
a {
  font-size: 1.5rem;
  color: white;
}

header nav {
  display: flex; /* Enables flexbox layout */
  justify-content: space-between; /* Distributes space between children */
  align-items: center; /* Aligns children vertically in the center */
  padding: 10px 80px; /* Adds padding on both sides */
  background: linear-gradient(0deg, #306fd53a, #9b93c5);
  border-bottom: #fff 1px solid; /* Adds a border at the bottom */
}

footer {
  display: flex; /* Enables flexbox layout */
  justify-content: center; /* Distributes space between children */
  align-items: center; /* Aligns children vertically in the center */
  padding: 10px 80px; /* Adds padding on both sides */
  background: linear-gradient(0deg, #306fd53a, #9b93c5);
  border-top: #fff 1px solid; /* Adds a border at the bottom */
}

footer p {
  font-size: 1em;
}
.nav .row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.hamburger {
  display: none; /* Hide by default */
  font-size: 48px; /* Adjust size as necessary */
  background: none;
  border: none;
  color: #fff; /* Adjust color as necessary */
  cursor: pointer;
}

.nav-menu {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.logo {
  flex: 1; /* Assigns a flex value to grow and take necessary space */
}

.logo img {
  width: 200px; /* Sets the width of the logo */
  height: auto; /* Allows the logo to scale */
}
.nav-items {
  display: flex; /* Enables flexbox for the list */
  justify-content: flex-end; /* Centers navigation items */
  align-items: center;
  list-style-type: none; /* Removes default list styling */
  padding: 0; /* Removes default padding */
  margin: 0; /* Aligns list properly in the nav */
  flex: 2; /* Takes twice the space of logo and CTA for centering purposes */
}

.nav-items li {
  padding: 0 15px; /* Spacing between each nav item */
}

.nav-items li a,
.cta a {
  -webkit-text-stroke: transparent;
}

.cta {
  flex: 1; /* Assigns a flex value to grow and take necessary space */
  display: flex;
  justify-content: flex-end; /* Aligns the CTA button to the right */
}

.cta a {
  text-decoration: none; /* Optional: Removes underline from link */
  color: #fff; /* Sets the text color */
  padding: 5px 20px; /* Adds padding inside the link */
  background-color: #60eb65; /* Sets background color of the CTA */
  border-radius: 20px; /* Rounds corners of the CTA */
  display: flex;
  align-items: center;
}

section:not(#hero) {
  padding: 5rem 0;
}

.container {
  display: flex;
  width: auto;
  padding: 0 2em;
  overflow: hidden;
}

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.col {
  display: flex;
  flex-direction: column;
  width: 100%;
}

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

#hero {
  width: auto;
  min-height: 80vh;
  height: 100%;
}

#hero .container {
  align-items: center;
  justify-content: center;
  height: 90vh;
}

#hero .container .row {
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 100px;
  top: -1%;
}

#about .col #who {
  background: var(--color-three);
  padding: 1rem;
  border-radius: 25px;
  border: #fff 15px solid;
}

#about {
  margin-bottom: 0;
}

#about .container {
  position: relative;
}
#who-yap-1,
#who-yap-2 {
  position: absolute;
  max-width: 350px;
  height: auto;
  transition: all 0.1s ease;
}

#who-yap-1 {
  left: 0;
  top: 25%;
}

#who-yap-2 {
  right: 0;
  top: 25%;
}
#yapper-text {
  position: relative;
  width: 670px;
  top: 50px;
  text-align: center;
}

#yapper-text img {
  width: 100%;
  height: auto;
}

#yapper-text img:hover {
  animation: rubberBand 0.8s ease-in-out;
}

#path {
  stroke-linecap: round; /* Makes the stroke's end rounded */
  stroke-linejoin: round; /* Rounds off the corners of the stroke */ /* Creates dashes, making the line appear more hand-drawn */
}

@keyframes rotate {
  0% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(8deg);
  }
}

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

#yapper {
  width: 500px;
  animation: rotate 4s infinite ease-in-out;
  transition: transform 0.1s;
}

#yapper img {
  transition: transform 0.1s;
}

#yapper img:hover {
  transform: scale(1.1);
  transition: transform 0.1s;
}
.logo-slider {
  width: 100%; /* Slider width to take full width of the container */
  overflow: hidden; /* Hides anything outside the slider container */
  position: relative;
  height: auto; /* Adjusted to auto to accommodate varying image heights */
}

.logo-slider div {
  display: flex;
  width: calc(600px * 5); /* Total width of all images */
  animation: scroll-left 40s linear infinite; /* Adjust time as needed */
}

.logo-slider img {
  width: 600px; /* Width of each image */
  height: auto; /* Maintain aspect ratio */
}

.logo-slider-2 {
  width: 100%; /* Slider width to take full width of the container */
  overflow: hidden; /* Hides anything outside the slider container */
  position: relative;
  height: auto; /* Adjusted to auto to accommodate varying image heights */
}

.logo-slider-2 div {
  display: flex;
  width: calc(300px * 5); /* Total width of all images */
  animation: scroll-left-2 20s linear infinite; /* Adjust time as needed */
}

.logo-slider-2 img {
  width: 300px; /* Width of each image */
  height: auto; /* Maintain aspect ratio */
}

.logo-slider-3 {
  width: 100%; /* Slider width to take full width of the container */
  overflow: hidden; /* Hides anything outside the slider container */
  position: relative;
  height: auto; /* Adjusted to auto to accommodate varying image heights */
}

.logo-slider-3 div {
  display: flex;
  width: calc(300px * 5); /* Total width of all images */
  animation: scroll-left-3 20s linear infinite; /* Adjust time as needed */
}

.logo-slider-3 img {
  width: 300px; /* Width of each image */
  height: auto; /* Maintain aspect ratio */
}

.video-slider {
  width: 100%; /* Slider width to take full width of the container */
  overflow: hidden; /* Hides anything outside the slider container */
  position: relative;
  height: auto; /* Adjusted to auto to accommodate varying image heights */
}

@keyframes scroll-left-3 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-1500px); /* Negative width of all images */
  }
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-4000px); /* Negative width of all images */
  }
}

@keyframes scroll-left-2 {
  from {
    transform: translateX(-1500px);
  }
  to {
    transform: translateX(0);
  }
}

#yap-alot {
  font-size: 2rem;
}

#about {
  padding-bottom: 0;
}

#yellow {
  color: var(--color-four);
}

#blue {
  color: var(--color-two);
}

#green {
  color: var(--color-five);
}

#about .container .col {
  align-items: center;
  justify-content: center;

  color: black;
}

.col .box {
  max-width: 60%;
  text-align: center;
}

.split .box {
  width: 50%;
  text-align: start;
  max-width: 800px;
}

#comic {
  height: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

#yap-vid {
  position: absolute;
  width: 200px;
  left: 10%;
  top: 20%;
  transition: all 0.1s ease;
}

#yap-art-1:hover,
#yap-art-2:hover,
#yap-art-3:hover,
#yap-art-4:hover,
#yap-vid:hover,
#who-yap-1:hover,
#who-yap-2:hover {
  transform: scale(1.1);
  transition: all 0.1s ease;
  rotate: 3deg;
}

#yap-art-1 {
  position: absolute;
  max-width: 250px;
  left: 5%;
  bottom: 50%;
  transition: all 0.1s ease;
}

#yap-art-2 {
  position: absolute;
  max-width: 250px;
  right: 5vw;
  bottom: 10vh;
  transition: all 0.1s ease;
  overflow: hidden;
}

#yap-art-3 {
  position: absolute;
  max-width: 250px;
  right: 21vw;
  bottom: 50%;
  transition: all 0.1s ease;
  overflow: hidden;
}
#yap-art-4 {
  position: absolute;
  max-width: 250px;
  left: 20vw;
  bottom: 10vh;
  transition: all 0.1s ease;
}

#yaps-1 {
  position: absolute;
  max-width: 250px;
  left: 20vw;
  bottom: 50%;
  transition: all 0.1s ease;
}

#yaps-2 {
  position: absolute;
  max-width: 250px;
  right: 20vw;
  bottom: 10vh;
  transition: all 0.1s ease;
  overflow: hidden;
}

#yaps-3 {
  position: absolute;
  max-width: 250px;
  right: 5%;
  bottom: 50%;
  transition: all 0.1s ease;
  overflow: hidden;
}

#yaps-4 {
  position: absolute;
  max-width: 250px;
  left: 5%;
  bottom: 10vh;
  transition: all 0.1s ease;
}

.slider {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.slides .slide {
  display: none;
  width: 100%;
}

.slides img {
  width: 100%;
  display: block;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 1000;
}

.prev {
  left: -40px; /* Set to 0 or a small negative value if needed */
}

.next {
  right: -40px; /* Set to 0 or a small negative value if needed */
}

.scooter {
  position: relative;
  width: 100%; /* Container takes full width */
  height: 500px; /* Set a fixed height for the container */
  overflow: hidden; /* Hide overflow to keep everything neat */
}

.scooter img {
  position: absolute;
  right: 100%; /* Start off-screen to the right */
  width: auto; /* Maintain the original image width */
  height: 100%; /* Match the height of the container */
  transition: right 0.5s ease-out; /* Smooth transition */
}

#YapMap {
  padding-top: 0 !important;
}

#tokenomics {
  position: relative;
}
.tokenomics {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  background-color: #97d5ff54;
  border: #fff 15px solid;
  padding: 1rem;

  border-radius: 25px;
  width: 85%;
  z-index: 3;
  margin: 8rem 0 13rem 0;
  align-items: center;
}

#tokenomics .container .col {
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.tokenomics h2 {
  margin-bottom: 2rem;
}

.text {
  width: 90%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.text p,
#clickable p {
  font-size: 2.5rem;
}

.social-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.social-icon {
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem;
}

#tokenomics .row {
  justify-content: space-between;
}

.text-box {
  max-width: 500px;
  background-color: var(--color-six);
  padding: 1rem;
  border-radius: 25px;
  border: #fff 15px solid;
  text-align: center;
}

#speak {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: start;
  margin: 200px 0;
  max-width: 70%;
  flex-wrap: wrap;
}

.col #title {
  width: 100%;
  text-align: center;
}

#title h2 {
  font-size: 8rem;
}

#hat {
  width: 40%;
  text-align: center;
}

#hat:hover {
  animation: wiggle 0.5s;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#tiny {
  font-size: 0.8rem;
}

footer .container .col {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.split {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#tokenomics,
.tokenomics {
  position: relative;
}

#tokenomics-art-1,
#tokenomics-art-2 {
  position: absolute;
  max-width: 250px;
}

#tokenomics-art-1 {
  left: 0;
  bottom: -4px;
}

#tokenomics-art-2 {
  right: 0;
  bottom: -4px;
}

.yap-box img {
  width: 50%;
  height: auto;
}

.yap-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 50%;
}

@media only screen and (max-width: 1024px) {
  body {
    font-size: 16px; /* Slightly smaller base font size for mobile */
  }

  header nav {
    flex-direction: column; /* Stack the logo, nav items, and CTA vertically */
    padding: 10px 20px;
  }

  .logo {
    margin-bottom: 20px; /* Add some space below the logo */
    align-self: center; /* Center the logo */
  }

  .logo img {
    width: 250px; /* Smaller logo size for mobile */
  }

  .nav-items {
    flex-direction: column; /* Stack nav items vertically */
    align-items: center; /* Center-align nav items */
  }

  .nav-items li {
    padding: 10px; /* Larger padding for easier touch */
  }

  .cta {
    width: 100%; /* Full width for the CTA on mobile */
    justify-content: center; /* Center the CTA button */
    margin-top: 20px; /* Add space above the CTA */
  }

  .cta a {
    width: 90%; /* Make the CTA button almost full width */
    text-align: center;
  }

  #hero,
  #about,
  #comic,
  .container,
  .slider,
  .tokenomics,
  footer .container {
    padding: 3em 1em; /* Reduce padding for a tighter layout */
  }

  .row {
    flex-direction: column; /* Stack all flex children vertically */
  }

  .scooter {
    height: 600px;
  }

  .scooter img {
    width: 600px; /* Full width scooter image on mobile */
    height: auto; /* Maintain aspect ratio */
    right: 0; /* Start image from the right edge */
  }

  .social-box {
    flex-direction: row; /* Ensure social icons are in a row */
    justify-content: space-around; /* Space out icons evenly */
  }

  .social-icon {
    margin: 10px; /* Larger margin for easier touch */
  }

  .logo-slider img {
    width: 1000px; /* Smaller images in the slider */
  }

  #yapnom {
    display: none;
  }

  #tokenomics {
    text-align: center;
  }

  #tokenomics .col {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }

  .tokenomics .row {
    align-items: center;
    text-align: center;
  }

  .hamburger {
    display: block; /* Show hamburger menu on mobile */
  }

  .nav-items,
  .cta {
    display: none; /* Hide navigation links and CTA by default */
  }

  .nav-menu.active .nav-items,
  .nav-menu.active .cta {
    display: block; /* Show when menu is active */
  }

  .nav-items {
    flex-direction: column; /* Stack links vertically */
  }

  .nav-items li,
  .cta {
    text-align: center; /* Center-align items */
    padding: 10px; /* Add padding for tap targets */
  }

  #hero .container {
    align-items: flex-start;
    height: 60vh; /* Adjust height to fit content */
  }

  #hero {
    max-height: 90vh;
    padding: 0;
    min-height: 0;
  }
  h2 {
    text-align: center;
    font-size: 10rem;
  }

  h3 {
    text-align: center;
  }

  p {
    font-size: 4rem;
    text-align: center;
  }

  a {
    font-size: 3rem;
    text-align: center;
  }

  .box,
  .text-box {
    max-width: 100%;
    width: 100%;
  }

  #yap-art-2,
  #yap-art-1,
  #yap-art-3,
  #yap-art-4,
  #yap-vid,
  #who-yap-1,
  #who-yap-2,
  #tokenomics-art-2,
  #tokenomics-art-1,
  #yaps-1,
  #yaps-2,
  #yaps-3,
  #yaps-4 {
    display: none;
  }

  #speak {
    flex-direction: column;
    max-width: 100%;
  }

  .text-box {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #hero .container .row,
  #yapper-text {
    top: 0;
  }

  .split {
    flex-direction: column;
  }

  .col .box {
    width: 100%;
    max-width: 100%;
  }

  .split .box {
    width: 100%;
    max-width: 100%;
  }

  .tokenomics h2 {
    font-size: 6rem;
  }
  .yap-box {
    width: 100%;
    max-width: 80%;
    align-items: center;
  }

  #tiny {
    font-size: 3rem;
  }
}