body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif;
    min-height: 100vh;
    background-color: #FFC2D1;
    border: 20px double #FFA2B9;
    overflow: scroll;
    scrollbar-width: none;
    color:rgb(0, 0, 0);
}


#header{
    grid-area: header;
    justify-self: center;
    width:40%;
    min-height: 3em;
    padding:1em;
}
.nav{
    display: flex;
    justify-content: center;
    justify-items: center;
    color: rgb(0, 0, 0);
}
a{
    margin: 1em;
    color: rgb(0, 47, 255);
}

p{
    margin-top:1em;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 0;
}


/* major layout */
#main_grid{
    display: grid;
    height: 200vh;
    height:auto;
    grid-template-areas: 
    'header header header header header header'
    'padding padding title1 title1 padding2 padding2'
    'featured featured featured featured featured featured'
    'padding3 padding3 title2 title2 padding4 padding4'
    'list list list list list list'
    'footer footer footer footer footer footer';
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   
}
/* Headings */
.title{
    grid-area: title1;
    min-height: 2em;
    font-family: 'Courier New', Courier, monospace;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    padding-top:1em;
}

.title2{
    grid-area: title2;
    min-height: 1em;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    padding:1em;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}
/* Elements of featured section */
#featured{
    height:auto;
    grid-area: featured; 
    display: flex; 
    flex-direction: column;
    align-items: center;

}




/* Elements for most of songs */
#playlist{
    grid-area: list;
    display: grid;
    height: auto;
    justify-self: center;
    width: 80vw;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
    gap: 1em 1em;
}
.column_right{
    width:100%;
    grid-column: 2/3;
}
.column_left{
    width:100%;
    grid-column:1/2;

}

/* Flippable mini cards */
.card-container{
    display: inline-block;
    overflow: clip;
    height:fit-content;
}

.card{
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    color:black;
    /* perspective: 1000px; */
    background-color: transparent;
    position: relative;
    aspect-ratio: 5/7;
    width:100%;
    transform-style: preserve-3d;
    transition: transform 0.4s;
}



.card-container:hover .card{
    transform:rotateY(180deg);
}

.card-front,.card-back {
    box-sizing: border-box;
    position: absolute;
    width:100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 5%;

}

.card-front{
    box-sizing: border-box;
    padding: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #FAE8ED;
    border: 5px double #FFA2B9;

}
.card-front img{
    width: 8vw;
    box-shadow: 3px 3px;
    border-radius: 5%;
    
    margin: 0;
}
.card-front h2{

    margin:0;
    margin-top:5%;
    font-size: medium;
    
}
.card-front p{
    margin:0; 

}

.card-back{
    display: flex;
    flex-direction: column;
    padding:10%;
    background-color: #FAE8ED;
    transform: rotateY(180deg);
    border: 5px double #FFA2B9;
}

.card-back p {
    font-size:small;
}

#list{
    box-sizing: border-box;
    grid-area: list;
}

#title{
    box-sizing: border-box;
    grid-area: title;
}

.vertical_container{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.horizontal_container{
    box-sizing: border-box;
    display: flex;
    width:60%;
    justify-content: flex-start;
    margin:2em;
}

.horizontal_container img{
    justify-self: end;
    margin: 2em;
    height: 300px;
}

ul{
    font-size: large;
}