@import "base.css";

/*--------------------------------------
    wait screen
--------------------------------------*/

    .waiting-screen {
        background: rgb(231,119,119);
        background: linear-gradient(131deg, rgba(231,119,119,1) 18%, rgba(194,70,70,1) 74%);
        height: 100vh;
        width: 100%;

    }

    .waiting-screen .text-container {
        height: 60vh;
        width: 100%;
        text-align: center;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .waiting-screen h2 {
        color: white;
        font-size: 132px;
        text-transform: uppercase;
    }


    .dot-container {
        display: flex;
        width: 100%;
        justify-content: center;
    }


    .dot-flashing {
        position: relative;
        display: block;
        width: 22px;
        height: 22px;
        border-radius: 100%;
        background-color: #8f8f8f;
        color: #8f8f8f;
        animation: dotFlashing 1s infinite linear alternate;
        animation-delay: .5s;
    }

    .dot-flashing::before,
    .dot-flashing::after {
        content: '';
        display: inline-block;
        position: absolute;
        top: 0;
    }

    .dot-flashing::before {
        left: -32px;
        width: 22px;
        height: 22px;
        border-radius: 100%;
        background-color: #b3b3b3;
        color: #b3b3b3;
        animation: dotFlashing 1s infinite alternate;
        animation-delay: 0s;
    }

    .dot-flashing::after {
        left: 32px;
        width: 22px;
        height: 22px;
        border-radius: 100%;
        background-color: #b3b3b3;
        color: #b3b3b3;
        animation: dotFlashing 1s infinite alternate;
        animation-delay: 1s;
    }

    @keyframes dotFlashing {
        0% {
            background-color: #aaa9a9;
        }

        50%,
        100% {
            background-color: #d8d7d7;
        }
    }

        /*
        --------------------------------------------------------
        Media Queries
        --------------------------------------------------------
        */


        @media screen and (min-width: 320px) {
            .waiting-screen h2 {
                font-size: 62px;
            }
            .waiting-screen .text-container {
                height: 54vh;
            }
        }
    
        @media screen and (min-width: 580px) {
            .waiting-screen h2 {
                font-size: 64px;
            }
            .waiting-screen .text-container {
                height: 54vh;
            }
        }
    
        @media screen and (min-width: 768px) and (max-width: 1024px) {
            .waiting-screen h2 {
                font-size: 82px;
                margin: 0;
            }
            .waiting-screen .text-container {
                height: 56vh;
            }
        }
    
        @media screen and (min-width: 1024px) {
            .waiting-screen h2 {
                font-size: 124px;
                margin-top: -20px;
            }
            .waiting-screen .text-container {
                height: 60vh;
                
            }
        }