@font-face {
    font-family: pixel;
    src: url(fonts/PressStart2P-Regular.ttf);
}

@keyframes flicker {
    0% { opacity: 0.99; }
    50% { opacity: 0.95; }
    100% { opacity: 1; }
}

body {
    background-image: url('images/Badlands.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    font-family: pixel;
    overflow: hidden;

    .content {
        width: 90%;
        max-width: 900px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;

        header{
            .logo {
                width: 40vh;
            }
        }
        main{
            .coin {
                width: 20vh;
                cursor: pointer;
                padding: 15vmin;
                &:hover {
                    content: url('images/coin-gif.gif');
                }
            }
        }
        footer{
            h1 {
                font-weight: 400;
                color: rgb(255, 174, 0);
                text-align: center;
                line-height: 2rem;
                font-size: 4vh;
            }
            h3 {
                font-weight: 400;
                color: white;
                text-align: center;
                line-height: 2rem;
                font-size: 2vh;
            }
        }
    }
    
}
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.35) 50%
    );
    background-size: 100% 4px;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.95);
    animation: flicker 0.15s infinite;
}