main, nav, div, footer, header{
    margin-bottom: 1%;
    margin-top: 1%;
}

/*For doctype */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

/*Background*/
body {
    
    height: 100%;
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;

    color: white;

    background-image: url('20190914_111005.jpg');
    background-color: black;
    background-attachment: fixed;
    
    backdrop-filter: contrast(20%) blur(5px) brightness(100%) sepia(100%);
}

/*Navegação*/
nav{
    width: fit-content;
}

nav a{
    display: block;
    background-color: green;
    margin: 1em;
    padding: 0.5em;
    padding-left: 2em;
    font-family: arial;
    font-weight: bold;
    color: white;
    transition: all 0.5s;
    text-decoration: none;
}
nav a:hover{
    background-color: blue;
    scale: 110%;
}



/* TEXT */
*{ font-family: arial; }

.logo { width: 10%; }


main img { height: 20vh;}

main { overflow-y: auto;}

@media (max-width:999px) and (orientation: portrait){
    
    body{
        min-height: 100vh;
    }
    
    .logo {widht: 30%; }
    nav {
        display: block;
        width: 100%;
        font-size: 2em;
        display: block;
    }
    header {
        display: block;
        font-size: 1.5em;
    }
    footer {
        display: block;
        font-size: 2.5em;
    }
    main {
        display: block;
        font-size: 1.5em;
    }
}



@media (min-width: 1000px) or (orientation: landscape){
    
    .logo {
      width: 100px;
      justify-self: center;
    }

    html, body { 
        min-height: 100%;
    }
    @media (min-width: 1000px) {
        html, body { 
            height: 100%;
        }
    }
    



    
    
    
    body {
        display: grid;
        grid-template-columns: 1fr 4fr;
        grid-template-rows: 2fr, 10fr, 2fr;
        grid-template-areas:
        'h h'
        'n c'
        'f f';
    }
    header { grid-area: h; }
    nav { grid-area: n; justify-self: center; }
    footer { grid-area: f; margin-left: 30px;}
    
    header {
        display: grid;
        grid-template-columns: 1fr 4fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
        'i hh'
        'i bb'
    }
    header img { grid-area: i; }
    header h1 { grid-area: hh; }
    header h2 { grid-area: bb; }
    
    footer p { display: inline; margin-left: 10px;}
    
    
    
    
    
    
    
  
    
    
    
    
}