/*
Project name: 404 Not Found
Date: 2022/02/09
Author: Dirk Vermeulen
*/

/* Variables*/
:root{
--txt_title: #333;
--txt_normal:#4f4f4f;
--txt_footer: #bdbdbd;
--fnt_title: 'Inconsolata', monospace;
--fnt_text: 'Space Mono', monospace;
--fnt_footer: 'Montserrat', sans-serif;
}

/* body */
body{
    min-height:100vh;
    display:grid;
    grid-template-rows: auto 2fr 3fr auto;
 
    /* padding:0 6%; */
    width: 88%;
    margin:auto;
}


/* header */
header{
    grid-row: 1;
    padding-bottom:2.5rem;
}
header h1{
    color: var(--txt_title);
    font-size:1.75rem;
    font-family: var(--fnt_title) ;
    letter-spacing: -0.1em;
    text-transform: uppercase;
}

/* aside */
aside {
    grid-row: 2;
    text-align: center;

}

aside img{
    max-width: 70%;
}
/* main */
main{
    grid-row: 3;
    overflow: visible;
    /* padding-top:1rem; */
}

main h2{
    font-family: var(--fnt_text);
    font-size: 3rem;
    margin:0;
    line-height: 1.5em;
    padding-bottom: 1rem;
}

main .feedback{
    font-family: var(--fnt_text);
    font-size: 2rem;
    padding-bottom: 3rem;
}
main .back{
    display:block;
    margin:auto;
    width:50%;
    line-height:5rem;
    background-color: var(--txt_title);
    color:white;
    text-align:center;
    font-family: var(--fnt_text);
    font-size:1.2rem;
    font-weight: 700;
}
main .back a{
    color:white;
    text-decoration: none;
    text-transform: uppercase;
}



/* footer */
footer{
    text-align: center;
    color:var(--txt_footer);
    padding-bottom: 1rem;
    grid-row:4;
    font-family: var(--fnt_footer);
    font-size: 1.3rem;
}
footer a{
    color:inherit;
    text-decoration: none;
}
footer a.link{
    font-weight: 700;
    
}

/* Desktop */
@media (min-width: 1020px){
    body{
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr 1fr;
    }
    header{
        grid-row:1;
        grid-column: span 2;
        padding-bottom: 10vh;
    }
    aside{
        grid-row:2;
        grid-column: 1;
    }
    main{
        grid-row:2;
        grid-column: 2;
    }
        main h2{
            font-size: 5rem;;
        }
    footer{
        grid-row:3;
        grid-column:span 2;
    }

}