@import url('./partials/fonts.css');
@import url('./partials/colors.css');
@import url('./partials/commons.css');

/* Utilities */
.h-100 {
    &.hero {
        .row {
            height: 100vh;
        }
    }

    .row {
        padding: 5rem 0;

        @media screen and (min-width: 768px) {
            min-height: 100vh;
            padding: 0;
        }
    }
}

.separator {
    &.gradient {
        background: linear-gradient(to right, var(--heart-color), var(--brain-color));
        margin-left: auto;
        margin-right: auto;
    }

    &.black {
        background-color: black;
    }

    background-color: white;
    height: 5px;
    margin: 1.5rem 0 2rem;
    width: 200px;
}

/* Navbar */
.navbar-sticky {
    background-color: var(--secondary-color);
}

nav {
    transition: all .25s ease-out;
}

.nav-link {
    color: white !important;
}

.navbar-toggler {
    border: none;
    padding: 0;

    i {
        color: white;
    }
}

/* Typography */
h1 {
    font-size: calc(2.375rem + 1.5vw);
}

h2 {
    font-size: calc(2.325rem + .9vw);
}

h3 {
    font-size: calc(2.3rem + .6vw);
}

b {
    font-weight: bold;
}

/* Buttons */
.btn {
    &.primary {
        background-color: var(--primary-color);
        font-weight: bold;
    }
}

/* Content */
section {
    *:last-child {
        margin-bottom: 0;
    }

    &:not(.intro):not(.lsp) {
        color: white;
    }

    &.intro {
        img {
            @media screen and (min-width: 768px) {
                max-width: 50%;
            }
        }
    }

    &.hipster-studio {
        background-color: var(--hipster-studio-color);
    }

    &.digital-hub {
        background-color: var(--digital-hub-color);
    }

    &.learning-center {
        background-color: var(--learning-center-color);
    }

    &.school-factory {
        background-color: var(--school-factory-color);
    }

    &.lsp {
        background-color: var(--lsp-color);
    }

    &.sustainability {
        background-color: var(--sustainability-color);
    }
}

footer {
    background-color: var(--secondary-color);
    color: white;
    font-size: .75rem;
    padding: 2rem 0;
}