@import url('https://fonts.googleapis.com/css2?family=Griffy&display=swap');

:root {
  overflow-y: scroll;
  scrollbar-color: #006eff #FFFF84;
  scrollbar-width: 100px;
}

body {
  animation: fadeIn 2s forwards;
  background-color: #006eff;
  background-image: url(/images/sky.gif);
  background-size: 1000px 1920px;
  margin: 0;
  overflow-x: hidden;
  transition: transform 0.3s ease;
  margin: 0;
  opacity: 0;
  padding: 0;


}


@keyframes fadeIn {
  to {
    opacity: 1;
  }
}


/* Cursor */
* {
  box-sizing: border-box;
  cursor: url(https://cur.cursors-4u.net/games/gam-10/gam985.cur), auto !important;
}

.container {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  width: 100%;
  z-index: 9;
}

.main {
  background-image: linear-gradient(to bottom, yellow, #FFFF84);
  border: white 5px ridge;
  border-radius: 10px;
  margin: 3vh;
  min-height: 80vh;
  width: 55%;
}

.footer {
  align-items: center;
  background-image: linear-gradient(to bottom, yellow, #FFFF84);
  border: white 5px ridge;
  border-radius: 10px;
  display: flex;
  height: 10vh;
  justify-content: center;
  margin-bottom: 5vh;
  width: 55%;
}

.banner {
  display: flex;
  justify-content: center;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.logo {
  height: auto;
  max-width: 500px;
  max-width: max-content;
  width: 100%;
}

.maincont {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
  justify-content: space-evenly;
  margin: 0.5vh;
  max-width: 1200px;
  width: 100%;
}

.nav {
  align-items: center;
  background-color: #ffffff;
  background-image: url(/images/misc3.jpg);
  background-size: cover;
  border: #ffffff 5px ridge;
  border-radius: 10px;
  display: flex;
  filter: brightness(120%);
  flex-direction: column;
  height: auto;
  justify-content: center;
  margin: 0 auto;
  max-width: 300px;
  min-width: 200px;
  overflow: auto;
  width: 20%;
  height: 80%;

}

.frame {
  border: #ffffff 5px ridge;
  border-radius: 10px;
  display: block;
  height: 75vh;
  margin: 0 auto;
  margin-bottom: 3%;
  min-width: 300px;
  width: 100%;


}

button {
  background: none;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  filter: drop-shadow(0px 1px #5c5c5c) drop-shadow(0 -0.5px #5c5c5c) drop-shadow(1px 0 #5c5c5c) drop-shadow(-0.5px 0 #5c5c5c);
  font-family: "Griffy", system-ui;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-style: normal;
  font-weight: 400;
  margin: 2vh;
  transition: font-size 0.2s ease-in-out;
  width: 60%;
}

button:hover {
  color: #5c5c5c;
  filter: drop-shadow(0px 1px #ffffff) drop-shadow(0 -0.5px #ffffff) drop-shadow(1px 0 #ffffff) drop-shadow(-0.5px 0 #ffffff);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.shelf {
  position: absolute;
  transform: scaleX(-1) rotate(2deg) translateY(100%) translateX(200%);
  z-index: 10;
}

.gum {
  filter: saturate(110%) brightness(110%);
  position: absolute;
  right: 0;
  transform: scalex(-1) rotate(-10deg) translateX(15%) translateY(50%);
  width: 40vh;
  z-index: 10;
}

.beanie {
  filter: drop-shadow(0px 3px white) drop-shadow(0 -0.5px white) drop-shadow(3px 0 white) drop-shadow(-0.5px 0 white) brightness(120%);
  margin-top: -40%;
}

.misc {
  border: #ffffff 5px ridge;
  border-radius: 10px;
  display: block;
  width: 100%;
}

.cont {
  margin: 3vh;
  overflow: auto;
  margin-left: -3.0vh;
  margin-top: 1.5vh;
  margin-right: 0vh;
}

.cont2 {
  flex-direction: column;
  display: flex;
  width: 20%;
  overflow: auto;
  justify-content: center;
  margin-left: -1%;
}

.frame2 {
  margin-top: 5%;
  margin-bottom: 5%;
  border: #ffffff 5px ridge;
  border-radius: 10px;
  width: 100%;
}

h1 {
  font-family: "Griffy", system-ui;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-style: normal;
  font-weight: 400;
}

.copyright {
  color: #006eff;
}

.tape1 {
  width: 25vh;
  position: absolute;
  top: 0;
  transform: translateX(-50vh) rotate(-30deg);
}

.tape2 {
  width: 25vh;
  position: absolute;
  bottom: 0;
  transform: translateX(50vh) translateY(100vh) rotate(-30deg);
}


.balloons {
  width: 100%;
  filter: brightness(110%);
}

@media (max-width: 1080px) {
  body {
    align-items: center;
    background-position: center;
    flex-direction: column;
  }

  .shelf,
  .gum,
  .beanie {
    display: none;
  }

  .frame {
    width: 90%;
  }

  .cont2 {
    width: 100%;
  }
}

@media (max-width: 1900px) {
.tape1 , .tape2 {
  display: none;
}

}