@font-face{font-family:'Bank Sans EF CY';src:url('./fonts/bank-sans-ef-cy-bold.otf');font-weight:normal;font-style:normal;}
 body{overflow:hidden;padding:0;margin:0;}
#annoTH{position: absolute;z-index:10;width:0;height:0;top:0;right:0;border-radius:4px;font-family:Bank Sans EF CY;font-weight:bold;font-size:0;transition:width 3s, height 3s, font-size 3s;border-radius:3px;}
.cerchietto,svg,#nuovoBoxLogo{display:flex;justify-content:center;align-items:center;}
#circle{filter:invert(70%);transition: filter 3s, fill 3s;}
#cliccaQui{position:absolute;z-index:12;top:50%;left:50%;transform:translate(-50%,-50%);}
.flexBox {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
.inputProLogo,#submitButton {width: 200px;height: 40px;border-radius: 4px;padding-left: 6px;font-size: 22pt;margin: 5px auto;}
#mainBox {overflow: hidden;position: absolute;width: 100%;height: 100%;}
#mostraP {position: absolute;right: 5px;top: 50%;transform: translateY(-50%);border-radius: 4px;border: none;padding: 5px;}
#myForm {font-family:'Bank Sans EF CY';width:0px;background-color: rgba(0,50,250,0.12);border-radius: 4px;border: 1px solid cornflowerblue;margin-top:5px;height:0;overflow:hidden;transition: width 3s, height 3s;position:relative;}
#mLogo{display:none;top:0;left:0;position:absolute;z-index:1;}
#name,#password {font-family:Arial;background-color: rgb(190,190,190);color:navy;}
.numberTH2{position:relative;background: linear-gradient(225deg,  DodgerBlue 0%, PaleTurquoise 100%); -webkit-background-clip: text;  color: transparent;}
.numberTH3{position:relative;background: linear-gradient(225deg,  PaleTurquoise 0%, DodgerBlue 100%); -webkit-background-clip: text;  color: transparent;stroke:#ED7014;stroke-dasharray:50 50;}
#nuovoBoxLogo{width:100%;max-width:400px;}
#nuovoBoxLogo{position:absolute;z-index: 7;top: 50%;left:50%;transform: translate(-50%, -50%);opacity: 0;transition:opacity 1s;cursor:pointer;}
.occhietto {width: 40px;}
#occhiettoNegativo {display: none;}
#fourStar{position: absolute;z-index:9;border:1px solid black;top:50%;left:50%;transform: translate(-50%, -50%);}
#rect0 {background-color: #dab060;left: -48%;z-index: 2;}
#rect1 {background-color: gold;left: 0;z-index: 4;}
#rect2 {background-color: blue;right: 0;z-index: 3;}
#rect3 {background-color: navy;right: -53%;z-index: 5;}
#rainContainer {background-color: transparent;font-size:11pt;z-index:6;width:99%;height:99%;position:absolute;}
#rect1,#rect2,#rect0,#rect3{position:absolute;bottom: 0;width: 50%;height: 0;transition: height 3s, transform 5s, width 6s;background-image: repeating-linear-gradient(45deg,rgba(250, 250, 0, 0.2) 0,rgba(0, 0, 0, 0.2) 10px,transparent 10px,transparent 20px);background-size: 4px 4px;}
.scollBody{background-image:repeating-linear-gradient(45deg,rgb(255, 255, 255) 0,rgb(176, 224, 230) 10px,transparent 10px,transparent 20px);background-size: 4px 4px;}
#submitButton{color: white;}
#submitButton,#mostraP{font-family:'Bank Sans EF CY';cursor:pointer;background-color:blue;transition: height 3s, transform 5s, width 6s;background-image: repeating-linear-gradient(45deg,rgba(250, 250, 0, 0.2) 0,rgba(0, 0, 0, 0.2) 10px,transparent 10px,transparent 20px);background-size: 4px 4px;}
#submitButton:active,#mostraP:active{background-color:GOL D;color:black;}
#submitButton:hover,#mostraP:hover{background-color:red;color:black;}
@media only screen and (min-width:401px){
.cerchietto,.svg{width:60%;}
}
@media only screen and (max-width:400px){
.cerchietto,.svg{width:50%;}
}