@font-face {
    font-family: "Open Sauce";
    src: url('Squiz1-fonts/OpenSauceSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Roca";
    src: url('Squiz1-fonts/Roca Bold.ttf') format('truetype');
}

@font-face {
    font-family: "Open Sauce Bold";
    src: url('Squiz1-fonts/OpenSauceSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: "Glacial";
    src: url('Squiz1-fonts/GlacialIndifference-Regular.otf') format('opentype');
}

@font-face {
    font-family: "Glacial Bold";
    src: url('Squiz1-fonts/GlacialIndifference-Bold.otf') format('opentype');
}


@keyframes pulse {
    from {
        transform : rotate(8deg);
    }
    to {
        transform : rotate(14deg);
    }
}

@keyframes pulse2 {
    from {
        transform : rotate(-2deg);
    }

    to {
        transform : rotate(+2deg);
    }
}

@keyframes pulse3 {
    from {
        transform : rotate(-1deg);
    }
    to {
        transform : rotate(+1deg);
    }
}


body{
    font-size: 20px;
    font-family: monospace;
    transform : scale(0.7);
    transform-origin: 0 0;
}

#container{
    margin : 20px auto;
    background-color: rgb(255, 183, 131);
    height: 1080px;
    width : 1920px;
    border-radius: 5px;
    box-shadow: 0px 5px 15px 0px;
    position: relative;
    overflow : hidden ;
}

#start{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    font-size: 32px;
    font-family: 'Open Sauce';
    width:308px;
    height:308px;
    text-align: center;
    cursor: pointer;
    position: relative;
    left:1178px;
    top:800px;
    background-color: #44000a;
    color : lightgrey;
    z-index : 9;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    animation : pulse 0.7s infinite ease-in-out alternate;
}

#qImg{
    width : 680px;
    height : 340px;
    position: absolute;
    left : 110px;
    top : 220px;
}

#qImg img{
    width : 680px;
    height : 340px;
    border-radius: 80px;
    background-color: white;
}

#question{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    width : 1000px;
    height : 340px;
    position: absolute;
    left: 815px;
    top: 220px;
    font-family: 'Roca';
    border : 2px solid #40246d;
    border-radius: 50px;
    color: #44000a;
    background-color: white;
}

#question p{
    margin : 0;
    padding : 0px 35px 10px ;
    text-align: left;
    font-size: 53px;
}

#choices{
    width : 840px;
    height : 115px;
    position: absolute;
    left : 110px;
    top : 600px;
    padding : 5px;
    font-family: 'Open Sauce Bold';
    vertical-align: middle;
    font-size: 45px;
    z-index : 4;
}

.choice{
    display: inline-block;
    width : 840px;
    height : 110px;
    line-height :110px;
    text-align: center;
    border : 2px solid #40246d;
    border-radius: 50px;
    cursor: pointer;
    padding : 5px;
    background-color: white;

    transition: 0.3s ;
}

.choice:hover{
    transform : scale(1.03) !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#progress{
    width : 500px;
    position: absolute;
    top : 0px;
    right : 0px;
    padding:5px;
    text-align: right;
}

.prog{
    width : 25px;
    height : 25px;
    border: 1px solid #000;
    display: inline-block;
    border-radius: 50%;
    margin-left : 5px;
    margin-right : 5px;
}

#scoreContainer{
    height: 256px;
    width : 890px;
    left : 590px;
    top: 188px;
    border-radius: 50px;
    border: 2px solid #40246d;
    position: absolute;
    z-index: 5;

    display: flex;
    justify-content: center;
    align-self: center;

    text-align: center;
}

#scoreContainer p{

    position: absolute;
    font-family: 'Open Sauce';
    color : #44000a;
    font-size: 40px;
   
}

#revealContainer{
    display : flex ;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    transition: 0.5s ;
    transition-timing-function: ease-in-out;
    width: 1440px;
    height : 410px;
    position: relative;
    z-index : 5;
    left: 45px;
    top: 610px;
    font-family: 'Roca';
    border : 2px solid #40246d;
    border-radius: 50px;
    background-color: #fff5c2;
    color: #44000a;
    cursor: pointer;
    animation : pulse3 0.5s infinite alternate;
    animation-delay: 8s;
}

#revealContainer:hover{
    animation-play-state: paused;
    transform : scale(1.03);
}

#revealContainer p{
    margin : 0;
    padding : 0px 40px 20px 50px ;
    text-align: left;
    font-family: 'Roca';
    font-size: 42px;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 20px;
    margin: 20px 0;
}

#correct-button-container{    
    position : absolute;
    left : 1200px;
    top : 500px;
    z-index : 7;
}

#correct-button-was{
    border-radius: 50px;
    background-color: #28e65d;
    border : 2px solid #40246d;
    text-align: center;
    font-family: 'Open Sauce Bold';
    font-size : 45px; 
    padding : 10px 30px 10px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#source-container{
    position : absolute;
    left : 830px;
    top : 990px;
    z-index : 9;
}

#the-source-is{
    text-transform: uppercase; 
    text-align: center;
    background-color: #44000a;
    border-radius: 50px;
    font-family: 'Open Sauce Bold';
    color : white;
    font-size: 28px;
    padding : 10px 30px 10px;
    z-index : 8;
}

#decorum-ch1{
    position : absolute;
    left : 156px;
    top : 760px;
    z-index : 8;
}

#decorum-ch1 img{
    height : 314px;
}

#decorum-ch2{
    position : absolute;
    left : 1666px;
    top : 735px;
    z-index : 8;
}

#decorum-ch2 img{
    height : 275px;
}

#decorum-ch3{
    position : absolute;
    left : 1440px;
    top : 611px;
    z-index : 8;
}

#decorum-ch3 img{
    height : 432px;
}

#decorum-sh1{
    position : absolute;
    left : 1447px;
    top : 969px;
    z-index : 4;
}

#decorum-sh1 img{
    height : 101px;
}

#decorum-cl1{
    position : absolute;
    left : -182px;
    top : 725px;
    z-index : 2;
}

#decorum-cl1 img{
    height : 785px;
}

#decorum-cl2{
    position : absolute;
    left : 1120px;
    top : 610px;
    z-index : 2;
}

#decorum-cl2 img{
    height : 885px;
}

#titles{
    position : absolute ;
    top :20px;
    left: 700px;
    font-family: 'Roca';
    font-size : 107px; 
    color : #44000a ;
}

#star1 {
    position : absolute ;
    top : 95px ;
    left : 290px ;
}

#star1 img{
    height:40px;
}

#star2 {
    position : absolute ;
    top : 95px ;
    right : 290px ;
}

#star2 img{
    height:40px;
}



#pagedegarde{
    height: 1080px;
    width : 1920px;
    background-color: #ff9593;
    z-index : 2 ;
}
#decorum-ch0{
    position : absolute ;
    top : 597px ;
    left : -49px ;
    z-index : 8 ;
}
#decorum-ch0 img{
    width : 609px ;
}
#firework1{
    position : absolute ;
    top : 770px ;
    left : -200px ;
    z-index : 3 ;
    
}
#firework1 img{
    width : 700px ;
}
#firework2{
    position : absolute ;
    top : 770px ;
    right : -200px ;
    z-index : 3 ;
}
#firework2 img{
    width : 700px ;
}
#soit{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    position : absolute ;
    width : 308px ;
    height : 308px ;
    top : 604px ;
    left : 1560px ;
    background-color: #ffd447;
    z-index : 8 ;
    font-size: 32px;
    text-align: center;
    font-family: 'Open Sauce' ;
    color : #44000a ;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#grandstitres1{
    position : absolute;
    width : 1704px ;
    height : 709px ;
    top : 0px ;
    left : 0px ;
    font-family: 'Roca' ;
    font-size : 150px;
    color : #fd5d5b ;
    text-align: center;
    vertical-align: middle;
}
#grandstitres2{
    position : absolute;
    width : 1704px ;
    height : 709px ;
    top : 180px ;
    left : 0px ;
    font-family: 'Roca' ;
    font-size : 150px;
    color : #44000a ;
    text-align: center;
    vertical-align: middle;
}
#banner{
    display: inline;
    position : absolute ;
    width : 1634px;
    height : 81px ;
    top : 108px ;
    left : 108px ;
    background-color: #ffd447;
    border-radius: 50px;
    border : 2px solid #40246d;
    z-index : 3 ;

    font-family: 'Open Sauce';
    color : #44000a ;
    font-size: 55px;
    vertical-align: middle;
    padding-left: 70px;
    padding-top : 10px;
}

#inthebanner{
    display : inline;
    position : absolute ;
    height : 81px;
    font-family: 'Open Sauce';
    color : #44000a ;
    font-size: 40px;
    top : 130px ;
    right : 155px ;
    z-index: 9;
}

#cadre-intro{    
    position : absolute ;
    width : 1704px ;
    height : 709px ;
    top : 218px ;
    left : 108px ;
    background-color: white;
    border : 2px solid #40246d;
    border-radius: 50px;
    z-index : 5 ;
}
#star-a{
    position : absolute ;
    top : 320px ;
    left : 404px ;
    z-index : 7;
}
#star-a img{
    width : 69px ;
}
#star-b{    
    position : absolute ;
    top : 320px ;
    left : 1446px ;
    z-index : 7;
}
#star-b img{
    width : 69px ;
}
#logo{
    position : absolute ;
    top : 720px ;
    left : 905px ;
    z-index : 9;
}
#logo img{
    width : 130px;
}
#fleche {
    position : absolute;
    top : 610px;
    left : 1340px;
    z-index : 9;
}
#fleche img{
    width : 259px;
}


#restart{
    position : absolute ;
    top:930px;
    left:760px;
    font-family: 'Open Sauce' ;
    box-shadow: 0px 5px 15px 0px;
    font-size : 40px;
    color : #44000a ;
    z-index : 9;
    padding : 10px 20px 10px;
    cursor: pointer;
    border : 2px solid #40246d;
    border-radius: 50px;
    animation : pulse2 1s infinite ease-in-out;
    animation-direction: alternate;
}


#decorum-ch4{
    position :absolute;
    top: 49px;
    left : 230px;
    width : 438px;
}
#decorum-ch4 img{
    width: 100%;
}
#decorum-cl3{
    position :absolute;
    top : -518px;
    left: 1100px;
}
#decorum-cl3 img{
    width : 1047px;
}
#decorum-cl4{
    position :absolute;
    width : 1047px;
    top : 870px;
    left: 1479px;
}
#decorum-cl4 img{
    width : 1047px;
}


#result-title{
    position :absolute;
    font-family: 'Roca';
    font-size: 114px;
    top : 450px;
    left : -200px;
    color: #44000a;
    transform : rotate(270deg);
}
#commentContainer{
    position :absolute;
    font-family : 'Glacial';
    font-size : 64px;
    color: #44000a;
    width : 1390px;
    top: 620px;
    left:265px;
    text-align: center;
}

#decorum-st0{    
    position : absolute ;
    top : 220px ;
    left : 155px ;
    z-index : 9;
}
#decorum-st0 img{
    width : 35px ;
}

#infobonusA{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position :absolute;
    font-family : 'Glacial';
    font-size : 44px;
    background-color: #ff9593;
    color : black;
    z-index:9;
    
    justify-content: center;
    align-items: center; 
}

#infobonusB{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position :absolute;
    font-size : 35px;
    padding: 20px;
    background-color: #ff9593;
    color : black;
    z-index:9;
    transform : rotate(11deg);
}

#bcol1{
    font-family : 'Glacial';
    padding: 30px 20px 20px;
}

#bcol2{
    font-family : 'Glacial Bold';
    padding: 30px 30px 20px;
}

#infobonusC{
    font-family : 'Roca';
    justify-content: center;
    align-items: center; 
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position :absolute;
    font-size : 32px;
    background-color: #fb5d5b;
    color : #44000a;
    z-index:9;
    transform : rotate(12deg);
}

#infobonusFl{
    position: absolute;
    left : 336px;
    top: 152px;
    z-index:9;
}
#infobonusFl img{
    width : 190px;
}