@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Josefin+Sans:wght@500&family=Mansalva&family=Montserrat:wght@100;200;300&family=Secular+One&display=swap');
@font-face {
    font-family: 'Efco';
    src: url(EfcoSongsterDemo-YzrpL.ttf);
}

:root {
    background-color:#00092C;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Fredoka One', cursive;

}
h1{
    font-size: 5.4rem;
    color: #EEEEEE;
    text-align: center;
    font-family: 'Efco';
}
h2{
    font-size: .8rem;
    color: #EEEEEE;
    letter-spacing: .6rem;
    margin-top: -20%;
    color: #EEEEEE;
}

.container{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem;
}
.choice-btn{
    width: 80vw;
    height: 80vh;
    display: grid;
    justify-content: center;
    align-items: center;
    max-width: 50rem;
    margin: 0 auto;

}
.btn{
    font-size: 1.5rem;
    padding: 1rem 0;
    width: 30rem;
    text-align: center;
    text-decoration: none;
    color: #EEEEEE;
    background:#FF5F00;
    border-radius: 20px;
    line-height: normal;
}
.btn:hover{
    cursor: pointer;
    background-color: #B20600;
    box-shadow: 0 0.4rem 1.4rem 0 #B20600 ;
    transition: 150ms;
    transform: scale(1.03);
}
.btn[disabled]:hover{
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.info_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.info_box{
    display: none;
    width: 540px ;
    background: #EEEEEE;
    border-radius: 5px;
}
.info_title{
    height: 60px;
    width: 100%;
    border-bottom: 1px solid #00092C;
    display: flex;
    align-items: center;
    padding: 0 35px;
    font-size: 20px;
    font-weight: 600;
}
.info_list{
    padding: 15px 35px;
}
.info{
    margin: 5px 0;
    font: 17px;

}
.info_box .info_list .info span{
    font-weight: 600;
    color: #B20600;
}
.info_box .buttons{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 35px;
    border-top: 1px solid #00092C;
}
.info_box .buttons button{
    margin: 0 5px;
    height: 40px;
    width: 100px;
    border: 1px solid #00092C;
    background: #FF5F00;
    border-radius: 5px;
    font-size:  16px;
    font-weight: 500;
}
.info_box .buttons button:hover{
    cursor: pointer;
    background-color: #7FFF00;
    box-shadow: 0 0.2rem 1rem 0 #018a01 ;
    transition: 150ms;
    transform: scale(1.03);
}