cannabinieri_web_actix/templates/assets/css/box.css

 /* Test */
 /* only load with child template */

 .mobile_placeholder {
    display: flex;
    justify-content: center;
}

.open {
  position: fixed;
  height: 70vh;
  width: 90vw;
  background-color: #fff;
  top: 25vh;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  border-style: solid;
  border-image: linear-gradient(#BDD4E7, #8693AB) 30;
}

.open .box {
  /* background-image: url('/assets/img/spider_out_bw.webp'); */
  background-size: cover;
  background-repeat: no-repeat;
  height: inherit;
  width: inherit;
  opacity: 20%;
  grid-row: 1/5;
}

.content {
  height: inherit;
  width: inherit;
  display: grid;
  grid-template-rows: .5fr .25fr 1fr .45fr;
}

.content h2 {
  grid-row: 1;
  display: grid;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: 6.5vh;
  margin: 6vh 0 4vh 0;
}

.content h3 {
  grid-row: 2;
  display: grid;
  text-transform: uppercase;
  font-size: 3vh;
  margin: 0;
  line-height: 5vh;
  text-align: center;
}

.content p {
  font-size: 1.5vh;
  text-align: center;
  line-height: 3.5vh;
  margin-top: 2vh;
}

.content a {
  grid-row: 4;
  display: grid;
  justify-items: center;
  align-items: center;
  height: 4vh;
  width: 10vw;
  width: 30vw;
  border: .5vw solid #000;
  justify-self: center;
  align-self: center;
  margin-top: 2vh;
  color: #000;
  font-size: 1.95vh;
  cursor: pointer;
  z-index: 2;
  background-position: right bottom;
  transition: all .75s ease-out;
}

.content a:hover {
  background: linear-gradient(to right, #8693AB 5%, #BDD4E7 95%);
  background-size: 200% 100%;
  background-position: left bottom;
  border: .5vw solid #8693AB;
}



.close {
    height: 10vh;
    width: auto;
    align-self: flex-start;
    color: #e5e7e6;
    position: fixed;
    top: 15vh;
    left: 80vw;
}

input {
    height: 20vw;
    width: 20vh;
    z-index: 200;
    opacity: 0%;
    cursor: pointer;
    position: fixed;
    top: 15vh;
    left: 80vw;
}

input:checked ~ .open {
    display: none;
}

input:checked ~ .close {
  display: none;
}

input:hover ~ .close  {
  animation: shine 4s ease-in forwards;

}

@keyframes shine {
  0% {
      stroke: url('#myGradient');

     
      }
      50% {
        stroke: url('#myGradient2');
        
      }
      100% {
          stroke: url('#myGradient');
  }
}

@media (min-height: 750px) {
  .open {
    max-height: 60vh;
  }
}

@media (min-height: 800px) {
  .open {
    max-height: 55vh;
  }
}

@media (min-height: 880px) {
  .open {
    max-height: 45vh;
  }
}

@media (min-height: 1000px) {
  .open {
    max-height: 40vh;
  }
}


@media (min-height: 1070px) {
  .open {
    max-height: 35vh;
  }
}