/* styles.css */

.wrapper {
  /* background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)), url('images/backgrounddude.jpg'); */
  position: relative;
}

body {
    width: 97vw;
    height: 97vh
}

.content {
    z-index: 1;
    max-width: 70%;
}

.background-container {
    background-image:  url('../images/backgrounddudeinvert.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 97vw;
    height: 97vh;
    overflow: hidden;
}
 
.background-image {
    position: absolute;
    width: 90px;
    height: 90px;
    animation: randomMovement infinite;
    /* z-index: 1; */
}
 
@keyframes randomMovement {
    0% {
        left: 0%;
        top: 0%;
        opacity: 0.5;
        transform: scale(.3);
    }
    10% {
        left: 80%;
        top: 20%;
        opacity: 0.6;
        transform: scale(0.8);
    }
    20% {
        left: 20%;
        top: 80%;
        opacity: 0.9;
        transform: scale(0.9);    
    }
    30% {
        left: 85%;
        top: 85%;
        opacity: 1;
        transform: scale(1.0); 
    }
    40% {
        left: 10%;
        top: 10%;
        opacity: 1;
        transform: scale(2.5); 
    }
    50% {
        left: 40%;
        top: 80%;
        opacity: 1;
        transform: scale(2); 
        transform: rotateY(180deg);
    }
    60% {
        left: 85%;
        top: 40%;
        opacity:1;
        transform: scale(1.75); 
        transform: rotateX(180deg);
    }
    70% {
        left: 10%;
        top: 85%;
        opacity: 0.8;
        transform: scale(1.5); 
    }
    80% {
        left: 80%;
        top: 10%;
        opacity: 0.7;
        transform: scale(.8); 
        transform: rotateZ(180deg);
    }
    90% {
        left: 40%;
        top: 20%;
        opacity: 0.6;
        transform: scale(.4); 
    }
    100% {
        left: 100%;
        top: 0%;
        opacity: 0.5;
        transform: scale(0.1);
    }
}
/* Add different durations to each image for randomness */
/* Maude */
.background-image:nth-child(1) {
    animation-duration: 15s;
    z-index: 10;
}
/* Dude */
.background-image:nth-child(2) {
    animation-duration: 25s;
    z-index: 9;

}
/* Bunny */
.background-image:nth-child(3) {
    animation-duration: 30s;
    z-index: 8;

}
/* Donny */
.background-image:nth-child(4) {
    animation-duration: 65s;
    z-index: 7;

}
/* Walter */
.background-image:nth-child(5) {
    animation-duration: 95s;
    z-index: 6;

}
/* Stranger */
.background-image:nth-child(6) {
    animation-duration: 350s;
    z-index: 5;
}


/* ################ nihilist-container ######################################################## */

.nihilist-container {
    position: absolute;
    width: 96vw;
    height: 96vh;
    overflow: hidden;
    
}


.nihilist-image {
    position: absolute;
    width: 90px;
    height: 90px;
    animation: nihilist infinite;
    z-index: 1;
}

@keyframes nihilist {
    0% {
        left: 0%;
        top: 0%;
        opacity: 0.5;
        transform: scale(.1);
    }
    10% {
        left:95%;
        top: 55%;
        opacity: 0.6;
        transform: scale(0.8);
    }
    20% {
        left: 55%;
        top: 92%;
        opacity: 0.9;
        transform: scale(0.9);
        transform: rotateZ(195deg);     
    }
    30% {
        left: 45%;
        top: 85%;
        opacity: 1;
        transform: scale(1.0);
        transform: rotateZ(-170deg);
        
    }
    40% {
        left: 0%;
        top: 55%;
        opacity: 1;
        transform: scale(1.5); 
    }
    50% {
        left: 95%;
        top: 30%;
        opacity: 1;
        transform: scale(1.8);
        transform: rotateZ(-270deg); 

    }
    60% {
        left: 45%;
        top: 0%;
        opacity:1;
        transform: scale(2.0); 
        transform: rotateZ(-70deg);

    }
    70% {
        left:0%;
        top: 45%;
        opacity: 0.8;
        transform: scale(1.5); 
    }
    80% {
        left: 60%;
        top: 89%;
        opacity: 0.7;
        transform: scale(1.5); 
        transform: rotateZ(-270deg);

    }
    90% {
        left: 89%;
        top: 50%;
        opacity: 0.6;
        transform: scale(1); 
        transform: rotateZ(360deg);
    }
    100% {
        left: 0%;
        top: 0%;
        opacity: 0.5;
        transform: scale(0.1);
        /* transform: rotateZ(-360deg); */
    }
}

.nihilist-image:nth-child(1) {
    animation-duration: 45s;
    animation-delay: 0s;
}

/* ################ brandt-container ######################################################## */

.brandt-container {
    position: absolute;
    width: 97vw;
    height: 97vh;
    overflow: hidden;
    
}

.brandt-image {
    position: absolute;
    width: 90px;
    height: 90px;
    animation: brandt infinite;
    z-index: 9;
}

@keyframes brandt {
    0% {
        left: -30%;
        top: 25%;
    }
    15% {
        left:130%;
        top: 25%;
    }
    50% {
        left: 130%;
        top: 55%;
    }
    100% {
        left: -30%;
        top: 55%;
    }

}

.brandt-image:nth-child(1) {
    animation-duration: 75s;
    animation-delay: 0s;
}

/* ################ landlord-container ######################################################## */

.landlord-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    
}

.landlord-image {
    position: absolute;
    width: 90px;
    height: 90px;
    animation: landlord infinite;
    z-index: 11;
}

@keyframes landlord {
    0% {
        left: 30%;
        top: 130%;
        transform: scale(.5);
    }
    20% {
        left: 30%;
        top: 130%;
        transform: scale(.5);
    }
    30% {
        left:30%;
        top: 15%;
        transform: scale(3);
    }
    35% {
        left: 30%;
        top: 35%;
        transform: scale(.4);
    }
    100% {
        left: 30%;
        top:130%;
        transform: scale(.5);
    }

}

.landlord-image:nth-child(1) {
    animation-duration: 35s;
}

/* ################ brandt-container ######################################################## */

.toe-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    
}

.toe-image {
    position: absolute;
    width: 90px;
    height: 90px;
    animation: toe infinite;
    z-index: 13;
}

@keyframes toe {
    0% {
        top: -130%;
        left: 75%;
    }

    20% {
        top: -5%;
        left: 75%;
        transform: rotateX(1500deg);
    }

    20% {
        top: 110%;
        left: 75%;
    }

    100% {
        top: 999%;
        left: 75%;
    }

}

.toe-image:nth-child(1) {
    animation-duration: 35s;
}




/* ################ thejesus-container ######################################################## */

.thejesus-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 11;
}

.thejesus-image {
    position: absolute;
    width: 90px;
    height: 90px;
    animation: thejesus infinite;
    z-index: 11;
}

@keyframes thejesus {
    0% {
        top: 230%;
        left: 60%;
    }

    20% {
        top: 100%;
        left: 60%;
        transform: scale(2) rotateY(2000deg);
    }

    30% {
        top: 20%;
        left: 60%;
        transform: scale(0.3) rotateY(-720deg);
    }

    50% {
        top: 110%;
        left: 60%;
        transform: scale(3);

    }

    100% {
        top: 999%;
        left: 60%;
    }
}

.thejesus-image:nth-child(1) {
    animation-duration: 20s;
    z-index: 11;
}



/* @media  750px   @media  750px   @media  750px   @media  750px   @media  750px    */

@media (max-width: 750px) {
    .toe-image, .landlord-image, .brandt-image, .nihilist-image, .background-image .thejesus-image {
        width: 60px;
        height: 60px;
}

    .toe-container, .landlord-container, .brandt-container, .nihilist-container, .background-container .thejesus-container {
        width: 97vw;
        height: 97vh;
}

.content {
    font-size: .05rem;
}
}