* {
    margin: 0;
    padding: 0;
}

:root {
    --TWF-brown: #4e2b00;
    --TWF-orange: #cc7d00;
    --TWF-beige: #e9bc84;
}

@font-face {
  font-family: WoodFinisherz;
  src: url(../FONT/CaviarDreams.ttf);
}

@font-face {
  font-family: WoodFinisherzBold;
  src: url(../FONT/CaviarDreams_Bold.ttf);
}

body {
    font-family: WoodFinisherz;
    background: #fff;
}

img {
    display: block;
    max-width: 100%;
}

a {
    font-family: WoodFinisherzBold;
}

.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-image: url(../bijlagen/tyler-lastovich-2_jtT9tWZKQ-unsplash.jpg);
    background-size: cover;
}

.hero-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding-block: 30px;
    width: 100%;
    color: var(--TWF-brown);
}

.hero-text h1 {
    text-transform: uppercase;
    letter-spacing: 5px;
}

.hero-text p {
    font-size: 20px;
}

#ref {
    margin: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
    row-gap: 5px;
    overflow: hidden;
}

.project {
    position: relative;
    background-position: center;
    background-size: cover;
    height: 55vh;
}

/* COVERS VAN DE PROJECTEN */

#pj1 {
    background-image: url(../bijlagen/pj1/366265390_1309148343031459_1881522527858552024_n.jpg);
}

#pj2 {
    background-image: url(../bijlagen/pj2/366718891_269605389141464_7289113679287407065_n.jpg);
}

#pj3 {
    background-image: url(../bijlagen/pj3/363855630_1016632896454375_3281687047918689149_n.jpg);
}

#pj4 {
    background-image: url(../bijlagen/pj4/363855630_1353401405597247_7840645662930476471_n.jpg);
}

#pj5 {
    background-image: url(../bijlagen/pj5/393220505_347969114346547_9116015019071455051_n.jpg);
}

#pj6 {
    background-image: url(../bijlagen/pj6/393087799_1365289354075671_8641721726248617680_n.jpg);
}

#pj7 {
    background-image: url(../bijlagen/pj7/368369349_366189025896164_5671628748349543223_n.jpg);
}

#ref img {
    width: 100%;
}

.project h3 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    width: 100%;
    height: 100%;
    color: var(--TWF-beige);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 23px;
    transition: 0.4s;
}

.project:hover h3{
    display: none;
}

.project:hover .dark {
    opacity: 0;
    cursor: pointer;
}

.dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 98;
    background-color: rgba(0,0,0,0.6);
    transition: 0.4s;
}

.contact {
    width: 100%;
    text-align: center;
    background: var(--TWF-brown);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 180px;
}

.contact h4 {
    line-height: 30px;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--TWF-beige);
}

.contact button {
    width: 200px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 10px 8px ;
    background: transparent;
    border: solid 2px var(--TWF-beige);
    color: var(--TWF-beige);
    text-transform: uppercase;
    transition: all 0.4s;
}

.contact button:hover {
    background: var(--TWF-beige);
    color: var(--TWF-brown);
    cursor: pointer;
}

@media all and (max-width: 800px) {
    
    #ref {
        grid-template-columns: 1fr;
    }
    
    .hero-text h1 {
        font-size: 25px;
    }
    
    .hero-text p {
        font-size: 18px;
    }
}