html{
    font-family: "Comic Sans MS", "Comic Sans";
    background-image: url(Images/pinkBackground.jpg)
}
.Grid{
    width: 100%;
    display: grid;
    grid-template-areas: "left main";
    grid-template-columns: 200px auto;
}
.Header
{
    display: block;
    justify-content: center;
    align-content: center;
    background-color: #c6f5ff;
    margin: auto;
    border-radius: 30px;
    padding:20px;
    border-color: #70d6e9;
    border-style: solid;
    border-width: thick;
    margin-bottom: 15px;
}
.Header ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.Header li
{
    display: inline-block;
    margin-right: 10px;
}
.Header h1,h2
{
    text-align-last: center;
    margin: auto;
}
.SplitMid {
    display: flex;
    height: fit-content;
}
.SplitMid p{
    margin:5px;
    font-size: 1rem;
    height: fit-content;
}
.BlogPost
{
    display:grid;
    grid-template-areas: "img title date";
    grid-auto-columns: 25vw;
    background-color: wheat;
    border: solid;
    border-width: thick;
    border-radius: 30px;
    border-color: #b1986a;
    padding: 15px;
}
.BlogPost img
{
    grid-area: img;
    width: 25%;
}
.BlogPost h2
{
    grid-area: title;

}
.BlogPost h3
{
    grid-area: date;
    width: 50%;
}
#musicPlayer
{
    height: fit-content;
}
#ContainerLeft
{
    border-radius: 30px;
    grid-area: left;
    margin-left: 2vw;
    max-width: 60vw;
    min-width: 15vw;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    background-image: url(Images/blueBackground.jpg);
    outline: solid;
    outline-color: black;
    outline-width:thick;
}
#ContainerLeft img
{
    border-radius: 30px;
    border-color: #70d6e9;
    border-style: solid;
    border-width: thick;
    margin: auto;
    margin-top: 30px;
    max-width: 100%;
}
#LeftList 
{
    border-radius: 20px;
    padding: 15px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: wheat;
    text-indent: 1.5rem;
    border-width: thick;
    border-color: #b1986a;
    border-style: solid;
    
    height: fit-content;
    
    text-align: center;
    
    justify-content: center;
    align-content: center;
    
}
#LeftList li
{
    font-size: larger;
}

#ContainerMid
{
    border-radius: 30px;
    grid-area: main;
    margin: auto;
    width: 70vw;
    padding: 20px;
    background-image: url(Images/blueBackground.jpg);
    outline: solid;
    outline-color: black;
    outline-width:thick;
}
#ContainerMid p
{
    border-radius: 20px;
    padding: 15px;
    background-color: wheat;
    text-indent: 1.5rem;
    border-width: thick;
    border-color: #b1986a;
    border-style: solid;
}
#ContainerMid iframe
{
    display: flex;
    width: 90%;
    height: 100vw;
    justify-content: center;
    align-items: center;
    margin: auto;
        border-radius: 30px;
    border-width: thick;
    border-color: #b1986a;
    border-style: solid;
}
#ContainerMid img
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:auto;
    border-radius: 30px;
    border-width: thick;
    border-color: #70d6e9;
    border-style: solid;
    object-fit: contain;
}