@font-face {
    font-family: Arvo;
    src: url('../assets/fonts/Arvo/Arvo.ttf')
}

@font-face {
    font-family: Arvo Bold;
    src: url('../assets/fonts/Arvo/Arvo-Bold.ttf')
}

@font-face {
    font-family: Nickainley;
    src: url('../assets/fonts/Nickainley/Nickainley-Normal.otf')
}


/* variabili colori */

:root {
    --main_blue: #1E1A34;
    --main_yellow: #ffc601;
    --main_green: #176e4e;
    --main_red:#d74200;
    --main_purple:#344aa9;
    --main_blue:#01496e;
}

.font-Arvo {
    font-family: Arvo, serif
}

.font-Nickainley {
    font-family: Nickainley, serif;
}

.font-arvo-bold {
    font-family: Arvo Bold, serif
}

.bg_green {
    background-color: var(--main_green);
}
.bg_purple{
    background-color: var(--main_purple);
}
.bg_blue{
    background-color: var(--main_blue);
}

body {
    background-color: var(--main_green);
    margin: 0 !important;

}
main{
    padding-bottom: 1.5rem;
}
#footer {
    margin-top: 20px;
}


/* .hp-bkg {
    background-image: url('../background.c1115b5d27771cac16b2.jpg');
    background-repeat: repeat-y;
    background-size: 100%
} */
.action-button{
    cursor: pointer;
}
.logo {
    height: 40px;
}
.score-background{
    background-size: cover;
    background-image: url("../assets/PaginaPersonaggi/BolloGialloPunteggio.png");
}
#header-logo {
    width: 65%;
    margin: 0 auto;
}

#header-logo {
    display: block;
}

.Home-image {
    height: 30px;
}

.full-width {
    width: 100%
}

.bar-button {
    color: var(--main_blue);
    font-size: 3.2em;
    border-radius: 15px;
    padding: 10px 30px;
    border: 3px solid var(--main_blue);
    background-color: var(--main_yellow);
    cursor: pointer;
}

.bar-button:hover {
    padding: 10px 30px;
    border-radius: 15px;
    color: var(--main_yellow);
    border-color: var(--main_yellow);
    background-color: var(--main_blue);
}

.bar-button:active {
    padding: 10px 30px;
    color: var(--main_yellow);
    border-color: var(--main_yellow);
    background-color: var(--main_blue);
}

.disabled {
    filter: contrast(0.5);
}


.bar-button-button:active {
    background: #d0d0d0;
    color: #999
}


.bg_white {
    background-color: white;
    padding: 4px 12px;
    border: 2px solid #e3c681;
    border-radius: 1rem;
}

.bounce-in-top {
    -webkit-animation: bounce-in-top 1.1s both;
    animation: bounce-in-top 1.1s both;
}

.main-text-color {
    color: var(--main_yellow)
}

.font-size-title {
    font-size: 2rem
}

.font-size-subtitle {
    font-size: 2em
}

.font-size-text-big {
    font-size: 1.6em
}

.font-size-text {
    font-size: 1.2em
}

.text-margin {
    margin: 10px
}

.text-center {
    text-align: center
}

.text_score {
    text-align: center;
    color: red;
    line-height: 17px;
    position: absolute;
    font-size: 1.15rem;
    font-family: 'Nickainley', serif;
    bottom: 0;
    height: 57px;
    width: 57px;
    padding: 12px 5px;
    right: 30px;
}

.cursor-pointer {
    cursor: pointer
}

.cursor-not-allowed {
    cursor: not-allowed
}

.relative {
    position: relative
}

.full-page {
    min-height: 100vh
}

.absolute-origin {
    position: absolute;
    top: 0;
    left: 0
}

.absolute-bottom {
    position: absolute;
    bottom: 0;
    left: 0
}

.img-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.win-width {
    width: 100vw
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.m-8 {
    margin: 8px
}

.m-16 {
    margin: 16px
}

.mt-8 {
    margin-top: 8px
}

.mt-16,
.mt-24 {
    margin-top: 16px
}

.mt-32 {
    margin-top: 32px
}

.mt-40 {
    margin-top: 40px
}

.mt--16 {
    margin-top: -16px
}

.mt--24 {
    margin-top: -24px
}

.mb-12 {
    margin-bottom: 12px
}

.ml-8 {
    margin-left: 8px
}

.loader-container {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.tool {
    padding: 20px 12% 30px;
    background-color: transparent;
}

.legal-image {
    -o-object-fit: contain;
    object-fit: contain;
    margin: 15px;
    height: 50px;
}

.wiz {
    cursor: pointer;
    position: relative;
    max-width: 12%;
    justify-content: center;
    height: 140px;
    margin-bottom: 2.5rem;
}
#games-page img:not(#header-logo){
    max-height: 380px;
    object-fit: contain;
   width: 450px;
}
#games-page .game-descriptions{
    font-size: 1.75rem;
    text-align: center;
    color: var(--main_yellow);
}
#games-container {
    width: 50%;
    justify-content: space-around;
    align-items: baseline;
}
.game-card{
    height: 325px;
}
.game-title {
    object-fit: scale-down;
    /* max-width: 100%; */
    height: 45px;
}
#start-button{
    margin-top: 6.5rem;
    position: relative;
}

.btn-image{
    position: absolute;
}
.btn-image.left{
    left: 11%;bottom: -10%;height: 190px;
}
@media screen and (min-width: 1650px){
    #start-button{
        margin-top: 7rem;
    }
    .btn-image.left{
        left: 11%;bottom: -10%;height: 240px;
    }
}
.btn-image.right{
    right: 0;
    bottom: 0;
}
@media screen and (min-width: 2000px){
    #start-button{
        margin-top: 15.5rem;
    }
    .btn-image.left{
        left: 10%;
        bottom: -10%;
        height: 300px;
    }
}
.memory_container {
    flex-flow: row wrap;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    place-content: center space-between;
    align-items: center;
    flex: 1 1 100%;
    max-width: 35%;
}

.memory_card {
    flex: 1 1 100%;
    box-sizing: border-box;
    max-width: 24%;
}

.nick-box {
    background-image: url(../assets/PaginaPersonaggi/BottoneNicknameVerde.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.nick-input {
    color: var(--main_green);
    font-family: Arvo Bold, serif;
    text-align: center;
    margin: 25px;
    font-size: 2em;
    background: 0 0;
    border: none
}

.nick-input:focus {
    outline: 0
}
#button_continue{
    cursor: pointer;
    display: flex;
    justify-content: center;
}
.wizzis-pg {
    cursor: pointer;
    border: 3px solid transparent;
}

.question_container {
    flex: 1 1 100%;
    box-sizing: border-box;
    max-width: 45%;
}

.trivia-answer {
    margin: 0 1rem;
    width: 40%;
}

.answer_container {
    /*text-transform: uppercase;*/
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: center space-between;
    align-items: center;
    flex: 1 1 100%;

}

.gradient {
    background-position: center;
    background-image: url(../assets/common/gradient.png);
    background-size: cover;
}

#how_to_play {
    font-family: Arvo, serif;
    text-align: center;
    /*font-weight: bold;*/
    color: var(--main_green);
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    max-width: 75%;
}

.pre-questions {
    background-color: var(--main_yellow);
    color: var(--main_green);
    font-family: Arvo, serif;
    display: flex;
    flex-direction: column;
    width: 50vw;
    z-index: 1000;
    border-radius: 1rem;
    padding: 1rem;
}
.pre-questions .how-to-play{
    font-family: 'Arvo Bold',serif;
}
.pre-questions .bar-button{
    cursor: pointer;
    background: url(../assets/common/bottoni/BottonePlayScrittaVerde.png) no-repeat;
    background-size: cover;
    width: 70%;
    border: none;
    text-align: center;
}
#trivia{
    max-width: 80%;
    border-radius: 1rem;
    padding: 20px;
    /* border: 5px solid #d6aa4e; */
    background-color: var(--main_yellow);
    font-family: Arvo,serif;
    /*text-transform: lowercase;*/
}

#score_container {
    font-family: Arvo, serif;
    color: var(--main_green);
    height: 693px;
    width: 90vw;
    background-color: var(--main_yellow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1000;
    border-radius: 1rem;
    padding: 1rem;
}

#certificate_container .font-size-title.text-center.font-Nickainley{
    color: var(--main_yellow);
}
.certificate-level {
    text-transform: capitalize;
    color: white;
}
.coriandoli-container{
    position: absolute;
    width: 20%;
    height: 45%;
    top: 18%;
}
.coriandoli-left{
    left: 18%;
}
.coriandoli-right{
    right: 15%;
}
.confetti {
    width: 8px;
    height: 8px;
    background-color: #f2d74e;
    position: absolute;
    /*left: 25%;*/
    animation: confetti 5s ease-in-out -2s infinite;
    transform-origin: left top;
}

.confetti:nth-child(1) {
    background-color: #f2d74e;
    left: 10%;
    animation-delay: 0;
}

.confetti:nth-child(2) {
    background-color: #95c3de;
    left: 20%;
    animation-delay: -0.25s;
}

.confetti:nth-child(3) {
    background-color: #ff9a91;
    left: 30%;
    animation-delay: -1s;
}

.confetti:nth-child(4) {
    background-color: #f2d74e;
    left: 40%;
    animation-delay: -1.25s;
}

.confetti:nth-child(5) {
    background-color: #95c3de;
    left: 50%;
    animation-delay: -2s;
}

.confetti:nth-child(6) {
    background-color: #ff9a91;
    left: 60%;
    animation-delay: -2.25s;
}

.confetti:nth-child(7) {
    background-color: #f2d74e;
    left: 70%;
    animation-delay: -1.75s;
}

.confetti:nth-child(8) {
    background-color: #95c3de;
    left: 80%;
    animation-delay: -1s;
}

.confetti:nth-child(9) {
    background-color: #ff9a91;
    left: 90%;
    animation-delay: -0.55s;
}

.confetti:nth-child(10) {
    background-color: #f2d74e;
    left: 100%;
    animation-delay: -1.75s;
}

.confetti:nth-child(11) {
    background-color: #f2d74e;
    left: 5%;
    animation-delay: 0;
}

.confetti:nth-child(12) {
    background-color: #95c3de;
    left: 15%;
    animation-delay: -2.75s;
}

.confetti:nth-child(13) {
    background-color: #ff9a91;
    left: 25%;
    animation-delay: -3s;
}

.confetti:nth-child(14) {
    background-color: #f2d74e;
    left: 35%;
    animation-delay: -3.5s;
}

.confetti:nth-child(15) {
    background-color: #95c3de;
    left: 45%;
    animation-delay: -3.75s;
}
/*.confetti:nth-child(16) {*/
/*    background-color: #ff9a91;*/
/*    left: 55%;*/
/*    animation-delay: -4s;*/
/*}*/

/*.confetti:nth-child(17) {*/
/*    background-color: #f2d74e;*/
/*    left: 65%;*/
/*    animation-delay: -4.25s;*/
/*}*/

/*.confetti:nth-child(18) {*/
/*    background-color: #95c3de;*/
/*    left: 75%;*/
/*    animation-delay: -4.75s;*/
/*}*/

/*.confetti:nth-child(19) {*/
/*    background-color: #ff9a91;*/
/*    left: 85%;*/
/*    animation-delay: -3.5s;*/
/*}*/

/*.confetti:nth-child(20) {*/
/*    background-color: #f2d74e;*/
/*    left: 95%;*/
/*    animation-delay: -3.5s;*/
/*}*/
/*.confetti:nth-child(21) {*/
/*    background-color: #f2d74e;*/
/*    left: 10%;*/
/*    animation-delay: 0;*/
/*}*/

/*.confetti:nth-child(22) {*/
/*    background-color: #95c3de;*/
/*    left: 20%;*/
/*    animation-delay: -5s;*/
/*}*/

/*.confetti:nth-child(23) {*/
/*    background-color: #ff9a91;*/
/*    left: 30%;*/
/*    animation-delay: -3s;*/
/*}*/

/*.confetti:nth-child(24) {*/
/*    background-color: #f2d74e;*/
/*    left: 40%;*/
/*    animation-delay: -2.5s;*/
/*}*/

/*.confetti:nth-child(25) {*/
/*    background-color: #95c3de;*/
/*    left: 50%;*/
/*    animation-delay: -4s;*/
/*}*/

@keyframes confetti {
    0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
    25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,67px); }
    50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,135px); }
    75% { transform: rotateZ(5deg) rotateY(1080deg) translate(0,202px); }
    100% { transform: rotateZ(15deg) rotateY(1440deg) translate(0,270px); }
}
@-webkit-keyframes confetti {
    0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
    25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,67px); }
    50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,135px); }
    75% { transform: rotateZ(5deg) rotateY(1080deg) translate(0,202px); }
    100% { transform: rotateZ(15deg) rotateY(1440deg) translate(0,270px); }
}

a:active,
a:hover,
a:link,
a:visited {
    color: #8a6443;
}

a {
    text-decoration: none!important;
}

.certificate-outer-box {
    padding: 5px;
    border: 5px solid #d6aa4e;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, .7);
}

.certificate-inner-box {
    border-radius: 1rem;
    width: 40%;
    background: #c84700;
    padding: 2rem;
    position: relative;
    margin: 0 auto;
}
#certificate_button, #play_again{
    position: absolute;
}
#play_again{
    max-width: 30%;
    bottom: 47px;
}
#certificate_button{
    top: 50px;
    max-width: 50%;
}


/*********************
    ANIMATION KEYFRAMES
**********************/

@-webkit-keyframes lds-ellipsis1 {
    0% {
        transform: scale(0)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0)
    }
    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes lds-ellipsis3 {
    0% {
        transform: scale(1)
    }
    100% {
        transform: scale(0)
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1)
    }
    100% {
        transform: scale(0)
    }
}

@-webkit-keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0)
    }
    100% {
        transform: translate(19px, 0)
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0)
    }
    100% {
        transform: translate(19px, 0)
    }
}


/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */

@-webkit-keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}


/* ----------------------------------------
 * END animation bounce-in-top
 * ----------------------------------------
 */


/********************
RESPONSIVE
********************/

@media screen and (max-width: 1650px) {
    #start-button{
        margin-top: 3.5rem;
    }
    .wiz {
        max-width: 10%;
    }
}

@media screen and (max-width: 1350px) {
    .wiz {
        max-width: 13%;
    }

}

@media screen and (max-width: 1090px) {

    .text_score{
        font-size: 1rem;
        height: 50px;
        width: 50px;
        padding: 9px 5px;
        right: 0;
    }
    #games-container {
        width: 70%;
    }

    .font-size-title {
        font-size: 1.5rem;
    }

    .bar-button {
        font-size: 2rem;
        padding: 5px 20px;
    }
    .certificate-inner-box {
        width: 55%;
    }
}

@media screen and (max-width: 821px) {
    .pre-questions .bar-button{
        background-size: contain;
        width: 60%;
    }
    #games-page .game-descriptions{
        font-size: 1.25rem;
    }
    #games-container {
        width: 85%;
    }

    .game-card{
        height: auto;
    }
    #start-button{
        margin-top: 8rem;
    }
    .font-size-title {
        font-size: 1.5rem;
    }


    .memory_card {
        flex: 1 1 100%;
        box-sizing: border-box;
        max-width: 31%;
    }

    .answer_container {
        max-width: 90%;
        flex-flow: column wrap;
    }

    .trivia-answer {
        margin: 1rem;
        width: 85%;
    }

    #score_container {
        width: 75vw;
    }

    .wiz {
        height: 110px;
        max-width: 13%;
    }
    .certificate-inner-box {
        width: 70%;
    }
}
@media screen and (max-width: 768px) {
    .btn-image.left {
        left: 0;
        bottom: -10%;
        height: 200px;
    }
    .btn-image.right {
        right: -14%;
    }
    .text_score {
        font-size: 0.9rem;
        height: 45px;
        width: 45px;
        padding: 6px 5px;
        right: 0;
    }
}
@media screen and (min-width: 768px) {

    .btn-image.right {
        right: 0%;
    }
}

@media screen and (max-width: 575px) {
    .pre-questions{
        width: 90%;
    }
    .nick-box {
        background-image: url(../assets/PaginaPersonaggi/BottoneNicknameVerde.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center
    }

    #header-logo {
        width: 100%
    }

    .logo {
        height: 25px;
    }

    .Home-image {
        height: 20px;
    }
    #games-page .game-descriptions{
        font-size: 1.5rem;
    }
    #games-container {
        width: 50%;
    }
    .btn-image.left {
        left: -35%;
        bottom: -3%;
        height: 195px;
    }
    .btn-image.right {
        right: -47%;
    }
    #game_title {
        display: none;
    }

    #moves,
    #timer {
        font-size: 1.25rem;
    }

    .nick-input {
        width: 200px
    }

    .tool {
        padding: 15px;
    }


    .font-size-title {
        font-size: 1.5em;
    }

    .font-size-subtitle, #score {
        font-size: 1.5em !important;
    }

    .font-size-text-big {
        font-size: 1.3em
    }

    .font-size-text {
        font-size: 1em
    }

    .legal-image {
        margin: 0 15px;
    }

    .wiz {
        max-width: 20%;
        margin: 0 0.5rem;
    }

    .text_score {
        font-size: 0.95rem;
    }
    .confetti{
        width: 5px;
        height: 5px;
    }
    @keyframes confetti {
        0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
        25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,35px); }
        50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,70px); }
        75% { transform: rotateZ(5deg) rotateY(1080deg) translate(0,95px); }
        100% { transform: rotateZ(15deg) rotateY(1440deg) translate(0,140px); }
    }
    @-webkit-keyframes confetti {
        0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
        25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,35px); }
        50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,70px); }
        75% { transform: rotateZ(5deg) rotateY(1080deg) translate(0,95px); }
        100% { transform: rotateZ(15deg) rotateY(1440deg) translate(0,140px); }
    }
}
@media screen and (max-width: 425px) {
    .text_score {
        bottom: 2px;
        height: 41px;
        width: 41px;
        padding: 3px 7px;
        right: -5px;
    }

    .game-title{
        height: 35px;
    }
    #IconaTrivial{
        margin-top: 0 !important;
    }
    #start-button{
        margin-top: 1rem;
    }
    .btn-image.left {
        left: -25%;
        bottom: -10%;
        height: 125px;
    }
    .certificate-inner-box {
        width: 90%;
    }
    #play_again{
        bottom: 40px;
    }
    #certificate_button {
        top: 35px;
    }
}
@media screen and (max-width: 371px) {
    .text_score {
        line-height: 0.7rem;
        font-size: 0.75rem;
        bottom: 0;
        height: 35px;
        width: 35px;
        padding: 6px 7px;
        right: -12px;
    }
    .bar-button-play-puzzle,
    .bar-button {
        font-size: 1.25rem;
        padding: 2px 15px px;
        border-radius: 10px;
    }

    .wiz {
        height: 80px;
    }
}