/* open-sans-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('open-sans-v34-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

* {
    box-sizing: border-box;
}

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

body {
    background-color: #f4f4f4;
    font-family: 'Open Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 0 0.25rem #cccccc;
    color: #d41367;
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    padding: 1.75rem 1rem 1.5rem;
}

footer {
    background-color: #657f99;
    color: #ffffff;
    font-size: .9rem;
    margin-top: 2rem;
    padding: 2rem;
    text-align: center;
}

header svg {
    fill: #d41367;
}

header .logo-text {
    padding-bottom: 4px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 1rem;
}

.col {
    flex: 1 0 calc((100% - 2rem) / 3);
    max-width: calc((100% - 2rem) / 3);
}

.container.container-lg .col {
    flex: 1 0 calc((100% - 1rem) / 2);
    max-width: calc((100% - 1rem) / 2);
}

.box {
    align-items: center;
    aspect-ratio: 1/1;
    background-color: #ffffff;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.25rem #cccccc;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 0.5rem;
    position: relative;
    text-align: center;
    transition: all 0.6s;
    width: 100%;
}

.box:not(.header):hover {
    box-shadow: 0 0 0.5rem #b1b1b1;
    color: #d41367;
    transform: scale(1.05) rotate(-2deg);
    z-index: 10;
}

.box svg {
    fill: #657f99;
    margin-bottom: 0.5rem;
}

.box.header {
    background-color: #d41367 !important;
    color: #ffffff;
}

.box.header.rotary {
    background-color: #0067c8 !important;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #ffffff;
    }
    header, footer, .box {
        background-color: #111111;
        box-shadow: 0 0 0.25rem #333333;
        color: #ffffff;
    }
    header svg {
        fill: #ffffff;
    }
}

@media (min-width: 576px) {
    .box.header {
        font-size: 1.25rem;
    }

    .col {
        flex: 1 0 calc((100% - 3rem) / 4);
        max-width: calc((100% - 3rem) / 4);
    }

    .container.container-lg .col {
        flex: 1 0 calc((100% - 2rem) / 3);
        max-width: calc((100% - 2rem) / 3);
    }
}

@media (min-width: 768px) {
    .container {
        justify-content: start;
    }

    .col {
        flex: 1 0 calc((100% - 4rem) / 5);
        max-width: calc((100% - 4rem) / 5);
    }

    .container.container-lg .col {
        flex: 1 0 calc((100% - 3rem) / 4);
        max-width: calc((100% - 3rem) / 4);
    }
}

@media (min-width: 992px) {
    .col {
        flex: 1 0 calc((100% - 5rem) / 6);
        max-width: calc((100% - 5rem) / 6);
    }
}

@media (min-width: 1200px) {
    .col {
        flex: 1 0 calc((100% - 6rem) / 7);
        max-width: calc((100% - 6rem) / 7);
    }

    .container.container-lg .col {
        flex: 1 0 calc((100% - 6rem) / 7);
        max-width: calc((100% - 6rem) / 7);
    }
}

@media (min-width: 1400px) {
    .col {
        flex: 1 0 calc((100% - 8rem) / 9);
        max-width: calc((100% - 8rem) / 9);
    }
}