html{
    background-color: black;
    overflow: hidden;
}

.spotify{
    display: flex;
    justify-content: center;
}

.spt{
    margin-top: 20vh;
}

.rotate {
    transform: rotate(360deg);
  }


img{
    height: 30vh;
    width: auto;
    position: absolute;
    animation: rotateImages 10s infinite linear;
}
@keyframes rotateImages {
    0% {
        transform: rotate(0deg); /* Start from 0 degrees */
    }
    100% {
        transform: rotate(360deg); /* Rotate 360 degrees */
    }
}

    .one{
        top: 8vh;
        left: 8vw;
    }
    img:hover{
        cursor: pointer;
    }
    .two{
        top: 12vh;
        left: 72vw;
    }
    .three{
        top: 60vh;
        left: 80vw;
    }
    .four{
        top: 60vh;
        left: 5vw;
    }
    .five{
        top: 65vh;
        left: 50vw;
    }

/* javascript  */

.textone{
    background-color: rgb(247, 237, 222);
    height: 70px;
    width: 20vw;
    position: absolute;
    top: 5vh;
    left: 30vw;
    border-radius: 20px;
    opacity: 0;
}

.textshow{
    opacity: 1;
}

p{
    font-size: 1em;
    color: black;
    font-family: 'Courier New', Courier, monospace;
    text-align:justify;
    margin: 20px;
}

.texttwo{
    background-color: rgb(247, 237, 222);
    height: 85px;
    width: 15vw;
    position: absolute;
    top: 45vh;
    left: 80vw;
    border-radius: 20px;
    opacity: 0;
}

.texttwoshow{
    opacity: 1;
}


.textthree{
    background-color: rgb(247, 237, 222);
    height: 80px;
    width: 16vw;
    position: absolute;
    top: 45vh;
    left: 5vw;
    border-radius: 20px;
    opacity: 0;
}

.textthreeshow{
    opacity: 1;
}

.textfour{
    background-color: rgb(247, 237, 222);
    height: 49px;
    width: 12vw;
    position: absolute;
    top: 82vh;
    left: 25vw;
    border-radius: 20px;
    opacity: 0;
}

.textfourshow{
    opacity: 1;
}

.textfive{
    background-color: rgb(247, 237, 222);
    height: 49px;
    width: 18vw;
    position: absolute;
    top: 3vh;
    left: 80vw;
    border-radius: 20px;
    opacity: 0;
}

.textfiveshow{
    opacity: 1;
}


/* footer */

.footer{
    left: 0;
    position: relative;
    margin-left: .5em;
    margin-right: .5em;
    margin-top: 10vh;
    margin-bottom: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 3;
    width: 95vw;
    
}