* {
   margin: 0;
}
body {
    background-color: black;
    transition: background 0.8s ease;
}

/* Centering the albums */
.flex-box{
    margin: auto;
    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    gap: 20px;
}
/* Submarine */
.music-player {
    background: linear-gradient(145deg, #080B10 20%, #0D2C54 100%);
    width: 700px;
    height: 650px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
    flex-wrap: wrap;

    border-radius: 20px;
}
.Submarine-img {
    display: flex;
    text-align: center;
    height: 200px;
    width: 200px;
    border-radius: 20px;
    box-shadow: rgb(112, 145, 255) 5px 5px 5px;
    margin-bottom: 2em;

}

/* CINEMA */
.music-player2 {
    background: radial-gradient(circle, #892B30 0%, #111111 80%);
    width: 700px;
    height: 650px;

    border-radius: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
    
}


.CINEMA-img {
    display: flex;
    text-align: center;
    height: 200px;
    width: 200px;

    border-radius: 30%;
    border:#892b30 solid 5px;
    box-shadow: #d96352 3px 5px 5px 5px;

    margin-bottom: 2em;


}

/* General CSS styling */
.playlist, .playlist2{
    text-align: right;
    transform: translateY(-120px);
}
ol {
    display: inline-block;
    text-align: center;
}
hr {
    display: inline-block;
    border: none;
    height: 5px;
    background-color: black;
    width: 200px;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 15px;
}
h3 {
    font-size: 200%;
}
/* testing new has() selection */
body:has(.music-player:hover) {
    background: linear-gradient(145deg, #080B10 20%, #0D2C54 100%);
}

body:has(.music-player2:hover) {
    background: radial-gradient(circle, #892B30 0%, #111111 80%);
}