body, html {
    background-color: #282828; 
    color: lightgray;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 100vh;
    width: 100vw;
}

.grid-item {
    color: white;
    /* border: 1px solid #333; */
    display: flex;
    font-size: 1.5em;
}

.container-fluid {
    overflow: hidden;
}

.background-splash img {
    height: 50%;
    position: absolute;
    top: 12vh;
    left: 12vw;
    z-index: 0;
}

.background-chain img {
    height: 50%;
    position: absolute;
    top: -1vh;
    left: -5vw;
    z-index: 0;
}

.background-scribble1 img {
    height: 50%;
    position: absolute;
    top: 10vh;
    left: 15vw;
    z-index: 0;
}

.background-scribble2 img {
    height: 34%;
    position: absolute;
    top: 30vh;
    right: 0;
    z-index: 0;
}

.background-scribble3 img {
    height: 30%;
    position: absolute;
    top: -4vh;
    left: 40vw;
    z-index: 0;
}

.background-scribblex img {
    height: 14%;
    position: absolute;
    top: 3vh;
    right: 6vw;
    z-index: 0;
}

.background-chain2 img {
    height: 30%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
}

@keyframes sway {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(-10px) rotate(-10deg);
    }
}

@keyframes bobbing {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.grid-item-paul img:first-child {
    height: 42%;
    float: left;
    margin-right: -6%;
    z-index: 2;
    position: relative;
    top: 40%;
    animation: sway 3s infinite;
}

.grid-item-paul img:last-child {
    margin-top: 10%;
    height: 50%;
    z-index: 1;
}

.grid-item-text img {
    position: relative;
    height: 65%;
    right: 15%;
    margin-top: 10%;
    z-index: 1;
    animation: bobbing 3s infinite;
}

@media (max-width: 900px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: 3fr;
    }
    .grid-item-text {
        height: 50vh;
        order: 1;
    }
    .grid-item-none {
        order: 2;
    }
    .grid-item-paul {
        height: 50vh;
        order: 3;
    }
    .grid-item-text img {
        width: 100vw;
        right: 0%;
    }
    .grid-item-paul {
        width: 100vw;
    }

    .grid-item-paul img{
        position: relative;
        left: 10%;
    }
    .background-splash img {
        height: 40%;
        top: 50%;
    }
}