:root {
    --box-size: 300px;
    --box-margin: 20px;
    --box-padding: 1em;
    --box-size-shrink-factor: 0.8;
    --box-size-shrink-factor-xs: 0.5;
    --color-box: #b7b5b5;
    --color-box-dark-mode: #494949;
}

.container {
    display: flex;
    justify-content: center;
}

.box {
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    width: var(--box-size);
    height: var(--box-size);
    margin: var(--box-margin);
    padding: var(--box-padding);
    background-color: var(--color-box);
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}

.box:hover {
    transform: scale(1.05);
}

.box h2 {
    margin: 0 0 1rem 0;
}

.box h3 {
    margin: 1rem 0 0 0;
    font-size: 2.5rem;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

@media (max-width: 1120px) {
    .container {
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: calc(var(--box-size) * var(--box-size-shrink-factor));
        height: calc(var(--box-size) * var(--box-size-shrink-factor));
        margin: calc(var(--box-margin) * var(--box-size-shrink-factor));
        padding: calc(var(--box-padding) * var(--box-size-shrink-factor));
    }
}

@media (max-width: 768px) {
    .box {
        width: calc(var(--box-size) * var(--box-size-shrink-factor-xs));
        height: calc(var(--box-size) * var(--box-size-shrink-factor-xs));
        margin: calc(var(--box-margin) * var(--box-size-shrink-factor-xs));
        padding: calc(var(--box-padding) * var(--box-size-shrink-factor-xs));
    }
    h2 {
        font-size: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        --color-box: var(--color-box-dark-mode);
    }
}