@font-face {
    font-family: broken15;
    src: url("howdoyousleep.ttf");
    /*merda su firefox, si potrebbe usare whiteonblack nel folder dei font*/
}

@font-face {
    font-family: manrope;
    src: url("Manrope.ttf");
}

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

@font-face {
    font-family: punktype;
    src: url("font/misdemeanor.ttf");
    /* rubberstamp.otf 
    misdemeanor.ttf (su chrome è illeggibile)
    punkkid.ttf*/
}



body {
background-image: url("!!!3.png");
    background-size: 3%;
    background-attachment: fixed;
    color: white;
    font-family: manrope;
}

.navbrush1 {
    width: 400px;
}

.navbrush2 {
    width: 400px;
}

.navbrush3 {
    width: 400px;
}

.navbrush1:hover {
content: url("introblood4.png");
}

.navbrush2:hover {
content: url("charactersblood4.png");
}

.navbrush3:hover {
content: url("volumesblood4.png");
}

.navbar {
    text-align: center;
}



.cranberries {
    width: 1000px;
    margin-top: 00px;
    margin-bottom: 0;
}

.cranberries:hover {
    content: url(dolorehover.png);
}


.volume5 {
    width: 900px;
   
        margin-top: -70px;
}

.volume5:hover {
    content: url(volume5prova2hover.png);
}

.volume9 {
    width: 800px;
   
        margin-top: -50px;
}

.volume9:hover {
    content: url(cosetto8hover.png);
}

.volumiflop {
    width: 600px;
   
        margin-top: -150px;
}

.volumiflop:hover {
    content: url(volumiflophover2.png);
}

.latest {
    width: 600px;
   
        margin-top: -50px;
}

.latest:hover {
    content: url(latestchapters4hover.png);
}

.pookies {
    background-image: url(binding_dark.png);
     box-shadow: 0px 0px 10px 5px #F84195;
   /* in order: x offset, y offset, blur size, spread size, color 
   blur size and spread size are optional (they default to 0) */
width: 450px;
    padding: 10px;
    border-radius: 30px;
}





@media screen and (max-width: 1250px){
   
   .navbrush1 {
   width: 320px;
}

.navbrush2 {
   width: 320px;
}

.navbrush3 {
   width: 320px;
}
   
.navbar {
  left: 40px;
}
 }


@media screen and (min-width: 1700px) and (max-width: 1800px){
    .cranberries {
        width: 1050px;
    }
    .volume5 {
    width: 950px;
}
    .volume9 {
    width: 850px;

}
    .volumiflop {
    width: 680px;
}
.latest {
    width: 630px;
}
    .pookies {
        width: 500px; 
    }
   
 }



@media screen and (min-width: 1801px) and (max-width: 1900px){
    .cranberries {
        width: 1100px;
    }
    .volume5 {
    width: 1000px;
}
    .volume9 {
    width: 900px;

}
    .volumiflop {
    width: 700px;
}
.latest {
    width: 680px;
}
   .pookies {
        width: 550px; 
    }
 }

@media screen and (min-width: 1901px){
    .cranberries {
        width: 1150px;
    }
    .volume5 {
    width: 1050px;
}
    .volume9 {
    width: 950px;

}
    .volumiflop {
    width: 750px;
}
.latest {
    width: 730px;
}
   .pookies {
        width: 600px; 
    }
 }