/*Futura*/
@import url("https://use.typekit.net/tju7pkq.css");
/*Clarendon*/
@import url("https://use.typekit.net/tju7pkq.css");
*{
    padding: 0;
    margin: 0;
}

h1{
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 100px;
}
h2{
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 40px;
}
p{
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
}

header{
    display:grid;
    grid-template-columns: 100%;
    h1{
        color: white;
        background-color: black;
        width: 50%;
        text-align: center;
    }
    justify-items: center;
    align-items: center;
    background-image: url(../afbeeldingen/letterAchtergrond.jpg);
    height: 50vh;
}

main{
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
    row-gap: 10px;
    column-gap: 20px;
    margin: 20px;
    justify-items: center;
    align-items: center;
    h2{
        grid-column: 1/3;
    }
    p{
        grid-column: 1/4;
        
    }
    img{
        display: block;
        grid-row: 1/4;
        grid-column: 5/6;
        width: 100%;
    }
}

section{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    h2{
        grid-column: 1/4;
        text-align: center;
        margin-bottom: 20px;
    }

    article{
        img{
            width: 45%;
            float:right;
            margin-left: 10px;
            margin-right: 20px;
        }
        p{
            margin-left: 20px;
            margin-right: 20px;
            margin-bottom: 10px;
        }
        h2{
            margin-top: 20px;
            margin-bottom: 20px;
            
        }
        
        #clarendon{
            font-family: "clarendon-text-pro", serif;
            font-weight: 700;
            font-style: normal;
        }
        #gill{
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        #franklin{
            font-family: 'Franklin Gothic Demi', 'Arial Narrow', Arial, sans-serif;
        }
        border: 5px solid black;
        border-radius: 10px;
        width: 70%;
        margin-bottom: 20px;
    }
    
    article:nth-child(2){
      
        grid-column: 1/2;
    }
    article:nth-child(3){
        grid-row: 2/3;
        grid-column: 2/3;
    }
}
figure{
    display: grid;
    grid-template-columns:50px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 50px;
    
    align-items: center;
    justify-items: center;
    /*WOORD*/
    #f{
        grid-column: 2/3;
    }
    #a{
        grid-row: 2/3;
        grid-column: 5/6;
    }
    #a2{
        grid-row: 3/4;
        grid-column: 5/6;
    }
    #l2{
        grid-row: 4/5;
        grid-column: 5/6;
    }
    #i2{
        grid-row: 4/5;
        grid-column: 6/7;
    }
    #n{
        grid-row: 4/5;
        grid-column: 7/8;
    }
    #u{
        grid-row: 4/5;
        grid-column: 8/9;
    }
    #x{
        grid-row: 4/5;
        grid-column: 9/10;
    }

    #j{
        grid-row: 2/5;
        grid-column: 2/5;
        width: 75%;
    }
    #t{
        grid-row: 1/4;
        grid-column: 6/10;
        width: 60%;
    }
}
footer{
    background-color: rgb(50, 50, 50);
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 10px;
}



/*MOBILE*/


@media only screen and (max-width:480px){
    header{
        h1{
            width: 65%;
            font-size: 50px;
        }
    }

    main{
        img{
            display:none;
        }
        p, h2{
            grid-column: 1/8;
        }
    }

    section{
        h2{
            text-align: left;
            margin-left: 20px;
        }
        article{
            width: 90%;
        }
        article:nth-child(2){
            grid-column: 1/4;
            grid-row: 2/3;
        }
        article:nth-child(3){
            grid-column: 1/4;
            grid-row: 3/4;
        }
        article:nth-child(4){
            grid-column: 1/4;
            grid-row: 4/5;
        }
    }

    figure{
        
        img{
            width: 100%;
        }
        grid-template-columns: 25% 25% 25% 25%;
        #f{
            margin-left: 20px;
            grid-column: 1/2;
        }
        #i{
            grid-column: 2/3;
        }
        #l{
            grid-column: 3/4;
        }
        #m{
            grid-column: 4/5;
        }
        
        #a, #a2, #l2,#i2,#n, #u, #x, #j,#t{
            display:none;
        }
        
    }
}