* {
    font-family: "Roboto", sans-serif;
}

:root {
    --primary-color: #54a8c7;
    --dark-font-color: #2f3748;
    --light-font-color: #ffffff;
    --light-blue-font-color: #add8e6;
    --light-blue-bg-color: rgba(84, 168, 199, 0.12);
    --footer-bg-color: #3a3a3a;
}

footer {
    background-color: var(--footer-bg-color) !important;
    color: var(--light-font-color) !important;
}

footer a {
    color: var(--light-font-color) !important;
}

a.navbar-item:hover {
    color: inherit !important;
}

.blue-hero {
    background: linear-gradient(234deg, #54a8c7 2.05%, #66c2e0 97.97%);
}

.header-blue-bg {
    background-color: var(--light-blue-bg-color);
}

.max-width-25rem {
    max-width: 25rem;
}

.py-1p25rem {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.px-1p75rem {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}

.w-55px {
    width: 55px;
}

.pt-2p75rem {
    padding-top: 2.75rem !important;
}

.large-wave {
    position: absolute;
    z-index: 5;
    transform: skewX(9.5deg) translate(-178px, 13px);
    opacity: 0.8;
}

.skew {
    transform: skewX(-12deg) scaleX(1.2) translateX(-56px);
}

.unskew {
    transform: skewX(10.5deg) scaleX(0.8333) translateX(56px);
}

.pl-7rem-desktop {
    padding-left: 7rem !important;
}

.pr-7rem-desktop {
    padding-right: 7rem !important;
}

.pl-3p5-desktop {
    padding-left: 3.5rem !important;
}

.pr-3p5-desktop {
    padding-right: 3.5rem !important;
}

.pt-10vw {
    padding-top: 10vw !important;
}

.ml-neg1p9rem-desktop {
    margin-left: -1.9rem !important;
}

.height-100 {
    height: calc(100vh - 3.25rem);
}

.min-height-89vh {
    min-height: calc(89vh);
}

.button {
    border: none !important;
}

.is-primary {
    background-color: var(--primary-color) !important;
}

.has-text-primary {
    color: var(--primary-color) !important;
}

.equation {
    font-family: "Roboto Mono", monospace;
    color: var(--light-blue-font-color);
}

.equation p {
    line-height: 1.3;
}

.max-width-550-desktop {
    max-width: 550px;
}

.is-justify-content-flex-start-desktop {
    justify-content: flex-start !important;
}

.is-justify-content-flex-end-desktop {
    justify-content: flex-end !important;
}

/* tablet and below */
@media screen and (max-width: 1023px) {
    .skew {
        transform: skewY(354deg) scaleY(1.5) translateY(3px);
    }

    .unskew {
        transform: skewY(-356deg) scaleY(0.6666) translateY(-3px);
    }

    .reverse-columns {
        flex-direction: column-reverse;
        display: flex;
    }

    .large-wave {
        transform: skewY(4deg) scaleY(0.6666) translate(-271px, 63px);
    }

    .mt-auto-tablet {
        margin-top: auto !important;
        margin-bottom: 2rem !important;
    }

    .pt-4-tablet {
        padding: 1rem 0 0 !important;
    }

    .pb-4-tablet {
        padding: 0 0 1rem !important;
    }

    .mt-6rem-tablet {
        margin-top: 6rem !important;
    }

    .min-height-tablet {
        min-height: 34vh;
    }

    .height-100 {
        height: auto;
    }

    .p-0-tablet {
        padding: 0 !important;
    }

    .max-width-550-desktop {
        max-width: 100%;
    }

    .max-width-450-tablet {
        max-width: 450px;
    }

    .max-width-400-tablet {
        max-width: 400px;
    }

    .max-width-50rem-tablet {
        max-width: 50rem;
    }

    .max-width-full-tablet {
        max-width: 100%;
    }

    .is-justify-content-flex-start-desktop {
        justify-content: center !important;
    }

    .is-justify-content-flex-end-desktop {
        justify-content: center !important;
    }

    .pl-3-tablet {
        padding-left: 0.75rem !important;
    }

    .pr-3-tablet {
        padding-right: 0.75rem !important;
    }
}

@media screen and (max-width: 500px) {
    .large-wave {
        display: none;
    }

    .mb-1rem-mobile {
        margin-bottom: 1rem !important;
    }
}