Pomodoro-Timer-with-Clockify-integration/public/sass_styles/_header.scss

.header-main-page {
    background-color: $main-color;

    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;

    height: 14vh;
    padding: 0vh 1vw;

    box-sizing: border-box;

    a {
        text-decoration: none;
    }
    
    .title-link {
        width: fit-content;
    }

    h1 {
        color: #ffffff;

        font-size: 3vw;

        display: inline;

        @include titleFont();
        @include normalizeTitle();
    }

    .konami-code {
        @include titleFont();

        color: $lightest-color-dark;
    }
}
.notification-select {

    background-color: $second-color;
    height: 3vh;

    display: flex;
    align-items: flex-end;

    padding-left: 1vw;
    
    box-sizing: border-box;

    color: #fff;

    @include bodyFont();

    p { 
        display: inline-block;

        align-self: center;

        padding: 0;

        margin: 0;
        margin-right: 1vw;
    }

    button {
        height: 80%;
        width: 5%;

        margin-right: 0.5vw;
        
        border: none;
        border-radius: 2px;

        align-self: center;

        color: #fff;
        font-weight: bold;

        cursor: pointer;
    }

    button.yes {
        background-color: rgb(76, 175, 80);
    }

    button.no {
        background-color: rgb(211, 47, 47);
    }
}

@media (max-width: 991.98px) {
    .header-main-page {
        height: auto;
        padding: 3vw 0px;

        align-items: center;
        
        h1 {
            font-size: 26pt;
        }

        h3 {
            font-size: 13pt;
        }
    }

    .notification-select {
        height: auto;
        flex-wrap: wrap;

        p {
            width: 100%;
            margin-top: 1vh;
            margin-bottom: 1vh;
        }

        button {
            height: 30px;
            width: 20%;
            margin-bottom: 1vh;
        }
    }
}

.header-main-page.dark-mode-component {
    background-color: $main-color-dark;
    border-bottom: 1px solid #ffffff72;
}

.notification-select.dark-mode-component {
    background-color: $second-color-dark;
}