/* comment in css */

/* font-size: em staat relatief tegenover de tag waar het in zit
/* font-size: rem staat relatief tegenover de size van de page
/* sizes based on viewport (vh van height en vw van width scherm)
/* css rotations/background gradients: ?deg

/* colors
gebroken wit: #F7F9F9
lila: #D19AD5
oranje: #FF9818
blauw: #4988D8
geel: #FFDA04


/* ALGEMEEN */
@font-face {
        font-family: 'D_Regular';
        src: url("text/Domaine-Light.otf");
      }

@font-face {
        font-family: 'A_Regular';
        src: url("text/ArchivePro-Italic.otf");
      }

@font-face {
        font-family: 'I_Regular';
        src: url("text/InriaSans-Light.ttf");
      }

@font-face {
        font-family: 'C_Regular';
        src: url("text/Cormorant-Regular.ttf");
      }

@font-face {
        font-family: 'C_Italic';
        src: url("text/Cormorant-MediumItalic.ttf");
      }


  body {
    height: 100%;
    width: 100%;
    margin: 0;
    color: black;
    background: #F7F9F9;
    font-size: 30px;
    font-family: "I_Regular", "times new roman", serif;
  }

  * {
    /* dit betekent alle elementen */
    box-sizing: border-box;
    /* dit betekent dat de width en height met padding en margin ingerekend zijn */
  }

  /* scrollbars weg doen maar functioneel houden */

  div::-webkit-scrollbar {display: none;}

    /* Hide scrollbar for Chrome, Safari and Opera */
    .example::-webkit-scrollbar {
      display: none;
    }

    /* Hide scrollbar for IE and Edge */
    .example {
      -ms-overflow-style: none;
    }

  /* OPBOUW VASTE ELEMENTEN PAGINA */

  .INHOUD_CONTAINER {
    width:100vw;
    height:100vh;
    box-sizing: border-box;
  }

  .ondertitel {
    font-size:80%;
    line-height: 1.3;
    background-color: rgba(255, 0, 0, 0);
    color: black;
    z-index: 999;
    position: absolute;
    margin-top: 2vh;
  }

  #titel_links {
    margin-left: 2vw;
  }
  #titel_rechts {
    margin-right: 2vw;
    right: 0;
  }

  #titel_linksO {
    margin-left: 2vw;
    bottom: 0;
    margin-bottom: 2vh;
  }

  #titel_rechtsO {
    margin-right: 2vw;
    bottom: 0;
    right: 0;
    margin-bottom: 2vh;
  }

  a {
    text-decoration: none;
    color: black;
  }

  a:hover {
    text-decoration: underline #FFDA04;
  }

  #info:hover {
    cursor: help;
  }

  #home:hover {
    cursor: pointer;
  }

  #work:hover {
    cursor: pointer;
  }

  .INHOUD {
    width:100vw;
    height: 100vh;
    padding-top:3vh;
    padding-bottom: 3vh;
    padding-right:20vw;
    padding-left:25vw;
    margin:0;
    overflow-y: scroll;
    box-sizing:border-box;
  }

/* ABOUT */

  /* tekst */

  .INHOUD p {
    line-height: 1.3;
  }

  growing {
    color: #FFDA04;
  }

  experiments {
    color: #4988D8;
  }

  enjoy {
    color: #4988D8;
  }

  whatever {
  color: #FF9818;
  }

  more {
    color: #D19AD5;
  }

  X {
    color: #FF9818;
  }

  p:hover {
    cursor: default;
  }

  /* foto's */

  #growing {
    top: 30vh;
    left: 40vw;
    height: 20vw;
    position: absolute;
    z-index: 2;
    display: none;
  }

    #experiments {
      width: 10vw;
      position: absolute;
      z-index: -2;
      display: none;
      right: 20vw;
      bottom: 30vh;
    }

    #enjoy {
      width: 30vw;
      position: absolute;
      z-index: -2;
      display: none;
      left: 4vw;
      top: 30vh;
    }

    #whatever {
      width: 10vw;
      position: absolute;
      z-index: 4;
      display: none;
      left: 17vw;
      top: 25vh;
    }

    #more {
      width: 30vw;
      position: absolute;
      z-index: -2;
      display: none;
      left: 24vw;
      top: 50vh;
    }

    #X {
      width: 25vw;
      position: absolute;
      z-index: -2;
      display: none;
      right: 5vw;
      top: 20vh;
    }

    #inspring {
      margin-left: 2vw;
    }
    .links_info {
      color: #FF9818;
    }
    .links_info2 {
      color: #4988D8;
    }

    .links_info:hover {
      text-decoration: none;
      color: #D19AD5;
    }

    .links_info2:hover {
      text-decoration: none;
      color: #FFDA04;
    }

    @media only screen and (max-width: 780px) {
      body {
        font-size: 20px;
      }

      .INHOUD {
        padding-left: 20vw;
        padding-right: 5vw:
        padding-bottom: 30vh;
      }
    }