/* base */
@import '../base/base.css';
@import '../base/layout.css';

/* 3rd-party */
@import '../3rd-party/font-awesome.min.css';

/* components */
@import '../components/button.css';
@import '../components/clock.css';
@import '../components/form.css';
@import '../components/mouse.css';
@import '../components/progress-bar.css';

/* CUSTOM STYLE GOES BELOW THIS COMMENT LINE */

.hero {
    padding-bottom: 20px;
}
.hero > .row-short {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 20px;
}

.logo {
    height: 60px;
    width: 100%;
    margin-bottom: 20px;
    object-fit: contain;
}

.main-title {
    font-size: 70px;
    text-transform: uppercase;
}

.main-description {
    font-size: 20px;
}

.clock {
    margin: 40px 0;
}

footer.container {
    padding-top: 0;
}

@media (max-width: 500px) {
    .main-title {
        font-size: 50px;
    }
}