.main-pomodoro {

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

    height: 68vh;

    .timer {

        display: flex;
        justify-content: center;

        @include bodyFont;
        font-weight: bold;
        font-size: 130pt;

        color: $second-color;
    }

    .style-display {

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

        @include bodyFont;
        
        h4 {
            font-size: 24pt;
            
            @include normalizeBody;
            
            color: $second-color;
            user-select: none;

        }

        h3 {
            font-size: 30pt;

            @include normalizeBody;

            color: $second-color;

            cursor: pointer;
            user-select: none;
        }
    }

    .start-pomodoro {
        @include normalizeButton;
        @include titleFont;

        margin-top: 6vh;
        width: 30vw;
        height: 8vh;
        
        background: $second-color;
        border-radius: 24px;

        font-size: 5vh;
        color: white;
    }
}


@media (max-width: 576px) {

    .main-pomodoro {

        height: auto;
        
        .timer {
            font-size: 80pt;
        }

        .start-pomodoro {
            font-size: 13pt;
        }
    }
}

.main-pomodoro-container.dark-mode-component {

    background-color: $main-color-dark;

    .main-pomodoro {

        .timer {

            color: #ffffff;
        }

        .style-display {

            h3, h4 {

                color: #ffffff;
            }
        }

        .start-pomodoro{
            background-color: $lightest-color-dark;
        }

    }
}