@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Sevillana&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz@9..144&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Roboto&family=Sevillana&display=swap');

*{
    box-sizing: border-box;
    margin:0;
    padding:0;
    background-color: #E3FDFD;

}
header{
    text-align: center;
    padding:20px;
    background-color: #CBF1F5;
}
h1{
    background-color: #CBF1F5;
    font-size: 2.5rem;
    font-family: Fraunces;
    color:#08D9D6;
    text-shadow: 2px 2px #bab14e;
}
footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    text-align: center;
    padding-top:10px;
    background-color: #A6E3E9;
}
.container{
    padding-top: 20px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
.o-cont{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}
.i-c{
    border:solid;
    width: calc(60px + 3vw);
    height: calc(60px + 3vw);
    text-align: center;
    padding:20px;
    font-family: 'Indie Flower', cursive;
    font-size: 3rem;
    font-weight: 700;

}
.turn{
    padding-top: 20px;
    font-size:calc(1rem + 2vw);
    font-family: Sevillana, cursive;
}

.large-font{
    font-size: 5vw;
}
.end-reload{
    display:none;
    padding: 20px;
    margin:20px 0 20px 0;
    font-size:3vw;
    border-radius: 5%;
    background-color: rgb(0, 255, 21);
    transition: all 0.3s;
}
.end-reload:hover{
    background-color: rgb(53, 80, 56);
    color:white;
}