@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap');

:root{
    --blue: rgba(146, 189, 232, 0.995);
}

 *{
     padding: 0;
    margin: 0;
    font-family: "Gamja Flower", sans-serif;
    color: black;
    cursor: default;
    cursor: url(https://cur.cursors-4u.net/others/oth-6/oth502.ani), url(https://cur.cursors-4u.net/others/oth-6/oth502.png), auto !important;
 }
 #playlist{
    width: 900px;
    position: relative;
    background-color: rgb(255, 255, 255);
    background-image: url("../img/blue.jpg");
    padding: 0;
}

 #playlist div{
      padding: 0px;
}

.list, .text, .img, .link{

   background-color: white;
   box-shadow: 2px 1px 7px 0px #00000024;
    
}

 .text:before, .img:before, .link:before{
    background-color: rgba(197, 192, 161, 0.842);
    display: block;
    position: absolute;
    top: -15px;
    left: -45px;
    z-index: 9;
    rotate: -20deg;
    width: 100px;
    height: 25px;
    content: " ";
    box-shadow: 2px 1px 7px 0px #00000024;
}

.list::before{
     background-color: rgba(197, 192, 161, 0.842);
    display: block;
    position: absolute;
    top: -15px;
    left: 30%;
    z-index: 9;
    width: 120px;
    height: 25px;
    content: " ";
    box-shadow: 2px 1px 7px 0px #00000024;
}
 .img::after, .link::after{
    background-color: rgba(197, 192, 161, 0.842);
    display: block;
    position: absolute;
    bottom: -15px;
    right: -45px;
    z-index: 9;
    rotate: -20deg;
    width: 100px;
    height: 25px;
    content: " ";
    box-shadow: 2px 1px 7px 0px #00000024;
}

 #playlist div.inside{
    border: none;
    padding: 15px;
}

.list{
    width: 400px;
    min-height: 200px;
    position: absolute;
    top: 30px;
    left: 40px;
    padding: 20px;

}

.list .inside img{
    position: relative;
    left: 75%;
    width: 80px;
}

.list button{
    color: rgb(154, 212, 253);
    background: none;
    border: none;
    font-size: 2em;
    display: block;
}

.list button:hover{
    text-decoration: underline;
}

.text{
    display: none;
    width: 800px;
    height: 500px;
    font-size: 1.2em;
    position: absolute;
    top: 20px;
    left: 60%;
    padding: 20px;
    text-align: justify;
}

.text .inside p{
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 20px;
}


.text ol{
    list-style: decimal inside;
    font-size: 1.3em;
}

::marker{
    color: var(--blue);
}

.img{
    display: none;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 450px;
    left: 1200px;
    rotate: 5deg;
    border: 10px solid white;
    
}

.img img{
    width: 100%;
    height: 100%;
   
}

.link{
    display: none;
    width: 420px;
    height: 300px;
    position: absolute;
    top: 390px;
    left: 65px;
    padding: 15px;
    rotate: -5deg;
    border: 5px solid white;
}

.link iframe{
    position: relative;

}