/* 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: 50px;
    width: 100%;
    margin-bottom: 20px;
    object-fit: contain;
}

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

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

.clock {
    margin: 40px 0;
}

footer.container {
    padding-top: 0px;
}

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

}