@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(255, 0, 0) 30%, rgb(255, 255, 255));
  overflow: hidden;
}

.marquee-top {
  background-image: radial-gradient(white 0%, cyan 10%, rgb(34, 38, 255) 60%, white 90%);
  color: #fff;
  font-size: 2rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 600;
  height: 5%;
  cursor: n-resize;
}
.marquee-top:hover {
  background-image: linear-gradient(white 0%, cyan 10%, rgb(34, 38, 255) 60%, white 90%);
}

.scacchiera1 {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 5%;
  height: 95%;
  background-image: repeating-linear-gradient(90deg, white 0%, rgb(0, 0, 0) 20%);
  box-shadow: 6px 12px 50px 10px rgb(255, 200, 230);
  border: 0 solid black;
  z-index: 100;
  transition: all ease-in-out 0.3s;
  cursor: col-resize;
}
.scacchiera1:hover {
  width: 15%;
  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;
  bottom: 0;
  right: 0;
  width: 10%;
  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: 10px solid white;
  border-radius: 0;
  z-index: 100;
  transition: all ease-in-out 0.3s;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff50abdf", endColorstr="#ff1f78aa", GradientType=0);
  background-repeat: repeat-y;
  background-size: 100% 50%;
  background-position: 0 -50%;
  cursor: crosshair;
}
.finestra1:hover {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
  background-image: radial-gradient(white 0%, rgb(255, 0, 85) 5%, rgb(255, 34, 200) 60%, black 90%);
  background-position: 0 0;
  height: 30%;
}
.finestra1.active {
  filter: blur(0px);
  transition: all ease-in-out 0.3s;
}

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

.luce2 {
  position: absolute;
  bottom: 5%;
  left: 10%;
  width: 200px;
  height: 300px;
  background-image: radial-gradient(rgba(0, 255, 255, 0.8), rgba(107, 107, 107, 0) 50%);
  box-shadow: 0;
  border: 0 solid white;
  border-radius: 100%;
  z-index: 1;
  transition: all ease-in-out 0.3s;
  cursor: crosshair;
}
.luce2:hover {
  filter: blur(50px);
  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 */