Pomodoro-Timer-with-Clockify-integration/public/sass_styles/_banner-login.scss

.banner-login {
    background-color: #D17262;
    color: white;

    @include bodyFont();

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0px 5vw;

    height: 8vh;

    
    p {
        @include normalizeBody();
    }

    .button-container {

        width: 20vw;

        display: flex;
        justify-content: space-around;
    
        button {
            @include normalizeButton();

            font-size: 12pt;
            font-weight: bold;
            color: #ffffff;

            height: 6vh;
            cursor: pointer;
        }

        .register {
            border: solid 1px  #ffffff;
            border-radius: 24px;
        }

        .login {
            background-color: #00000057;
            border-radius: 24px;
        }

    }
     
}

.banner-login.blank {
    opacity: 0%;

}

@media (max-width: 918px) {
    .banner-login {
        justify-content: initial;

        height: auto;

        padding: 2vh 2vw;

        p {
            width: 33.3%;
        }

        .button-container {
            width: 66.6%;

            justify-content: space-around;

            button {
                width: 30%;
            }
        }
    }
}

@media (max-width: 576px) {
    .banner-login {

        p {
            width: 50%;
        }

        .button-container {
            width: 50%;

            flex-direction: column;

            button {
                width: 75%;
                margin: 10px;
            }
        }
    }
}

.banner-login.blank.dark-mode-component {
    opacity: 100%;
    background-color: $main-color-dark;
}