section#main {

    display: grid;

    grid-template:
        "a a" 
        "b c ";
    place-content: start center;
    gap: .5em;
    box-sizing: border-box;
}



.left-container {
    /* flex:50%; */
    /* this is how you assign an element to one of the labeled40px areas in the template strings. */
    grid-area: b;
    justify-self: end;
    align-self: start;
    display:grid;
    grid-template:
        "d d" 
        "e f";     
    gap: .5em;  
    margin:10px;


}

.right-container {
    grid-area: c;
    /* padding-right: 10px; */
    /* width:40vw; */
    /* padding:10px; */
}

.main-header {
    grid-area: a;
}

img
{
    grid-area: e;
    min-width: 100px;
    padding-top: 5px;
    max-width:100%;
    justify-self:end;
}


video {
    grid-area: d;
    min-width: 100px;
    padding-top: 5px;
    max-width:100%;
    justify-self:flex-end;

}


h2{
    font-size: 30px;
    text-align:center;
    border-color: black;
    border-style: solid;
    border-radius: 3vw;
    padding-top: 20px;
    padding-bottom: 20px;
}

h3{
    font-size: 20px;
    text-align:center;
    border-color: black;
    border-style: solid;
    border-radius: 2vw;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0;
}


@media (max-width: 800px){
    section#main {

    display: grid;

        grid-template:
            "a" 
            "b"
            "c ";
        place-content: start center;
        gap: .5em;
        box-sizing: border-box;
    }


}