body {
    height: 101vh;
    background-image: url("https://images.unsplash.com/photo-1592210454359-9043f067919b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80");
    margin: 0;
    border: 0;
    padding: 0;
    text-align: center; 
}
#all {
    display: grid;
    grid-template-rows: repeat(10px, 3fr, 3fr);
    grid-template-columns: repeat(2, 1fr);
    grid-gap: .5em;
    text-align: center;
    grid-template-areas: 
        'hdr hdr'
        'sect1 sect2'
        'sect3 sect4';
}

#hdr {
    grid-area: hdr;
    color: white;
    text-align: center;
    font-family: 'Nunito', sans-serif;
}



#locOne {
    grid-area: sect1;
    background-color: aqua;
    opacity: .7;
    border-color: black;
    border-style: solid;
    border-radius: 1px;
    font-family: "Lucida Console", "Courier New", monospace;
}               



#locTwo {
    grid-area: sect2;
    background-color: aqua;
    opacity: .7;
    border-color: black;
    border-style: solid;
    border-radius: 1px;
    font-family: "Lucida Console", "Courier New", monospace;
}


#locThree {
    grid-area: sect3;
    background-color: aqua;
    opacity: .7;
    border-color: black;
    border-style: solid;
    font-family: "Lucida Console", "Courier New", monospace;
}

#locFour {
    grid-area: sect4;
    background-color: aqua;
    opacity: .7;
    border-color: black;
    border-style: solid;
    border-radius: 1px;
    font-family: "Lucida Console", "Courier New", monospace;
}

#firstLocLists {
    display: flex;
    vertical-align: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    font-size: 13px;
    text-align: left;
}

#buttons {
    display: flex;
    justify-content: center;
}




#secondLocLists {
    display: flex;
    vertical-align: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    font-size: 13px;
    text-align: left;

}
#thirdLocLists {
    display: flex;
    vertical-align: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    font-size: 13px;
    text-align: left;

}
#fourthLocLists {
    display: flex;
    vertical-align: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    font-size: 13px;
    text-align: left;

}

.clearAll { 
    position: absolute;
    right: 0;
    background-color: red;
    color: white;
    top: 0;
}

.clearOne, .clearTwo, .clearThree, .clearFour {
    background-color: red;
    color: white;
}

button {
    background-color: palegreen;
    
}