@charset "UTF-8";

body{
   /* background-image: url("../../content/istockphoto-121268955-2048x2048.jpg"); */
   background-image: url("../../content/giphy.gif");
   background-size: cover; /* Makes it fit */
   background-repeat:repeat-y; /* No ugly repeats */
   background-position: center center; /* Centers it */
   background-color: black; 
}




#rgbtop{
    width: 100%; height: 20px; position: absolute; left: 0; top: 0;
}
#rgbright{
    width: 20px; height: 78em; position: absolute; right: 0;
}

#rgbleft{
    width: 20px; height: 78em; position: absolute; left: 0;
}

#rgbbottom{
    width: 100%; height: 20px; position: fixed; bottom: 0;
}




#rgbcirles{
    width:100%; height: 300px; display: block; margin: 0 auto;
}


#bg{
    margin: 50px auto;  /* Auto left & right = CENTERED */
    display: block;
    width: 500px;
    height: 500px;
    padding: 20px;
    background: rgb(220, 220, 255); /* Box color */
    opacity: 0.9;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-style: italic;
    color: rgb(36, 112, 188);
    box-shadow: 5px 5px 15px rgba(235, 55, 202, 0.8);
}




#butterfly1{
    width: 100px; height: 300px; position: absolute; left: 2%;
}

#butterfly2{
    width: 100px; height: 300px; position: absolute; left: 17%;
}

#butterfly3{
    width: 100px; height: 300px; position: absolute; left: 32%;
}

#butterfly4{
    width: 100px; height: 300px; position: absolute; right: 2%;
}

#butterfly5{
    width: 100px; height: 300px; position: absolute; right: 17%;
}

#butterfly6{
    width: 100px; height: 300px; position: absolute; right: 32%;
}



#jumping-gatito{
    position: absolute; left: 43%; width: 200px; height: 400px; top: 2%;
}

#sparkles{
    width: 200px; height: auto; position: absolute; right: 25%; top: 25%;
}


#eyeliner{
    width: 40%;
}

#trippy{
    width: 100%; height: 70px; top: 106%; position: absolute;
}

#wow{
    position: absolute;
    right: 5%;
    width: 200px; height: 500px;
}

#iloveunits{
    position: absolute;
    top: 50%;
    right: 12%;
    width: 400px; height: 400px;
    z-index: 2;
}

#uiiai{
    position: absolute;
    top: 50%;
    left: 10%;
    width: 150px; height: 500px;
}

.image-display img {
    display: none;
}

/* Show the selected image based on radio input */
#img1:checked ~ .image-display .image1 {
    display: block;
}

#img2:checked ~ .image-display .image2 {
    display: block;
}

#img3:checked ~ .image-display .image3 {
    display: block;
}

/* Optionally, you can hide the buttons too */
button {
    display: none;  /* Hide the buttons as well */
}

/* Style the buttons */
button {
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}

.image1{
    width: 200px; height: 300px; margin: auto;
}

.image2{
    width: 200px; height: 300px; margin: auto;
}

.image3{
    width: 200px; height: 300px; margin: auto;
}