@import url('https://fonts.googleapis.com/css2?family=Fondamento:ital@0;1&family=LXGW+WenKai+TC&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fondamento:ital@0;1&family=LXGW+WenKai+TC&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html {
    background-color: #dee7d5;
}


.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 320px 400px 1fr 1fr 1fr;
}

.Shakespear {
    grid-column: span 5;
    align-self: stretch;
}

.ai {
    padding: 10px;
    align-self: stretch;   
}

.titel {
    grid-column: span 5;
    text-align: center;
    align-self: center;
    font-size: 75px;
    font-family: "Fondamento", cursive;
}

.afbeelding {
    padding: 10px;
    grid-area: 3/1/4/2;
    grid-column: span 2;
    justify-self: center;
    align-self: stretch;
    
}

.foto {
    padding: 10px;
    grid-area: 4/1/5/2;
    grid-column: span 2;
    justify-self: center;
    align-self: stretch;
    
}

.uitleg {
    padding: 10px;
    grid-area: 3/4/5/4;
    grid-column: span 2;
    justify-self: start;
    align-self: stretch;
    font-family: "Roboto", sans-serif; 
    font-size: 18px;

}
h2{
    padding: 10px;
    font-size: 20px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    color: rgb(36, 63, 47);
}
.video{
    padding: 10px;
    grid-area: 5/1/6/2;
    grid-column: span 2;
    justify-self: center;
    align-self: center;
}

.lijst{
    padding: 10px;
    grid-area: 5/3/6/4;
    grid-column: span 2;
    justify-self: center;
    align-self: center;
    font-family: "Roboto", sans-serif; 
    font-size: 18px;
}
    
.link{
    
    padding: 5px;    
}
    
a:hover{
    color: rgb(36, 63, 47);
}

a{
    text-decoration: none;
    color:#dee7d5
}

.link1{
    display: grid;
    height: 25px;
    width: 200px;
    background:  #5a7666;
    place-items: center;
    border-radius: 50px;
    margin-bottom: 10px;
    
}

.link2{
    display: grid;
    height: 25px;
    width: 200px;
    background:  #5a7666;
    place-items: center;
    border-radius: 50px;
    margin-bottom: 10px;
}

.link3{
    display: grid;
    height: 25px;
    width: 200px;
    background:  #5a7666;
    place-items: center;
    border-radius: 50px;
    margin-bottom: 10px;
}

.footer{
    grid-column: span 5;
    text-align: center;
    align-self: center;
    padding-bottom: 10px;
    color: rgb(36, 63, 47);
}