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: 17vh;
    box-sizing: border-box;

    a {
        text-decoration: none;
    }

    h1 {
        color: #ffffff;

        font-size: 3vw;
        @include titleFont();
        @include normalizeTitle();
    }
    
    h3 {
        color: rgba(255, 255, 255, 0.75);

        font-size: 1vw;

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

        .selectable {
            user-select: all;
    
    
            a,
            a:link,
            a:visited,
            a:hover,
            a:active {
                color: inherit;
                text-decoration: inherit;
                font-weight: inherit;
    
            }
    
            a {
                &::selection {
                    background-color:#ffe83d;
                    color: #000000
                }
            }
        }
    }

    .konami-code {
        @include titleFont();

        color: $lightest-color-dark;
    }
}




 @media (max-width: 991.98px) {
     .header-main-page {
        height: auto;
        padding: 3vw 0px;
        h1 {
            font-size: 26pt;
        }

        h3 {
            font-size: 13pt;
        }
     }
 }

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