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

html, body  {
    height: 100%;
}

.identify-container {

    &:has {
        height: 100%;
    }
    display: flex;
    flex-direction: column;
    align-items: center;

    flex-grow: 1;
    
    .error-message-container {
        width: 70vw;

        background-color: #D17262;

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

        p {
            margin: 2vw;
            color: #ffffff;

            @include titleFont();
            user-select: none;

            font-size: 22pt;

        }

    }

    .identify {
        width: 70vw;

        .options-container {
            display: flex;

            .option {
                width: 35vw;

                display: flex;
                justify-content: space-around;

                padding: 5vh 0px;
                background-color: $second-color;

                cursor: pointer;

                transition: 0.4s ease-in-out;

                h2 {
                    @include titleFont();
                    @include normalizeTitle();

                    color: #ffffff;
                }
            }

            .active-option {
                cursor: initial;
                background-color: $second-color-darker;
            }
        }

        .form-container {

            display: flex;
            justify-content: center;

            form {
                width: 50vw;

                display: flex;
                flex-direction: column;
                align-items: center;

                padding-top: 1vh;

                
                input {
                    height: 4vh;
                    width: 60%;

                    margin-bottom: 1vh;

                    border: none;
                    border-bottom: 1px solid $border-color;
                    outline: none;

                }

                input[type=submit] {
                    width: 50%;
                    border: $border-color solid 1px;
                }
            }
        }
    }


}

.identify-container.dark-mode-component {

   background-color: $second-color-dark; 

   .identify {

    .options-container {

        .option {
            background-color: $light-color-dark;
        }

        .active-option{
            background-color: $light-color-dark-darker;
        }

    }

    .form-container {

        form {
            
            input {

                color: white;

                background: none;
            }
            
            input[type=submit] {
                background-color: $main-color-dark;
            }
        }
    }
}
}