@font-face {
    font-family: gesucattivo;
    src: url("font/splatted.ttf");
}

@font-face {
    font-family: tutto;
    src: url("font/Coarserounded.otf");
}


body {
    background-image: url(orangebg3.png);
    background-size: 15%;
    font-family: tutto;
    color: #27221f;
}

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

.left {
    height: 620px;
   float: left;
    margin-left: -10px;
    margin-top: 140px;
}

.right {
    height: 760px;
    float: right;
    margin-top: 0px;
}

.os {
   position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 90px;
    height: 580px;
    width: 690px;
    overflow: scroll;
    overflow-x: hidden;
    z-index: 3;
    text-align: left;
}

h1, h2 {;
font-size: 40px;
    color: black;
    text-shadow: 5px 5px 5px #ee9062;
}

.titolo {
    font-size: 30px;
    color: black;
    text-shadow: 5px 5px 5px #ee9062;
}

.titolo1 {
    position: absolute;
    top: -30px;
    right: 930px;
}

.bg2 {
    width: 1000px;
    position: absolute;
    top: 800px;
    left: 100px;
}

.os2 {
 position: absolute;
    top: 900px;
    left: 140px;
    height: 350px;
    width: 800px;
    overflow: scroll;
    overflow-x: hidden;
    z-index: 3;
    text-align: left;
}

.bg3 {
    position: absolute;
    top: 900px;
    right: 100px;
    width: 400px;
}


.navleft {
    width: 500px;
   position: absolute;
    top: 800px;
    left: 0; 
   /* position: fixed;
    bottom: 0;
    left: 0;
    width: 300px;
    z-index: 5; */
}

a, b {
   color: #ff3700;
}

.navleft:hover {
    content: url(volume5navlefthover!2.png);
}

.navright {
    width: 450px;
    position: absolute;
    top: 800px;
    right: 50px;
}

.navright:hover {
    content: url(volume5navrighthover!2.png);
}









@media screen and (min-width: 1650px) and (max-width: 1800px) {
    .bg {
    width: 1000px;
    
}
    .os {
    top: 110px;
    height: 640px;
    width: 720px;
}
    .left {
    height: 690px;
    margin-left: -10px;
    margin-top: 100px;
}

.right {
    height: 800px;
    margin-top: 0px;
}
}

@media screen and (min-width: 1801px) and (max-width: 2000px) {
    .bg {
    width: 1100px;
    
}
    .os {
    top: 110px;
    height: 690px;
    width: 780px;
}
    .left {
    height: 730px;
    margin-left: -10px;
    margin-top: 100px;
}

.right {
    height: 830px;
    margin-top: 0px;
}
    .navleft {
    width: 500px;
    top: 900px;
}
    .navright {
    width: 450px;
    top: 900px;
    right: 50px;
}

}