.fjord-sea {
    position: absolute;
    left: -100px;
    right: -100px;
    bottom: 0;
    height: 300px;

    background-image: url("../Art/Sea.png");
}

.fjord-sea-1 {
    z-index: -3;

    animation-name: waves-1;
}

.fjord-sea-2 {
    z-index: -1;
    bottom: -100px;

    filter: brightness(10);

    animation-name: waves-2;
}

@keyframes waves-1 {
    0% {
        transform: rotate(2deg);
    }
    25% {
        transform: rotate(-2deg);
    }
    50% {
        transform: rotate(2deg);
    }
    75% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(2deg);
    }
}

@keyframes waves-1 {
    0% {
        transform: rotate(-2deg);
    }
    25% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    75% {
        transform: rotate(2deg);
    }
    100% {
        transform: rotate(-2deg);
    }
}

.game-box {
    --color-1: red;
    border-color: var(--color-1);
    position: relative;
    overflow: hidden;
}

.game-box a {
    border-color: var(--color-1);
    text-decoration-color: var(--color-1);
}
.game-box h2,
.game-tagline {
    color: var(--color-1);
}
.game-box h1 {
    color: black;
}

.game-box .color {
    background-color: var(--color-1);
    position: absolute;
    left: -200px;
    right: 60%;
    top: -200px;
    bottom: -200px;

    transform: rotate(10deg);
}

#calamity-clash-bg .game-box {
    --color-1: #FF6D4F;
}
#whirlwarp-bg .game-box {
    --color-1: #68dad4;
}
#fjord-fury-bg .game-box {
    --color-1: #844fff;
}
#wilderfeast-bg .game-box {
    --color-1: #e0cea8;
}