@import url('https://fonts.cdnfonts.com/css/smothy-bubble');

body {
    width: 100%;
    height: 140vh;
    background-image: url("Pink\ Pattern\ Background.jpg");
    background-size: 40%;
}

.wrapper {
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background-color: coral;
    width: 50%;
    height: 85%;
    border-style: ridge;
    border-color: saddlebrown;
    border-width: 10px;
    box-shadow: 10px 10px;
    padding : 0;
    margin : 0;
    position : relative;
    display : flex;
   flex-direction: column;

}

.container h2{
    font-family: 'Smothy Bubble', sans-serif;
    font-size : 4em;
    letter-spacing: 2px;
    color : #AF4D98;
    text-align : center;
    padding : 0px;
    margin : 10px;
    height : 10%;
    width : 100%; 
    font-style : bold;
    animation : funky 1s linear infinite;
    animation-direction: alternate;
    text-shadow: 2px 2px 5px lightblue;
    width : 100%;
    flex-shrink: 0;
   

}

@keyframes funky {
    from{
        transform : scale(1);
    }
    to{
        transform : scale(1.1);
    }
}
 
.container img{
    padding : 20px;
    animation : hehe 1s ease-in;
    animation-iteration-count: 1;
    height : 250px;
    width : 250px;
}

.container img:hover{
    transform: scale(1.1);
    transition : transform 0.2s ease;
}
@keyframes hehe {
    from{
        transform : rotate(360deg);
    }

    to { 
        transform: rotate(0);
    }
}

.music-player{
    height : 250px;
    width : 500px;
    background-color : transparent;
    display : flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.container-2{
    display : flex;
    align-items : center;
    justify-content: space-evenly;
}

.player {
    transform: translateY(15%);
    width : 100%;
}

.music-player img{
    padding : 0;
    object-fit: contain;
    height : 75%;
    width : 80%;
    transform : translateX(50px)
}

.left-shit{
    width : 50%;
    padding : 10px;
    
}

.restofit{
    display : flex;
    justify-content: space-evenly;

}