@font-face {
    font-family: 'Lato', sans-serif;
    src: url('fonts/Lato-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: 100;
}
    
    *{
    	margin:0;
        padding:0;
        box-sizing:border-box;
    } 

    :root{
        --top_padding:5px;
    }

    html,
    body {
    	width: 100%;
        height: 100%;
        font-weight:500;
    }

    #top-nav {
        grid-area: top-bar;
        display: flex;
        align-items: center;

        
    }

    #main-nav {
        grid-area: main-bar;
    }


    #content {
        grid-area: main;
    }

    #footer {
        grid-area:footer;
    }

@media screen and (min-width:1024px){

    .global-wrapper {
        display:grid;
        height:100vh;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 10% 22% auto 40%;
        grid-template-areas: 
        "top-bar top-bar top-bar top-bar"
        "main-bar main-bar main-bar main-bar"
        "main main main main"
        "footer footer footer footer";
        font-family: 'Lato', sans-serif;
        font-weight: 300;
    }

}

       
 @media screen and (max-width:480px) {

    .global-wrapper {
        grid-template-columns: 100%; 
        grid-template-rows: auto auto auto;
        grid-template-areas: 
        "main-bar"
        "main"
        "footer";
        font-family: 'Lato', sans-serif;
        font-weight:500;
        display:grid;
    }



 }