@media only screen and (max-width: 800px) {
* {
    justify-content: center;
    padding: 0;
    margin: 0;
}

body {
    background-color: #7900FF;
    color: #CFFFDC;
    height: 100%;
}

@font-face {
    font-family: 'margin' ;
    src: url(/httpdocs/font/Margin.otf);
}

.text {
    font-family: 'margin', cursive;
    text-shadow: 0 5px rgba(0, 0, 0, .5);
    font-size: 45px;
    font-weight: normal;
    position: relative;
    text-align: center;
    text-decoration: none;
}
h1 {
font-family: 'margin', cursive;
text-shadow: 0 2px rgba(0, 0, 0, .5);
font-size: 35px;
font-weight: normal;
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
}

h2 {
    font-family: 'margin', cursive;
    text-shadow: 0 2px rgba(0, 0, 0, .5);
    font-size: 25px;
    font-weight: normal;
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

span {
    border-right: .05m solid;
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% {
        border-color: transparent;
    }
}

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

i {
    align-items: center;
    padding: 15px;
    text-shadow: 0 2px rgba(0, 0, 0, .5);
}

.outer-grid {
    display: grid;
    grid-template-columns: 800px;
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .index { grid-area: 1 / 1 / 2 / 2; }
    .wbi .cv { grid-area: 2 / 1 / 3 / 2; }
    .prjct1 { grid-area: 3 / 1 / 4 / 2; }
    .prjct2 { grid-area: 4 / 1 / 5 / 2; }
    .contact .icons { grid-area: 5 / 1 / 6 / 2; }


.index {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-items: center;
    }
        
    .text { grid-area: 1 / 1 / 3 / 2; 
        text-align: center;
        align-items: center;
    }
}

.wbi .cv {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .foto .ikfoto { grid-area: 1 / 1 / 3 / 2; }
    .koptekst .bijschrift { grid-area: 1 / 2 / 4 / 3; }
    .cvknop { grid-area: 3 / 1 / 4 / 2; }

span {
    font-size: larger;
    text-align: center;
}