@font-face {
    font-family: link;
    src: url("font/Cryogenix.ttf");
    /* font/CreviceStencil.ttf 
    font/Stoutface.ttf NON HA I NUMERI!!!
    font/Harond.ttf
    font/Corben.ttf
    font/Cryogenix.ttf
    font/Franks.ttf
    */
}

body {
    background-image: url(immagini/areufukedatnight5.png);
    background-size: 10%;
    font-family: link;
    font-size: xx-large;
    color: #e65a00;
}

a {
    color: #e65a00;
}

.text {
    position: absolute;
    margin: auto;
  left: 0;
  right: 0;
    z-index: 7;
    width: 650px;
    height: 580px;
    overflow-y: scroll;
    top: 100px;
    padding: 20px;
    
}

ul {
    list-style-type: none;
}

.main {
    width: 800px;
    position: absolute;
     margin: auto;
  left: 0;
  right: 0;
    top: 0;
    z-index: 2;
}

.banner {
    width: 400px;
    position: absolute;
   top: -30px;
    right: 200px;
    transform: rotate(20deg);
    z-index: 7;
}

.capasanta  {
    width: 300px;
    position: absolute;
    left: 150px;
    top: 50px;
    transform: rotate(-5deg);
    z-index: 5;
}

.vongola {
    width: 230px;
    position: absolute;
    left: 230px;
    top: 300px;
    transform: rotate(10deg);
    z-index: 5;
}

.patella {
    width: 240px;
    position: absolute;
    top: 500px;
    left: 220px;
    transform: rotate(-30deg);
    z-index: 5;
}

.bolinus {
    width: 250px;
    position: absolute;
    right: 260px;
    top: 150px;
    transform: rotate(15deg);
    z-index: 8;
}

.lumachina {
    width: 300px;
    position: absolute;
    top: 400px;
    right: 200px;
    transform: rotate(10deg);
    z-index: 5;
}






@media screen and (max-width: 1300px){
    .main {
        width: 680px;
        top: 50px;
    }
    .text {
        width: 650px;
        height: 480px;
        top: 150px;
    }
    .banner {
        width: 300px;
    }
    .capasanta {
        width: 200px;
        left: 100px;
        top: 100px;
    }
    .vongola {
        width: 180px;
        left: 150px;
        top: 290px;
    }
    .patella {
        width: 200px;
        left: 130px;
        top: 470px;
    }
    .bolinus {
        width: 200px;
        right: 160px;
        top: 130px;
    }
    .lumachina {
        width: 230px;
        right: 100px;
        top: 370px;
    }
 }


@media screen and (min-width: 1301px) and (max-width: 1400px){
    .main {
        width: 740px;
        top: 50px;
    }
    .text {
        width: 670px;
        height: 480px;
        top: 150px;
    }
    .banner {
        width: 350px;
        top: 0px;
    }
    .capasanta {
        width: 250px;
        left: 80px;
        top: 100px;
    }
    .vongola {
        width: 200px;
        left: 110px;
        top: 320px;
    }
    .patella {
        width: 220px;
        left: 130px;
        top: 480px;
    }
    .bolinus {
        width: 230px;
        right: 160px;
        top: 160px;
    }
    .lumachina {
        width: 230px;
        right: 130px;
        top: 400px;
    }
 }

@media screen and (min-width: 1401px) and (max-width: 1500px){
    .main {
        width: 770px;
        top: 50px;
    }
    .text {
        width: 630px;
        height: 580px;
        top: 100px;
    }
    .banner {
        width: 380px;
        
    }
    .capasanta {
        width: 280px;
        left: 80px;
        
    }
    .vongola {
        width: 250px;
        left: 150px;
        top: 290px;
    }
    .patella {
        width: 220px;
        left: 140px;
        top: 480px;
    }
    .bolinus {
        width: 250px;
        right: 160px;
        
    }
    .lumachina {
        width: 230px;
        right: 130px;
       
    }
 }


@media screen and (min-width: 1601px) and (max-width: 1700px){
    .main {
        width: 840px;
        top: 80px;
    }
    .text {
        width: 630px;
        height: 580px;
        top: 150px;
    }
    .banner {
        width: 420px;
        top: 0px;
        right: 250px;
        
    }
    .capasanta {
        width: 300px;
        left: 200px;
        
    }
    .vongola {
        width: 250px;
        left: 290px;
        
    }
    .patella {
        width: 250px;
        left: 170px;
        
    }
    .bolinus {
        width: 270px;
        right: 220px;
        
    }
    .lumachina {
        width: 260px;
        right: 180px;
       
    }
 }



@media screen and (min-width: 1601px) and (max-width: 1700px){
    .main {
        width: 840px;
        top: 80px;
    }
    .text {
        width: 630px;
        height: 580px;
        top: 150px;
    }
    .banner {
        width: 420px;
        top: 0px;
        right: 250px;
        
    }
    .capasanta {
        width: 300px;
        left: 200px;
        
    }
    .vongola {
        width: 250px;
        left: 290px;
        
    }
    .patella {
        width: 250px;
        left: 170px;
        
    }
    .bolinus {
        width: 270px;
        right: 220px;
        
    }
    .lumachina {
        width: 260px;
        right: 180px;
       
    }
 }


@media screen and (min-width: 1701px) and (max-width: 1800px){
    .main {
        width: 880px;
        
    }
    .text {
        width: 630px;
        height: 630px;
      
    }
    .banner {
        width: 440px;
        top: 0px;
        right: 250px;
        
    }
    .capasanta {
        width: 330px;
        left: 200px;
        
    }
    .vongola {
        width: 250px;
        left: 290px;
        
    }
    .patella {
        width: 250px;
        left: 220px;
        
    }
    .bolinus {
        width: 300px;
        right: 220px;
        
    }
    .lumachina {
        width: 260px;
        right: 180px;
       
    }
 }



@media screen and (min-width: 1801px) and (max-width: 1900px){
    .main {
        width: 930px;
       
    }
    .text {
        width: 700px;
        height: 670px;
        
    }
    .banner {
        width: 480px;
        top: 0px;
        right: 250px;
        
    }
    .capasanta {
        width: 330px;
        left: 200px;
        
    }
    .vongola {
        width: 270px;
        left: 290px;
        
    }
    .patella {
        width: 270px;
        left: 220px;
        
    }
    .bolinus {
        width: 330px;
        right: 220px;
        
    }
    .lumachina {
        width: 280px;
        right: 180px;
       
    }
 }




@media screen and (min-width: 1901px) {
    .main {
        width: 980px;
       
    }
    .text {
        width: 700px;
        height: 750px;
        
    }
    .banner {
        width: 500px;
        top: 0px;
        right: 250px;
        
    }
    .capasanta {
        width: 330px;
        left: 200px;
        
    }
    .vongola {
        width: 270px;
        left: 290px;
        
    }
    .patella {
        width: 270px;
        left: 220px;
        
    }
    .bolinus {
        width: 330px;
        right: 220px;
        
    }
    .lumachina {
        width: 280px;
        right: 180px;
       
    }
 }












@media only screen and (min-height: 850px) and (max-height: 1000px) {
    .main {
        top: 70px;
    }
    .text {
        top: 160px;
    }
    .capasanta {
        top: 100px;
    }
    .vongola {
        top: 380px;
    }
    .patella {
        top: 570px;
    }
    .bolinus {
        top: 200px;
    }
    .lumachina {
        top: 450px;
    }
     }

@media only screen and (min-height: 1001px) and (max-height: 1100px) {
    .main {
        top: 130px;
    }
    .text {
        top: 230px;
    }
    .capasanta {
        top: 180px;
    }
    .vongola {
        top: 460px;
    }
    .patella {
        top: 650px;
    }
    .bolinus {
        top: 240px;
    }
    .lumachina {
        top: 580px;
    }
     }


@media only screen and (min-height: 1101px) {
    .main {
        top: 200px;
    }
    .text {
        top: 300px;
    }
    .banner {
        top: 120px;
    }
    .capasanta {
        top: 220px;
    }
    .vongola {
        top: 520px;
    }
    .patella {
        top: 730px;
    }
    .bolinus {
        top: 360px;
    }
    .lumachina {
        top: 640px;
    }
     }


/* @media only screen and (min-height: 850px) and (max-height: 950px) {
    .capasanta {
        top: 120px;
    }
    .vongola {
        bottom: 270px;
    }
    .patella {
        bottom: 110px;
    }
    .bolinus {
        top: 180px;
    }
    .lumachina {
        bottom: 150px;
    }
     } */