html {
    scroll-behavior: smooth;
    font-family: 'Geist Mono';
}

h1 {
    font-size: 60px;
}

body {
    background-color: #141414;
}


.siteNav a {
    text-decoration: none;
    color: rgb(255, 255, 255);
}
#contact a {
    text-decoration: none;
    margin-bottom: 20px;
    margin-top: 50px;
    font-size: 25px;
    
    background-image: linear-gradient(to right,red, yellow);
    color: transparent;
    background-clip: text;
}

#header-bg {
    object-fit: cover;
    width: 99vw;
    height: 100vh;
    opacity: 0.5;
    filter:blur(4px);
}

.logo {
    color:rgb(161, 39, 57);
    transition:1s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #141414;
    padding: 10px;
    border-radius: 10px;
}
.logo p {
    text-align: center;
}

.logo:hover {
    color:rgb(238, 188, 23);
    transition:1s;
    letter-spacing: 10px;
}

h2 {
    font-size: 30px;
    margin-bottom: 20px;
    margin-top: 50px;
}

#works {
    color: red;
}

    #works p {
        margin-bottom: 20px;
        margin-top: 50px;
        color: grey;
        font-size: 25px;
    }
    /* Het aanpassen van grootte, ruimte rondom en kleur van tekst. */

#impressions {
    color: rgb(255, 55, 0);
}

    #impressions p {
        margin-bottom: 20px;
        margin-top: 50px;
        color: grey;
        font-size: 25px;
    }

#about {
    color: rgb(255, 81, 0);
}
    #about p {
        margin-top: 50px;
    }

    #about p, li {
        font-size: 35px;
    }

    #about-content-full {
        margin-top: 69px;
        display: flex;
    }

    #about-content-textWrap {
        background: linear-gradient(to right, #141414, purple);
        width: 54vw;
        height: 75vh;
        padding: 10px;
        text-align: right;
    }

    /* In dit geval is het verschil tussen ...-textWrap en ...-full dat ...-wrap alleen over het tekstblok gaat, terwijl ...-full de content in zijn geheel benaderd. */


    #meImg {
        float: right;
        height: 75vh;
        background: linear-gradient(to left, red, purple);
        padding: 10px;
    }

#contact {
    color: rgb(255, 128, 0);
}

    #contact p {
        margin-bottom: 20px;
        margin-top: 50px;
        color: grey;
        font-size: 25px;
    }

#works, #impressions, #about, #contact {
    min-height: 100vh;
    width: 80vw;
    margin: 20px;
    margin-bottom: 200px;
    border:0px solid green;
    /* Dit gebruik ik om duidelijk in een keer borders van meerdere elementen te weergeven. */
}

.siteNav {
    position: fixed;
    right: 0px;
    top: 0px;
    list-style-type: none;
    text-align: right;
    width: 15vw;
    font-size: 30px;
}

    #works_li {
        background-color: red;
        transition: 1s;
        opacity: 0.4;
        padding: 10px;
    }
        #works_li:hover {
            padding-right: 25px;
            transition: 1s;
            opacity: 1.0;
        }

    #impressions_li {
        background-color: rgb(255, 55, 0);
        transition: 1s;
        opacity: 0.4;
        padding: 10px;
    }
        #impressions_li:hover {
            padding-right: 25px;
            transition: 1s;
            opacity: 1.0;
        }

    #about_li {
        background-color: rgb(255, 81, 0);
        transition: 1s;
        opacity: 0.4;
        padding: 10px;
    }
        #about_li:hover {
            padding-right: 25px;
            transition: 1s;
            opacity: 1.0;
        }

    #contact_li {
        background-color: rgb(255, 128, 0);
        transition: 1s;
        opacity: 0.4;
        padding: 10px;
    }
        #contact_li:hover {
            padding-right: 25px;
            transition: 1s;
            opacity: 1.0;
        }

    #datapunten_li {
        background-color: rgb(55, 0, 70);
        transition: 1s;
        opacity: 0.4;
        padding: 10px;
    }
        #datapunten_li:hover {
            padding-right: 25px;
            transition: 1s;
            opacity: 1.0;
        }
    
    #top_li {
        background-color: rgb(107, 0, 137);
        transition: 1s;
        opacity: 0.4;
        padding: 10px;
    }
        #top_li:hover {
            padding-right: 25px;
            transition: 1s;
            opacity: 1.0;
        }
    

p, pre {
    color: white;
}

.youtubeLinks img, .instagramLinks img {
    width: 20vw;
    height: 20vh;
    transition: 0.3s;
    filter: brightness(70%);
}
.youtubeLinks img:hover, .instagramLinks img:hover {
    transition: 0.3s;
    transform: scale(1.2);
    filter: brightness(150%);
}
/* Dit voegt een animatie toe aan de webpagina als je over de content met een muis heen beweegt.
Het veranderd hoe fel de afbeelding wordt, de schaal ervan, en dit gebeurd gedurende een halve seconde tijd. */

.youtubeLinks {
    display: grid;
    grid-template-columns: auto auto auto auto;
  }

.youtubeLinks figcaption {
    color: white;
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}
  .card {
    z-index: 0;
  }
  .card:hover {
    z-index: 10;
  }
  /* Z-index positioneert content als lagen.
  Hoe hoger de waarde, hoe hoger de laag ligt (dus bovenop andere content) */

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
  }

.instagramLinks {
    display: flex;
    grid-template-columns: auto auto auto auto;
}

/* Deze volgende vier (4) elementen regelen de opmaak van de scrollbar op de pagina, beide horizontaal en verticaal. */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
/* Grootte van de scrollbar. */
::-webkit-scrollbar-track {
    background: rgb(72, 0, 53);
    opacity: 0.5;
}
/* Baan/track waar de scrollbar in loopt. */
::-webkit-scrollbar-thumb {
    background: rgb(255, 0, 153);
}
/* Achtergrond van scrollbar. */
::-webkit-scrollbar-thumb:hover {
    background: rgb(190, 0, 95);
}
/* Achtergrond van scrollbar bij hover. */

.blackbox {
    background-color: rgb(15, 15, 15);
    border-radius: 10px;
    padding: 20px;
}