cannabinieri_web_actix/templates/assets/css/box.css

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

.open {
  position: fixed;
  top: 25vh;
  display: grid;
  z-index: 300;
}

.content {
  height: inherit;
  width: inherit;
  display: grid;
  grid-template-rows: .35fr .25fr 1fr .45fr;
  max-width: inherit;
  max-height: inherit;
  background:  rgba(255,0,255,0.85);
  position: relative;
  max-width: 60vw;
  /* max-height: 51vh; */
  top: 20vh;
  right: -10vw;
}

.content h2 {
  grid-row: 1;
  display: grid;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  /* font-size: 6.5vh; */
  font-size: 3.25vh !important;
  margin: 3vh 0 2vh 0 !important;
  /* margin: 6vh 0 4vh 0; */
  font-family: 'IBMPlexMono', sans-serif;
}

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

.content p {
  text-align: center;
  margin: 2vh 4vw;
  font-family: 'IBMPlexMono', sans-serif;
  font-size: 1.05vh !important;
  font-weight: bold;
  line-height: 2.5vh !important;
}

.content a {
  grid-row: 4;
  display: grid;
  justify-items: center;
  align-items: center;
  height: 4vh;
  width: 10vw;
  width: 30vw;
  justify-self: center;
  align-self: center;
  margin: 0 0 2vh 0 !important;
  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, rgba(255,255,255,0), rgba(1,1,1,1));
  background-size: 200% 100%;
  background-position: left bottom;
  color: #90e7bc;
}

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


.close {
    height: 20vh;
    width: auto;
    color: #000;
    position: fixed;
	stroke: #000;
    top: 30vh;
	right: -5vw;
}


.close path {
	stroke-width: 1% !important;
}

.close_box {
	right: 10vw;
	top: 35vh;
}

input:hover ~ .close path {
	stroke: rgba(1, 0, 0, 0.3);
}

input {
    height: 20vw;
    z-index: 200;
    opacity: 0%;
    cursor: pointer;
    position: fixed;
    top: 35vh;
	right: 0;
}


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

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


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

}

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

}


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

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

@media (min-height: 750px) and (max-width: 768px) {
  .open {
    max-height: 45vh;
  }

  h2 {
    font-size: 3.25vh !important;
    margin: 3vh 0 2vh 0 !important;
  }

  h3 {
    font-size: 1.5vh !important;
    line-height: 2.5vh !important;
  }

  p {
    font-size: 1.05vh !important;
  line-height: 2.5vh !important;
  }

  a {
    font-size: 1.45vh !important;
  }
}

@media (min-height: 840px) and (max-width: 1080px)  {

  h2 {
      font-size: 3.25vh !important;
      margin: 3vh 0 2vh 0 !important;
  }

  h3 {
    font-size: 1.5vh !important;
    line-height: 2.5vh !important;
  }

  p {
    font-size: 1.05vh !important;
  line-height: 2.5vh !important;
  }

  .content a {
    font-size: 1.45vh !important;
    width: 15vw !important;
    height: 3.5vh !important;
  }

}


@media (min-height: 1020px) and (max-width: 768px) {
  p {
    font-size: 1.25vh !important;
  }

  a {
    margin-top: 0 !important;
  }
}

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


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

	#small {
		font-size: 4.9vh;
		max-width: inherit;
	}
}

@media (min-width: 768px) {
	.content {
		position: relative;
		max-width: 60vw;
		/* max-height: 55vh; */
		top: 5vh;
	}

	.content p {
		font-size: 2vh !important;
		margin: 2vh 2vw;
		line-height: 3vh !important;
	}

	.close {
		height: 25vh;
		top: 15vh;
		right: -5vw;
	}
	.close_box {
		right: 5vw;
		top: 20vh;
	}
}

@media (min-width: 1000px) {

  .open {
    max-width: 35vw;
    top: 20vh;
    right: 5vw;
    max-height: 60vh;
  }

  .close {
    top: 3vh;
    left: 70vw;
	height: 25vh;
  }

  .close path {
	stroke-width: 1% !important;
	}


  .close_box {
	right: 20vw;
	top: 10vh;
 }

  input:hover ~ .close path {
	stroke: rgba(1, 0, 0, 0.3);
  }

  input {
    height: 10vh;
    top: 10vh;
	right: 20vw;
  }
  .content {
	padding: 5vh 1.5vw .5vh 1.5vw;
  }

  .content h2 {
    font-size: 4.5vh;
    margin: 3vh 0 2vh 0;
  }

  .content h3 {
    font-size: 1.75vh;
    line-height: 3vh;
  }

  .content p {
    font-size: 2vh;
    line-height: 4vh;
	font-weight: bold;
  }

  .content a {
   width: 15vw;
   border: .25vw solid #000;
  }

  .content a:hover {
    border: none;
  }

  .content a:active {
    border: .1vw solid #8693AB;
  }

  #larger {
  padding: 5vh 1.5vw 2vh 1.5vw;
  }

}

@media (min-width: 1280px) {
	.content {
	right: 5vw;
	}
}