@font-face {
    font-family: pacifico;
    src: url('./../resources/fonts/Pacifico-Regular.ttf');
}
@font-face {
    font-family: PoetsenOne;
    src: url('./../resources/fonts/PoetsenOne-Regular.ttf');
}

body{
    font-family: PoetsenOne;
    background-color: rgb(223, 201, 172);
    margin: 0;
    padding: 0;
    h1{
        font-family: Pacifico;
    }
    input{
        font-family: PoetsenOne;
        cursor: pointer;
        padding: 5px 20px;
        font-size: 18px;
        border-radius: 5px;
        text-align: center;
        width: fit-content;
        box-shadow:  3px 5px 10px rgba(0,0,0,0.5) inset;
        background: rgba(255, 255, 255, 0.3);
        border: none;
        &:focus{
            background: rgba(255, 255, 255, 0.5);
            outline: none;
        }
    }
    button{
        font-family: PoetsenOne;
        cursor: pointer;
        padding: 5px 20px;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        background: linear-gradient(45deg,rgb(204, 150, 34), rgb(236, 199, 119));
        box-shadow:  3px 3px 10px rgba(0,0,0,0.4);
        transition: 0.2s;
        &:hover{
            box-shadow: 5px 10px 10px rgba(0,0,0,0.4);
        }
        &:active{
            scale: 0.9;
        }
    }
    #game{
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }

    @keyframes loader {
        0%{
            scale: 1;
        }
        50%{
            scale: 3;
        }
        100%{
            scale: 1;
        }
        
    }
    @for $i from 1 through 5 {
        .loader >div:nth-child(#{$i}n) {
            animation-delay: #{$i * 0.22}s;
        }
    }
    .loader{
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        
        >div{
            animation: loader 2s linear infinite;
            background: rgb(97, 47, 0, 0.5);
            margin-left: 5px;
            margin-right: 5px;
            height: 15px;
            width: 15px;
            display: inline-block;
            border-radius: 20px;
        }
    }
}