@charset "UTF-8";
/*
  Copyright 2023 by 𝓡𝓸𝓬𝓬𝓪𝓷𝓸. All rights reserved. 
  https://roccano.it
*/
body {
  margin: 0;
  overflow: hidden;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

main {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(rgb(107, 107, 107) 30%, rgb(255, 255, 255));
  overflow: hidden;
}

.btns1 {
  position: fixed;
  height: 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  top: 3%;
  left: 3%;
  z-index: 2;
}

button {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
  border: 0;
}

.btn1 {
  color: rgb(184, 186, 206);
  padding: 2% 6% 2% 6%;
  background-image: linear-gradient(rgb(85, 47, 255), rgb(0, 26, 255));
  box-shadow: inset 0 -5px 20px seagreen, inset 0 5px 20px white, 0px 5px 25px rgb(0, 26, 255);
  border-radius: 9999px;
}
.btn1:active {
  padding: 2% 6% 2% 6%;
  box-shadow: inset 0 5px 20px teal, inset 0 -5px 20px white, 0px 8px 10px rgb(255, 255, 255);
}

.btn2 {
  color: white;
  padding: 2% 6% 2% 6%;
  background-image: linear-gradient(Fuchsia, red);
  box-shadow: inset 0 -5px 20px brown, inset 0 5px 20px white, -8px 5px 25px rgb(223, 4, 4);
}
.btn2:active {
  padding: 2% 6% 2% 6%;
  box-shadow: inset 0 5px 20px brown, inset 0 -5px 20px white, -8px 8px 15px white;
}

.egg {
  position: absolute;
  bottom: 15%;
  right: 12%;
  width: 110px;
  height: 190px;
  background-image: radial-gradient(farthest-corner at 65% 25%, white 1%, yellow, green);
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 6px 12px 50px 15px rgb(255, 240, 250), inset 0 -5px 20px black, inset 0 5px 20px white;
  border: 0;
  transition: all ease-in-out 0.3s;
  z-index: 1;
  box-shadow: 8px 1px 40px 8px rgb(208, 255, 0);
}
.egg:hover {
  scale: 0.9;
  transition: all ease-in-out 0.3s;
}

.egg2 {
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 150px;
  height: 60px;
  background-image: radial-gradient(farthest-corner at 65% 25%, white 1%, deeppink, darkviolet);
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 6px 12px 50px 15px rgb(255, 240, 250), inset 0 -5px 20px black, inset 0 5px 20px white;
  border: 0;
  transition: all ease-in-out 0.3s;
  z-index: 3;
  box-shadow: 8px 1px 40px 8px rgb(255, 0, 221);
}
.egg2:hover {
  scale: 0.9;
  transition: all ease-in-out 0.3s;
}

.egg3 {
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 50px;
  height: 200px;
  background-image: radial-gradient(farthest-corner at 65% 25%, white 1%, rgb(14, 196, 14), darkblue);
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 6px 12px 50px 15px rgb(255, 240, 250), inset 0 -5px 20px black, inset 0 5px 20px white;
  border: 0;
  transition: all ease-in-out 0.3s;
  z-index: 1;
  box-shadow: 8px 1px 40px 8px rgb(0, 255, 34);
}
.egg3:hover {
  scale: 0.9;
  transition: all ease-in-out 0.3s;
}

.scacchiera1 {
  position: absolute;
  top: 30%;
  right: 10%;
  width: 10%;
  height: 30%;
  background-image: repeating-radial-gradient(white 0%, rgb(255, 34, 34) 20%);
  box-shadow: 6px 12px 50px 10px rgb(255, 200, 230);
  border: 0 solid black;
  filter: blur(10px);
  z-index: 100;
  transition: all ease-in-out 0.3s;
}
.scacchiera1:hover {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}
.scacchiera1.active {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}

.scacchiera2 {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 80%;
  height: 10%;
  background-image: repeating-linear-gradient(white 0%, rgb(58, 58, 58) 20%);
  box-shadow: 6px 12px 50px 10px rgba(83, 83, 83, 0.5);
  border: 0 solid black;
  z-index: 100;
  transition: all ease-in-out 0.3s;
}
.scacchiera2:hover {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}

.scacchiera3 {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 3%;
  height: 50%;
  background-image: repeating-linear-gradient(90deg, white 0%, rgb(58, 58, 58) 33.3333%);
  box-shadow: 6px 12px 50px 10px rgba(83, 83, 83, 0.5);
  border: 0 solid black;
  z-index: 0;
  transition: all ease-in-out 0.3s;
}
.scacchiera3:hover {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}

.scacchiera4 {
  position: absolute;
  bottom: 15%;
  right: 80%;
  width: 15%;
  height: 15%;
  background-image: repeating-radial-gradient(white 40%, rgb(189, 255, 34) 50%);
  box-shadow: 6px 5px 50px 10px rgb(189, 255, 34);
  border: 0 solid black;
  border-radius: 9999%;
  filter: blur(10px);
  z-index: 100;
  transition: all ease-in-out 0.3s;
}
.scacchiera4:hover {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}
.scacchiera4.active {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}

.finestra1 {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 7%;
  height: 20%;
  background-image: radial-gradient(white 0%, cyan 5%, rgb(34, 38, 255) 60%, black 90%);
  box-shadow: 6px 12px 50px 10px rgba(34, 38, 255, 0.3);
  border: 5px solid white;
  border-radius: 100%;
  z-index: 100;
  transition: all ease-in-out 0.3s;
  filter: blur(10px);
}
.finestra1:hover {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}
.finestra1.active {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}

.luce1 {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 400px;
  height: 600px;
  background-image: radial-gradient(rgb(255, 255, 255), rgba(107, 107, 107, 0) 30%);
  box-shadow: 0;
  border: 0 solid white;
  border-radius: 100%;
  z-index: 1;
  transition: all ease-in-out 0.3s;
}
.luce1:hover {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}

.marquee-bottom {
  position: fixed;
  bottom: 10%;
  left: 0;
  width: 80%;
  height: 4%;
  color: blue;
  font-size: 2rem;
  line-height: 1.4;
  text-shadow: 3px 3px 2px white;
  background: transparent;
  display: flex;
  align-items: center;
}
.marquee-bottom:hover {
  background: rgba(255, 255, 255, 0.5);
}

.stair1 {
  position: absolute;
  top: 20%;
  right: 50%;
  width: 10%;
  height: 60%;
  background-image: radial-gradient(white 20%, rgb(240, 255, 32), rgb(71, 83, 241), black);
  border-radius: 100%;
  box-shadow: 8px 1px 40px 5px red;
}

.stair1 div {
  border-radius: 100%;
  width: 95%;
  height: 80%;
  background-image: radial-gradient(white 20%, rgb(240, 255, 32), rgb(71, 83, 241), black);
  transform: translate(20%, 20%);
  box-shadow: 8px 1px 10px 5px rgba(255, 255, 0, 0.2);
}/*# sourceMappingURL=style.css.map */