:root {
    --mainblue: #203864;
    --secondblue: #01478c;
    --lightorange: #F4B183;
    --mainlight: lightgrey;
    --darkgreen: #002D2D;
}

html * {
    font-family: 'Times New Roman', Times, serif;
    font-weight: lighter;
}

html {
    font-family: 'Times New Roman', Times, serif;
    font-weight: lighter;
    font-size: 20px;
}

html {
    scroll-behavior: smooth;
}

.bg {
    /* The image used */
    background-image: url("Images/road-forest.jpg");

  
    /* Center and scale the image nicely */
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--brokenwhite);
}

.bg2{
    background-image: linear-gradient(to bottom right, var(--mainlight), var(--mainlight));
    background-color: var(--mainblue);
    color: var(--mainlight);
}

.bg2 a {
    color: var(--lightorange);
}

.bg3 {
    background-color: var(--darkgreen);
    color: var(--mainlight);
}

.landing-text {
    font-size: 50px;
}

.full-height {
    height:100%;
}

.plaatje {
    width:100px;
}

.minh-100 {
    min-height: 100%;
}

.fadein {
    -webkit-animation: fadein 12s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 12s; /* Firefox < 16 */
    -ms-animation: fadein 12s; /* Internet Explorer */
    -o-animation: fadein 12s; /* Opera < 12.1 */
    animation: fadein 12s;
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

/* Firefox < 16 */
@-moz-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.delay1 {
    animation-delay: 2s;
}

.delay2 {
    animation-delay: 5s;
}

hr.landing {
    margin-top: 0px;
    width: 100%;
    background: linear-gradient(to right, var(--lightorange), var(--lightorange), var(--lightorange));
    height: 3px;
    border: none;
}


.logo-home {
    width:100px;
    height:auto;
    /* color: var(--mainlight); */
}

.logo-light {
    filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(0%) hue-rotate(163deg) brightness(109%) contrast(107%);
}

.logo-dark {
    filter: invert(18%) sepia(7%) saturate(1088%) hue-rotate(169deg) brightness(93%) contrast(84%);
}


.illustration {
    max-width: 60px;
    height: auto;
}

.parts {
    background-color: var(--darkgreen);
    box-shadow: 7px 7px 5px darkslategray;
}

.title {
    color: var(--darkgreen);
}

.title-light{
    color: var(--mainlight);
}