:root {
    --yellow: #E8B200;
    --shadow: 0 4px 4px rgba(0, 0, 0, .25);
    --box-width: 400px;
}

body {
    margin: 0;
    font-family: 'Kulim Park', sans-serif;
    padding: 0;
    border-top: 2rem var(--yellow) solid;
}

.section-heading {
    text-align: center;
    padding: 2em;
}

.content-width {
    max-width: 1000px;
    margin: 0 auto;
}

.flex-col {
    display: flex;
    flex-flow: column;
}

.font-big {
    font-size: calc(var(--box-width) / 18);
}

.align-center {
    align-items: center;
    text-align: center;
}

.shadow {
    box-shadow: var(--shadow);
}

.section-portal .flex-col {
    width: var(--box-width);
}

.section-portal p {
    margin-top: 3em;
    text-align: justify;
}

.box {
    background-color: var(--yellow);
    font-size: calc(var(--box-width) / 13);
    font-weight: bold;
    width: var(--box-width);
    height: var(--box-width);
    border-radius: 8px;
    align-content: center;
    text-align: center;
    cursor: pointer;
    transition: ease .5s transform;
}

.box:hover {
    transform: translateY(-5px);
}

.abovebox {
    padding: .5em;
    font-weight: bold;
    font-family: 'Inria', sans-serif;
}

.section-portal {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    min-height: 800px;
    position: relative;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    height: calc(var(--box-width) * 0.65);
}

.footer {
    padding: 2em 0;
    min-height: 5em;
    margin-top: 3em;
    background-color: #d3d3d3;
    display: flex;
    flex-flow: column nowrap;
    color: rgba(0,0,0,.7);
    align-items: center;
}

.footer .credits {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.footer .docs {
    display: flex;
    flex-flow: column nowrap;
    margin-top: 2em;
    text-align: center;
    width: 50%;
    padding-top: 2em;
    border-top: 1px dashed grey;
}

.footer .docs a {
    margin: 1em;
}

.footer img {
    height: 4em;
    filter: grayscale(.2);
    margin: 0 3.5em;
}

.footer>* {
    margin-bottom: .7em;
}

.footer a {
    text-decoration: underline;
}

p {
    font-family: "Cantarell", Roboto, Ubuntu, sans-serif;
    color: #8c8c8c;
}

@media (max-width: 981px) {
    :root {
        --box-width: 300px;
    }
    .section-portal {
        justify-content: space-evenly;
    }
}

@media (max-width: 623px) {
    :root {
        --box-width: 300px;
    }
    body {
        border-width: 1em;
    }
    .section-portal {
        flex-flow: column nowrap;
        align-items: center;
    }
    .section-portal .flex-col {
        padding-bottom: 1em;
        margin-bottom: 2em;
        border-bottom: 2px solid grey;
    }
}