:root {
    --background-gradient: linear-gradient(#000, #323232);
    --text-color: #f0f0f0;
    --border-color: #00FFF1;
}

body {
    background: var(--background-gradient);
    background-size: cover;
    text-align: center;
    color: var(--text-color);
}

.not-white {
    color: var(--border-color)
}

a {
    color: var(--border-color)
}

.logo {
    animation: wobble 1s ease-in-out infinite alternate
}

@media (max-width: 600px) {
    a {
        color: white !important;
    }
}

@keyframes wobble {
    0% {
        transform: rotate(-20deg);
    }

    100% {
        transform: rotate(20deg);
    }
}

.image-grid {
    display: grid;
    grid-template-areas:
        "a c"
        "b b";
    gap: 10px;
}

.grid-image {
    padding: 20px;
    overflow: hidden;
    max-height: 256px;
}

header,
footer,
.not-white {
    border: solid 4px;
    border-color: var(--border-color);
    border-radius: 12px;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 24 0 24 0;
}