@font-face {
    font-family: rox;
    src: url(../assets/font/Roxborough_CF.ttf);
}

.rox {
    font-family: rox;
}

.roxBold {
    font-weight: bold;
    font-family: rox;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================ Titolo e Foto alta ========================================================================== */


#containerPage {
    padding: 1% 5%;
    padding-bottom: 0%;
}

.title {
    font-size: 40pt;
    margin-bottom: 25px;
    min-width: 400px
}

#userIcon {
    cursor: pointer;
    font-size: 20pt;
    margin-top: 20px;
}

.containerImg {
    position: relative;
    height: 150px;
    width: 100%;
}


#bgIta {
    background-image: url("../assets/img/it.png");
    background-position-y: 10%;
    background-repeat: no-repeat;
    background-size: cover;
}

#bgEs {
    background-image: url("../assets/img/es.png");
    background-position-y: 30%;
    background-repeat: no-repeat;
    background-size: cover;
}

#bgUk {
    background-image: url("../assets/img/uk.png");
    background-position-y: 10%;
    background-repeat: no-repeat;
    background-size: cover;
}
#overlay{
    height: 100%;
    width: 100%;
    background-color: rgba(207, 207, 207, 0.6);
}
.testo {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20pt;
    font-weight: bold;
    color: black;
    padding: 15px;
    background-color: white;
    margin: 0px auto;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
}





@media (max-width:1000px) {
    .title {
        font-size: 35pt;
        min-width: 350px
    }

    #userIcon {
        font-size: 19pt;
        margin-top: 16px;
    }
}
@media (max-width:745px) {
    .testo {
       font-size: 18pt;
    }
}
@media (max-width:600px) {
    .title {
        font-size: 30pt;
        min-width: 315px
    }

    #imgTitle {
        width: 10%;
    }

    #userIcon {
        font-size: 18pt;
        margin-top: 19px;
    }
    .testo {
        font-size: 16pt;
     }
}

@media (max-width:550px) {
 
    .testo {
        font-size: 14pt;
     }
}

@media (max-width:400px) {
    .title {
        font-size: 25pt;
        min-width: 270px
    }

    #userIcon {
        margin-top: 22px;
    }
    .testo {
        font-size: 13pt;
     }
}



/* ============================================ BONUS ========================================================================== */

.bonus{
    width: auto;
    margin: 0px auto;
    font-size: 40pt;
    text-align: center;
    margin-top: 10%;
    margin-bottom: 12%;
}






/* ============================================ FooterIMG ========================================================================== */
#footerImg {
    position: relative; /* Aggiunto */
    width: 100%;
    height: 218px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

#bgBuoni,
#bgGiornali {
    opacity: 0.9;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

#bgBuoni {
    background-image: url("../assets/img/buoni.png");
}

#bgGiornali {
    background-image: url("../assets/img/giornali.png");
}

#centerText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: rox;
    padding: 15px;
    font-size: 20pt;
    background-color: white;
    text-align: center;
    width: 800px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
}


@media (max-width:1400px) {
    #centerText {
        font-size: 16pt;
        width: 600px;
    }
    
}

@media (max-width:800px) {
    #centerText {
        font-size: 13pt;
        width: 500px;
    }
    
}

@media (max-width:600px) {
    #centerText {
        font-size: 13pt;
        width: 400px !important;
    }
    
}



@media (max-width:500px) {
    #centerText {
        font-size: 11pt;
        width: 250px !important;
    }
    
}



