*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html, body{
    background:#333;
    font-family:"Nunito Sans";
}
button{
    font-family:"Nunito Sans";
    letter-spacing:1px;
    border:none;
    outline:none;
    transition:all 200ms ease;
}
button:hover{
    cursor:pointer;
}



main{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100vh;
}
#wrapperGame{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:1024px;
    height:480px;
    background-color:#fff;
    border:solid #000 3px;
    border-radius:10px;
	overflow:hidden;
}



.game__screen{
    display:flex;
    justify-content:center;
    align-items:center;
    width:60%;
    height:100%;
}
.game__screen--image{
    width:50%;
    aspect-ratio:1/1;
    background-image:url("");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}



.game__controls{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    padding:15px;
    width:40%;
    height:100%;
    background-color:#fafafa;
    border-left:solid #ddd 1px;
}

.controls__infos{
    width:100%;
    height:calc(100% / 3);
}
.controls__infos p{
    margin-bottom:10px;
    font-size:1.1rem;
    font-weight:600;
}
.controls__infos p span{
    font-size:.9rem;
    font-weight:500;
    color:#555;
}
.controls__infos--score sup{
    margin-left:25px;
    font-size:.8rem;
    font-weight:500;
    color:#555;
}

.controls__start{
    padding-top:25px;
    width:100%;
    height:calc(100% / 3);
    text-align:center;
}
.controls__start button{
    padding:12px 25px;
    background-color:#333;
    border-radius:5px;
    font-size:1.1rem;
    font-weight:600;
    color:#eee;
}
.controls__start button:hover{
    background-color:#111;
    color:#fff;
}

.controls__firstStep{
    display:none;
    padding-top:15px;
    width:100%;
    height:calc(100% / 3);
    text-align:center;
}
.controls__firstStep h2{
    margin-bottom:10px;
    font-size:1.8rem;
}
.controls__firstStep p{
    font-size:1.1rem;
    color:#555;
}

.controls__inputs{
    display:none;
    width:100%;
    height:calc(100% / 3);
    text-align:center;
}
.controls__inputs h2{
    margin-bottom:25px;
    font-size:1.8rem;
}
.controls__inputs button{
    padding:12px 25px;
    border-radius:10px;
    font-size:1.1rem;
    font-weight:600;
    color:#eee;
}
.controls__inputs--true{
    margin-right:10px;
    background-color:rgb(101, 189, 101);
}
.controls__inputs--false{
    background-color:rgb(216, 67, 67);
}
.controls__inputs--true:hover{
    background-color:rgb(132, 214, 132);
    color:#fff;
    transform:scale(.95);
}
.controls__inputs--false:hover{
    background-color:rgb(226, 108, 108);
    color:#fff;
    transform:scale(.95);
}

.controls__loseScreen{
    display:none;
    width:100%;
    height:calc(100% / 3);
    text-align:center;
}
.controls__loseScreen h2{
    margin-bottom:15px;
    font-size:1.8rem;
    color:rgb(216, 67, 67);
}
.controls__loseScreen p{
    font-size:1rem;
}
.controls__loseScreen p span{
    font-weight:600;
}

.controls__end{
    display:none;
    width:100%;
    height:calc(100% / 3);
    text-align:center;
}
.controls__end h2{
    margin-bottom:15px;
    font-size:1.8rem;
}
.controls__end p{
    font-size:1rem;
}
.controls__end p span{
    font-weight:600;
}

.controls__reset{
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    width:100%;
    height:calc(100% / 3);
}
.controls__reset button{
    padding:5px 8px;
    background-color:#888;
    border-radius:5px;
    font-size:.8rem;
    color:#eee;
}
.controls__reset button:hover{
    background-color:#aaa;
    color:#fff;
}