@font-face {
    font-family: CurlyQs;
    src: url("media/fonts/CurlyQs-1.ttf");
}

body {
    background-image: url("media/images/bg3.gif");
    background-size: repeat;
    background-attachment: fixed;
    background-position: center;
}

h1 {
    font-family: CurlyQs, sans-serif;

    text-align: center;
    font-size: 5rem;
    
}
.homeDiv  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   
}

.songsDiv {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
    align-items:center;
    justify-content: center;
    padding-bottom: 2rem;
    width:100%;
}

.main {
    border: 2.5rem solid transparent;
    border-image: url('media/images/border3.png') 34 round;
    background-clip: padding-box;
    background-color: aliceblue;

  filter: drop-shadow(1rem 1rem 2px rgba(0, 0, 0, 0.7));
    margin: 5rem auto;
    width: 60rem;
    padding: 3rem;
}

.songsButton {
    border: 12px solid transparent;
    padding: 10px;
    border-image: url('media/images/border4.png') 11 round;
    overflow: auto;
    margin: 5px;
    background-color:rgba(0, 0, 0, 0.0);

    width: 30%;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: CurlyQs, sans-serif;
    font-size: 1.5rem;
    text-align: center;
    transition: filter 0.3s ease;

}
.songsButton:hover {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    cursor: pointer;
}