/*
This is how you comment in css
*/
/*
Adding a single font to the whole page
*/
body {
    background-color: #f5f5dc;
}
* {
    font-family: "Playfair Display";
}
/*
Center top images and make them look nice with borders and spacing
*/
.top-images {
    display: flex;
    gap: 0;
    margin: 1em;
    padding: 1em;
    justify-content: center;
}
.img-wrapper {
    width: 20%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border: 0.5em solid #9a4fa1;
    box-sizing: border-box;
}
.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 
headline modifications 
*/
.headline {
    color:purple;
    text-align:center;
    margin-top: 0em;
    font-size: 2.9em;
    margin-bottom: 0.26em;

}
/* 
subhead modifications 
*/
.subhead {
    text-align: center;
    background-color: #9a4fa1;
    margin-bottom: 2em;
    margin-top: -1em;
    margin-right: 43%;
    margin-left: 43%;
    padding: 0.27em;
}
/* 
edits to about-song 
*/
.about-song {
    max-width: 65rem;
    margin: 2em auto;
    padding: 0 2rem;
    font-size: 1.27em;
}
.about-title {
    text-align: left;
    color: #9a4fa1;
    font-size: 1.5em;
    margin-bottom: 0.5em;
}
/* 
Key info
*/
.key-info {
    max-width: 30em;
    font-size: 1.1em;
    margin: 0em auto;
    padding-top: 0.9em;
    text-align: left;
}
/* 
left and right images beside parchment paper border/background 
*/
.image-frame {
    display: grid;
    grid-template-columns: auto 700px auto;
    column-gap: 2em;
    justify-content: center;
    align-items: start;
/* 
side columns 
*/
}
.side-column {
    display: flex;
    flex-direction: column;
    gap: 0.27em;
    margin: 10em;
}
/* 
images inisde of columns
*/
.side-column img {
    width: 200px;
    height: 275px;
    object-fit: cover;
    box-shadow: 0 0 12px rgba(154, 79, 161, 0.5);
}
/* parchment paper and lyrics */
.Lyrics {
    max-width: 700px;
    margin: 0 3em;
    padding: 7em;
    background-image: url('Images/golden frame parchment.png');
    background-repeat: no-repeat;
    background-size: 115% 115%;
    background-position: center;
    margin-top: 12em;
}
.lyrics-content {
    text-align: center;
}
/* 
stylizing song structure titles 
*/
.structure {
    text-align: center;
    color: black;
    font-size: 1.5em;
}
/* 
Applying text changes to 'Actual-Lyric' class 
*/
.Actual-Lyrics{
    font-size: 1.1em;
    text-align:center;
    color: purple;
}
/* 
modifying youtube embed 
*/
.youtube-video {
    display: flex;
    justify-content: center;
    background-color: #9a4fa1;
    margin-right: 30%;
    margin-left: 30%;
    padding-top: 4%;
}
footer {
    margin-bottom: -2em;
}