body {
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 
}
header{
    text-align: center;
    border-bottom: black 2px solid;
  
}

header h1{
    margin-bottom: 5px;
}

header a{
    text-decoration: none;
    color: black;
    line-height: 1.6em;
   
}

.container{
    margin-top: 3em;

    text-align: center;
    
}


.container-left{
    display: inline-block;
    text-align: left;
}

.ten-commands{
    line-height: 40px;
    
}

body h1{
   text-align: center;
}

.cols{
    padding-top: 2em;
    line-height: 4em;
    display: grid;
    grid-template-columns: 1fr 1fr;
   
    grid-template-areas: 
        
        'left-col right-col'
    ;
    margin: 0 auto;
    width: 50%;
    padding-bottom: 4em;
}

.left-col{
    grid-area: left-col;
}

.right-col{
    grid-area: right-col;
}

footer{
    padding-top: 2em;
    text-align: center;
    font: italic;
    bottom: 0;
    width: 100%;
    height: 60px;
    border-top: black 2px solid;
    overflow: auto;
}



@media screen and (max-width: 900px){
    
    .cols{
        
        padding-left: 0;
        grid-template-columns: 1fr;
        grid-template-areas: 
            
            'left-col' 
            'right-col'
        ;
        text-align: center;
        list-style-position: inside;
        padding-bottom: 2em;
    }


    .left-col{
        margin-bottom: -2em;
        margin-left: -3em;
    }

    .right-col{
        margin-left: -3em;
    }
    
    footer{
        position: relative;
        padding-top: 2em;
        text-align: center;
        font: italic;
        bottom: 0;
        width: 100%;
        height: 60px;
        border-top: black 2px solid;
        overflow: auto;
        
    }
}