@font-face {
    font-family: body;
    src: url("font/EBGaramond12-Regular.ttf");
    /* EBGaramond12-Regular.ttf
    oliver.ttf 
    */
}

@font-face {
    font-family: title;
    src: url("font/brillant.otf");
    /* kugile.ttf
    quivert.ttf
    brillant.otf
    
    */
}

body {
    font-family: body;
    font-weight: bold;

   background-color: #a45985;
background-image: url("stucco.png");
}

h1, h2, h3, h4 {
    font-family: title;
    color: #5F0161;
    font-size: 30px;
     line-height: 1.5;
    text-shadow: 2px 2px 5px #F3A9BD;
}

.main {
    width: 900px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
}

.alltext {
    text-align: center;
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 580px;
    height: 440px;
    overflow-y: scroll;
    z-index: 3;
   
}

.flop {
    width: 300px;
    float: left;
    margin-right: 10px;
}

.tavolo {
    width: 500px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 4;
}

.heartcroc {
    width: 200px;
    position: absolute;
    right: 130px;
    bottom: 410px;
    z-index: 5;
    transform: rotate(10deg);
}

.balestra {
    width: 500px;
    position: absolute;
    left: 0px;
    bottom: 50px;
    z-index: 4;
}

.verdict1 {
    width: 300px;
    position: absolute;
    right: 100px;
    bottom: 390px;
    z-index: 6;
}

b {
    font-weight: bolder;
    color: #B03B63;
}

a {
    font-weight: bolder;
    color: #B03B63;
}

.volume12 {
    width: 700px;
    height: 500px;
    overflow-y: scroll;
   top: 750px;
  /*  left: 80px; */
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-style: solid;
    border-color: black;
    background-color: white;
    font-family: "times new roman";
    font-weight: normal;
    padding: 0 20px 0 20px;
}

.twelve {
    font-family: "times new roman";
    color: black;
    text-shadow: 0 0 0;
}

.frame13 {
    width: 800px;
    position: absolute;
    top: 1300px;
    left: 50%;
    transform: translate(-50%, 0);
}

.alltext13 {
    width: 500px;
    height: 370px;
    overflow-y: scroll;
    position: absolute;
    top: 1420px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
}

.car {
    width: 300px;
    position: absolute;
    right: 180px;
    top: 1700px;
}

.orologio {
    width: 450px;
    position: absolute;
    right: 0px;
    top: 1200px;
}

.sedia {
    width: 500px;
    position: absolute;
    left: 0px;
    top: 1300px;
}

.navright {
    width: 400px;
    position: absolute;
    right: 0px;
    top: 1990px;
}

.navleft {
    width: 450px;
    position: absolute;
    left: 0px;
    top: 1930px;
}

.navleft:hover {
    content: url(flopnavlefthover.png);
}

.navright:hover {
    content: url(flopnavrighthover.png);
}







@media screen and (min-width: 1201px) and (max-width: 1350px) {
    .main {
    width: 800px;
}

.alltext {
    top: 130px;
    width: 520px;
    height: 390px;
}
.tavolo {
    width: 350px;
    top: 250px;
    right: -30px;
}

.heartcroc {
    width: 150px;
    right: 50px;
    bottom: 480px;
}

    .balestra {
    width: 350px;
    left: 0px;
        top: 100px;
}
.frame13 {
    width: 750px;
}

.alltext13 {
    width: 480px;
    height: 330px;
}
    .car {
    width: 300px;
    right: 90px;
    top: 1700px;
}

.orologio {
    width: 400px;
    right: -50px;
    top: 1200px;
}

.sedia {
    width: 350px;
    left: 0px;
    top: 1490px;
}
}




@media screen and (min-width: 1351px) and (max-width: 1450px){
    .main {
    width: 850px;
}

.alltext {
    top: 130px;
    width: 570px;
    height: 420px;
}
.tavolo {
    width: 400px;
    top: 230px;
    right: -10px;
}

.heartcroc {
    width: 180px;
    right: 80px;
    bottom: 490px;
}

    .balestra {
    width: 410px;
    left: 0px;
        top: 100px;
}
.frame13 {
    width: 780px;
}

.alltext13 {
    width: 500px;
    height: 350px;
}
    .car {
    width: 300px;
}

.orologio {
    width: 400px;
    right: -50px;
    top: 1200px;
}

.sedia {
    width: 430px;
    left: 0px;
    top: 1470px;
}
}





@media screen and (min-width: 1451px) and (max-width: 1540px) {
.tavolo {
    width: 450px;
    right: -20px;
    top: 320px;
}

.heartcroc {
    width: 200px;
    right: 100px;
    top: 220px;
}
    .balestra {
    width: 450px;
    left: -10px;
        top: 180px;
}

    .car {
    width: 300px;
    right: 90px;
    top: 1700px;
}

.orologio {
    width: 450px;
    right: -50px;
    top: 1200px;
}

.sedia {
    width: 420px;
    left: 0px;
    top: 1490px;
}
}


@media screen and (min-width: 1651px) and (max-width: 1740px) {
.main {
    width: 900px;
}

.alltext {
    top: 150px;
    width: 630px;
    height: 420px;
}
.tavolo {
    width: 450px;
    right: -20px;
    top: 320px;
}

.heartcroc {
    width: 200px;
    right: 100px;
    top: 220px;
}
    .balestra {
    width: 450px;
    left: -10px;
        top: 180px;
}
    .frame13 {
    width: 830px;
}

.alltext13 {
    width: 520px;
    height: 360px;
    top: 1430px;
}

    .car {
    width: 300px;
    right: 230px;
    top: 1700px;
}

.orologio {
    width: 450px;
    right: 100px;
    top: 1200px;
}

.sedia {
    width: 500px;
    left: 0px;
    top: 1440px;
}
}





@media screen and (min-width: 1741px) and (max-width: 1890px) {
.tavolo {
    width: 500px;
    right: -20px;
    top: 290px;
}

.heartcroc {
    width: 200px;
    right: 130px;
    top: 195px;
}
    .balestra {
    width: 500px;
    left: -10px;
        top: 180px;
}
    .frame13 {
    width: 830px;
}

.alltext13 {
    width: 520px;
    height: 360px;
    top: 1430px;
}

    .car {
    width: 300px;
    right: 230px;
    top: 1700px;
}

.orologio {
    width: 500px;
    right: 60px;
    top: 1200px;
}

.sedia {
    width: 550px;
    left: 50px;
    top: 1350px;
}
}




@media screen and (min-width: 1891px) and (max-width: 2000px) {
    
    .main {
    width: 920px;
}

.alltext {
    top: 140px;
    width: 650px;
    height: 450px;
}
.tavolo {
    width: 570px;
    right: 0px;
    top: 250px;
}

.heartcroc {
    width: 250px;
    right: 150px;
    top: 120px;
}
    .balestra {
    width: 580px;
    left: -10px;
        top: 100px;
}
    .frame13 {
    width: 900px;
}

.alltext13 {
    width: 590px;
    height: 400px;
    top: 1435px;
}

    .car {
    width: 300px;
    right: 340px;
    top: 1700px;
}

.orologio {
    width: 550px;
    right: 60px;
    top: 1200px;
}

.sedia {
    width: 550px;
    left: 50px;
    top: 1350px;
}
}





@media screen and (min-height: 901px) and (max-height: 1000px) {
.tavolo {
    width: 450px;
    top: 280px;
}

.heartcroc {
    width: 200px;
    right: 100px;
    top: 220px;
}
    .balestra {
    width: 450px;
    left: -10px;
        top: 150px;
}

}