@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(18, 1, 95) 0%, rgb(49, 52, 197) 50%, rgb(255, 255, 255) 100%);
  overflow: hidden;
}

.btns {
  position: absolute;
  display: flex;
  align-items: flex-start;
  width: 50%;
  top: 10%;
  left: 50px;
  flex-direction: column;
}
.btns .btn1 {
  margin-bottom: 30px;
  text-shadow: 2px 2px 1px rgb(139, 255, 6);
}
.btns .btn2 {
  text-shadow: 2px 2px 5px rgb(214, 39, 170);
}

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

.btn1 {
  color: black;
  text-shadow: 2px 2px 5px white;
  padding: 2% 6% 2% 6%;
  background-image: linear-gradient(greenyellow, yellow);
  box-shadow: inset 0 -5px 20px seagreen, inset 0 5px 20px white, -8px 5px 25px rgb(169, 241, 0);
  border-radius: 9999px;
}
.btn1:active {
  padding: 2% 6% 2% 6%;
  box-shadow: inset 0 5px 20px teal, inset 0 -5px 20px white, -8px 8px 15px 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;
}

.marquee-bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  color: blue;
  font-size: 2.5rem;
  text-shadow: 2px 2px 5px white;
  background: radial-gradient(rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
}
.marquee-bottom:hover {
  background: linear-gradient(black, white);
}

.marquee-top {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  color: red;
  font-size: 2.5rem;
  text-shadow: 2px 2px 5px white;
  background: radial-gradient(rgb(0, 0, 0) 0%, rgb(50, 47, 255) 100%);
  z-index: 1;
}
.marquee-top:hover {
  background: linear-gradient(rgb(50, 47, 255), black);
}

.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;
  bottom: 10%;
  right: 2%;
  width: 3%;
  height: 30%;
  background-image: repeating-linear-gradient(white 0%, red 20%);
  box-shadow: 6px 12px 50px 10px rgb(255, 200, 230);
  border: 1px solid black;
  z-index: 100;
  display: none;
}

.headline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
.headline svg {
  width: 50%;
  padding: 0 0 20px;
  stroke-width: 0.5;
  stroke: rgb(255, 255, 255);
}
.headline .title {
  font-weight: bold;
  text-align: center;
  text-shadow: rgb(255, 255, 255) 2px 2px 15px;
  font-size: 7rem;
}
.headline .data {
  font-size: 3rem;
  text-shadow: white 2px 2px 15px;
}

.stair1 {
  position: fixed;
  top: -22%;
  right: -3%;
  width: 10%;
  height: 60%;
  background-image: radial-gradient(white 5%, rgb(210, 32, 255), rgb(109, 194, 113), black);
  border-radius: 100%;
  box-shadow: 8px 1px 40px 5px green;
}

.stair1 div {
  border-radius: 100%;
  width: 95%;
  height: 80%;
  background-image: radial-gradient(white 5%, rgb(210, 32, 255), rgb(109, 194, 113), black);
  transform: translate(-30%, 23%);
  box-shadow: 8px 1px 40px 5px green;
}

.stair2 {
  position: fixed;
  bottom: -15%;
  left: -5%;
  width: 10%;
  height: 60%;
  background-image: radial-gradient(white 20%, yellow, greenyellow, black);
  border-radius: 100%;
  box-shadow: 8px 1px 40px 8px red;
}

.stair2 div {
  border-radius: 100%;
  width: 95%;
  height: 80%;
  background-image: radial-gradient(white 20%, yellow, greenyellow, black);
  transform: translate(50%, -10%);
  /* filter: drop-shadow(8px -5px 15px red); */
  box-shadow: 8px 1px 40px 5px red;
}

.clouds,
.clouds * {
  border-radius: 100%;
  background-image: radial-gradient(white, rgb(187, 187, 164));
  position: fixed;
}

.clouds {
  top: 25%;
  left: -15%;
  width: 50%;
  height: 30%;
  filter: blur(25px);
  opacity: 0.9;
}

.clouds div:first-child {
  top: 20%;
  left: 70%;
  width: 50%;
  height: 40%;
}

.clouds div:nth-child(2) {
  top: 70%;
  left: 20%;
  width: 135%;
  height: 60%;
}

.clouds div:nth-child(3) {
  top: 130%;
  left: 0%;
  width: 120%;
  height: 60%;
}

.clouds div:nth-child(4) {
  top: 25%;
  left: 150%;
  width: 120%;
  height: 70%;
}

.clouds div:nth-child(5) {
  top: 55%;
  left: 200%;
  width: 50%;
  height: 80%;
}

.clouds div:nth-child(6) {
  top: 130%;
  left: 150%;
  width: 100%;
  height: 90%;
  transform: rotate(-15deg);
}/*# sourceMappingURL=style.css.map */