@font-face {
    font-family: Texgyrebold;
    src: url(../fonts/texgyreadventor-bold.otf);
}

@font-face {
    font-family: Texgyreregular;
    src: url(../fonts/texgyreadventor-regular.otf);
}


body {
    background-color: #222222;
    color: white;
    font-family: Texgyrebold;
    overflow: hidden;
    margin: 0;
}

/* width */
*::-webkit-scrollbar {
    width: 10px;
    height: 7.5px;
    
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
    background: none;
    background: #121212;
    border-radius: 5px;
    }
    
    ::-webkit-scrollbar-track-piece {
    background: #121212;
    border-radius: 5px;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
    background:#303030;
    border-radius: 5px;
    }
    
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
    background: #252525;
    }

@keyframes geenblur {
    0%   {filter: blur(4px)}
  50%  {filter: blur(4px)}
  99% {filter: blur(0px)}
  100% {filter: blur(0px);}
}

#blur {
    animation-name: geenblur;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    filter: blur(4px);
    width: 100vw;
    height: 100vh;
}

#nav {
    width: 100vw;
    height: 3em;
    justify-content: flex-end;
    align-content: space-between;
    display: flex;
    transform: translate(0em, 1em);
}

#workKnop {
    transform: translate(-4em);
    font-size: 1.4em;
    font-family: Texgyreregular;
    transition: 0.5s;

}

#contactKnop {
    transform: translate(-3em);
    font-size: 1.4em;
    font-family: Texgyreregular;
    transition: 0.5s;

}

#contactKnop:hover {
    color: #FFC011;
    cursor: pointer;
}

#workKnop:hover {
    color: #FFC011;
    cursor: pointer;
}


.name {
    margin: auto;
    font-size: 10em;
    width: 100%;
    text-align: center;
    z-index: -1;
    transform: translate(0.5em, 1em);
    transition: .7s;
}



.title {
    margin: auto;
    font-size: 3em;
    width: 100%;
    text-align: center;
    z-index: -1; 
    transform: translate(4em, 2em);
    position: absolute;
    transition: .7s;
}

.me {
    position: absolute;
    bottom: 0%;
    left: 20em;
    width: 40em;
    height: auto;
    z-index: -2;
    transition: .6s ease-in-out;
}

@keyframes unblur {
    0%   {transform: translateY(-100em);}
  50%  {transform: translateY(-40em);}
  99% {transform: scale(700%) translate(15em, -5em); display: none}
  100% {transform: scale(0%) translate(15em, -5em);
    display: none;
    }
}

#glasses {
    animation-name: unblur;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    position: relative;
    z-index: 5;
    display: block;
    margin: 0 auto;
    transform: translateY(-90em);
}

.workContent {
    justify-content: center;
    align-content: space-around;
    width: 80vw;
    height: auto;
    position: absolute;
    top: 20%;
    gap: 5em;
    flex-wrap: wrap;
    margin-right: 10vw;
    margin-left: 10vw;
    opacity: 0;
    display: none;
}

.workContentAnimation {
    justify-content: center;
    align-content: space-around;
    width: 80vw;
    height: auto;
    position: absolute;
    gap: 5em;
    flex-wrap: wrap;
    margin-right: 10vw;
    margin-left: 10vw;
    opacity: 0;
    display: flex;
    animation: workout .7s ease-in-out forwards;
}

@keyframes workout {
    0%   {opacity: 1; top: 17%;}
  99% {opacity: 0; top: 14%; transform: scale(1)}
  100% {transform: scale(0); display: none;}
}

.workActive {
    justify-content: center;
    align-content: space-around;
    width: 80vw;
    height: auto;
    position: absolute;
    gap: 5em;
    flex-wrap: wrap;
    margin-right: 10vw;
    margin-left: 10vw;
    opacity: 1;
    display: flex;
    animation: workin .7s ease-in-out forwards;
}

@keyframes workin {
    0%   {display: flex; opacity: 0; top: 14%;}
  100% { opacity: 1; top: 17%;}
}

.workImage {
    width: 20em;
    height: 12em;
    border-radius: 1em;
    object-fit: cover;
    object-position: 0% 0%;
    transition: .5s ease-in-out;
}

.workImage:hover {
    filter: brightness(50%);
    cursor: pointer;
}

.workImage:nth-child(3) {
    object-position: 25%;
}

.meGone {
    transform: translate(-70em);
    transition: .6s ease-in-out;
}

.titleGone {
    transform: translate(-30em, 2em);
    transition: .8s ease-in-out;
}

.nameGone {
    transform: translate(-10em, 1em);
    transition: .8s ease-in-out;
}

.contactContent {
    max-width: 500px;
  padding: 50px;
  background: #2c2c2c;
  border-radius: 20px;
}

input, textarea {
    width: 100%;
    height: 2em;
    background-color: #464646;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1em;
    font-family: texgyreregular;
    padding-left: 10px;
    max-width: 500px;
    min-width: 500px;
    min-height: 2em;
    max-height: 10em;
    margin-bottom: 1em;
    margin-top: .1em;
    overflow: hidden;
  }



.button-primary {
    width: 500px;
    height: 2em;
    background-color: #464646;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1em;
    font-family: texgyreregular;
    padding-left: 10px;
    transform: translate(0em, 1em);
}

.button-primary:hover {
    cursor: pointer;
    background-color: #7a7a7a;
}
.contact {
    position: absolute;
    top: 15%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    margin-right: 10vw;
    margin-left: 10vw;
    width: 80vw;
    gap: 7em;
    height: 33em;
    opacity: 0;
    display: none;
}

.workInfo {
    position: absolute;
    top: 15%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    margin-right: 10vw;
    margin-left: 10vw;
    width: 80vw;
    gap: 3em;
    height: 33em;
    opacity: 0;
    display: none;
}

.workinfoActive {
    position: absolute;
    top: 15%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    margin-right: 10vw;
    margin-left: 10vw;
    width: 80vw;
    gap: 3em;
    height: 33em;
    opacity: 1;
    animation: contactactive .7s ease-in-out forwards;
}

.workinfoAnimation {
    position: absolute;
    top: 15%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    margin-right: 10vw;
    margin-left: 10vw;
    width: 80vw;
    gap: 3em;
    height: 33em;
    opacity: 0;
    animation: workinfogone .7s ease-in-out forwards;
}

.contactAnimation {
    position: absolute;
    top: 15%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    margin-right: 10vw;
    margin-left: 10vw;
    width: 80vw;
    gap: 7em;
    height: 33em;
    opacity: 0;
    animation: contactgone .7s ease-in-out forwards;
}

.contactActive {
    position: absolute;
    top: 15%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    margin-right: 10vw;
    margin-left: 10vw;
    width: 80vw;
    gap: 7em;
    height: 33em;
    opacity: 1;
    animation: contactactive .7s ease-in-out forwards;
}

#mailImage {
    transform: rotate(20deg);
}

.backKnop {
    position: absolute;
    left: 5%;
    top: 5%;
    font-size: 1.5em;
    transition: .5s ease-in-out;
    animation: backknopgone .7s ease-in-out forwards;
    transform: translateY(-2em);
    opacity: 0;
}

.backKnopactive {
    position: absolute;
    left: 5%;
    top: 5%;
    font-size: 1.5em;
    transition: .5s ease-in-out;
    animation: backknop .7s ease-in-out forwards;
}

.backKnop:hover {
    color: #FFC011;
    cursor: pointer;
}

@keyframes backknop {
    0%   {display: block; opacity: 0; transform: translateY(-2em);}
  100% { opacity: 1; transform: translateY(0em);}
}

@keyframes backknopGone {
    0%   {display: block; opacity: 1; transform: translateY(0em);}
  99% { opacity: 0; transform: translateY(-2em);}
  100% {display: hidden;}
}

@keyframes contactactive {
    0%{transform: scale(0);}
    1%   {display: flex; opacity: 0; transform: translateY(-2em) scale(1);}
  100% { opacity: 1; transform: translateY(0em);}
}

@keyframes contactgone {
    0%   {display: flex; opacity: 1; transform: translateY(0em);}
  99% { opacity: 0; transform: translateY(-2em) scale(1); display: none;}
  100% {transform: scale(0);}
}

@keyframes workinfogone {
    0%   {display: flex; opacity: 1;}
  99% { opacity: 0; transform: translateY(-2em) scale(1); display: none;}
  100% {transform: scale(0);}
}


.workTitle {
    text-align: center;
    font-family: Texgyreregular;
}

.vergroot {
    width: 40em;
    height: 24em;
    object-fit: cover;
    object-position: 0% 0%;
    border-radius: 2em;
}

#workInfotext {
    width: 30em;
    font-family: Texgyreregular;
}

#tryButton {
    background-color: #FFC011;
    color: white;
    border: none;
    border-radius: 1em;
    font-family: Texgyrebold;
    font-size: 1.3em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.2em;
}

#tryButton:hover {
    background-color: #c49000;
    cursor: pointer;
}

a  {
    text-decoration: none;
}

@media only screen and (max-width: 730px) {
    .vergroot {
      width: 35em;
      height: auto;
    }

    #workInfotext {
        width: 25em;
    }
}

@media only screen and (max-width: 500px) {
    .vergroot {
      width: 20em;
      height: 12em;
      margin-top: 1em;
    }

    #workInfotext {
        width: 19em;
    }

    #worklink {
        margin: 0 auto;
    }

    .backKnop {
        left: 15%;
    }

    #workKnop {
        transform: translate(-3em, 0.4em);
    }

    #contactKnop {
        transform: translate(-2em, 0.4em);
    }

    .contactContent {
        max-width: 230px;
        transform: translateY(5em);
    }

    #forname {
        max-width: 230px;
        min-width: 230px;
    }

    #email {
        max-width: 230px;
        min-width: 230px;
    }

    #message {
        max-width: 230px;
        min-width: 230px;
    }

    .button-primary {
        max-width: 240px;
        min-width: 240px;
    }

    #mailImage {
        transform: translateY(-1em) rotate(20deg);
        width: 9em;
        height: auto;
    }

    .name {
        font-size: 3em;
        transform: translate(-0.5em, 6em);
    }

    .title {
        font-size: 1.4em;
        transform: translate(1.1em, 11.9em);
    }

    .me {
        left: 2em;
    }

    .nameGone {
        transform: translate(-10em, 6em);
    }

    .titleGone {
        transform: translate(-30em, 11.1em);
    }
     .me {
        width: 35em;
        height: auto;
     }
    
     #glasses {
        display: none;
     }

     #blur {
        animation-name: none;
        filter: blur(0px);
     }
    
     .workInfo {
        top: 20%;
     }

     .workinfoAnimation {
        top: 20%;
     }
}