@import "../animations.css";

.titlepfp:hover {
    animation-name: StretchYAnim;
    animation-duration: 2s;
    animation-timing-function: ease-out;
}

.musics {
    display: flex;
    flex-wrap: warp;
    
    gap: 5%;
}

.music {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1;
    justify-content: space-evenly;

    padding: 5px;
    gap: 10px;

    border: 2px solid #ccc;
    border-color: lightcoral;
}

.music_item {
    padding-left: 10px;
    padding-right: 10px;
    
    align-items: center;
    width: 25%;

    background-color: lightyellow;

    text-align: center;

    border: 1px solid #ccc;
    border-width: 0.01vw; 
    border-color: darkslateblue;
}

.music_item > a > img {
    border-width: 6px;
    border: 2px solid black;
}

.music_item:hover {
    transform: scale(1.1, 1.1);
    border: 1px dashed black;
}