@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@100&family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@100&family=Poiret+One&family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Spartan:wght@100;400&display=swap');

*{
    padding:0;
    margin:2% 0 0 0;
    box-sizing: border-box;
    color:white;
    font-family: 'Poiret One', cursive;
    font-weight: lighter;
    scroll-behavior: smooth;
}
.my-image{
    width:20%;
    margin-right:2vmax;
    float:left;
    border:2px white solid;
}
body{
    background: black;
    display: block;
}
.show-body{
    display: none;
}
.hamburger-nav-container{
    padding-top:1vmax;
    top:1vmax;
    width:2.6vmax;
    height: 4%;    
    margin-left:1vmax;
    position:fixed;
    cursor: pointer;
    z-index: 2;
}
a{
    text-decoration: none;
}

h1{
    margin-top:20vmax;
    margin-bottom:18vmax;
    font-size:10vmax;
    text-align: center;
    background:rgba(5, 5, 5, 0.99);
    padding:2vmax 0 2vmax 0;
    text-transform: capitalize;
}
h2{
    text-align: center;
    font-size:3vmax;
    margin-bottom:3vmax;
}
h3{
    font-size:6vmax;
}
h4{
    font-size:2vmax;
    margin-bottom:2vmax;
}
h5{
    font-size: 2vmax;
    margin: 1vmax -7vmax 2vmax -7vmax;
    padding:1vmax 0 1vmax 7vmax;
}
/*   Classess   */

/* hamburger  and nav */


.back-to-top{
    top:5vmax;    
    bottom:32px;
    left:1vmax;
    height: 4%;    
    position:fixed;
    cursor: pointer;
    z-index: 1;
}
.hamburger{
    overflow: none;
background: white;
width:fit-content;
height: 2px;
transition: 1s ease; 
}
.hamburger::before{
    content:'';
    transition: 0.5s ease; 
    opacity: 100%;
    display: block;
    background: white;
    width:2vmax;
    height: 2px;
    transition: 0.5s ease; 
    transform: translateY(0.6vmax);
}
.hamburger::after{
    content:'';
    display: block;
    background: white;
    width:2vmax;
    height:2px;
    transition: 0.5s ease; 
    transform: translateY(-0.7vmax);
}
.hamburger.X{
    background: black;
    width:2vmax;
    transition: 1s ease; 
    height: 2px;
    transition: 5ms ease; 
    }
.hamburger.X::after{
    content:'';
    transition: 0.5s ease; 
    display: block;
    margin-left: 4%;
    margin-top:-0.1vmax;
    background: white;
    width:2vmax;
    height:2px;
    transform: rotate(43deg);
}
.hamburger.X::before{
    content:'';
    transition: 0.5s ease; 
    display: block;
    background: white;
    width:2vmax;
    height:2px;
    margin-right:15%;
    transform: rotate(-45deg);
}
.nav-bar{
    position:fixed;
    top:-150%;
    list-style-type: none;
    background:rgba(4, 4, 12,0.8);
    width:23vmax;
    min-height:100%;
    z-index: 1;
    transition: 0.2s; 
}
.nav-bar.open{
    margin-top:0%;
    top:0;
}
.nav-bar.open li{
    font-size:3vmax;
    display:block;
    margin-top:1vmax;
}
.nav-bar.open li::after{
    content: '';
    width:0vmax;
    height: 1px;
    background-color: white;
    display:block;
    transform-origin: bottom left;
    transition: 0.1s;
    transform:translate(-0.5vmax, -0.1vmax);
}
.nav-bar.open li:hover:after{
    content: '';
    width:10vmax;
    height: 1px;
    background-color: white;
    display:block;
    transform-origin: bottom right;
    transition: 0.1s;
    transform:translate(1vmax, -0.1vmax);
}
.nav-bar.open ul {
    margin-left:-5vmax;
}

.hamburger-inside-nav{
    background:white;
    opacity:50%;
    width:2vmax;
    padding-bottom:0.3vmin;
    margin-bottom:0.3%;
    border-radius: 19%;
}
@keyframes nav-right {
    0%{    
        margin-left:-10vmax;
    }100%{
        margin-left:8vmax;
        opacity:1;
    }
}
@keyframes down-top {
    0%{
        right:8vmax;
        bottom:0vmax;
        font-size:8vmax;
    }100%{  
    right:8vmax;
    bottom:19vmax;
    font-size:8vmax;
    }
    }
.nav-bar ul li:nth-child(1){
    animation:nav-right 0.5s ease-in-out forwards;
}
.nav-bar ul li:nth-child(2){
    animation:nav-right 0.5s ease-in-out forwards;
    animation-delay:0.1s;
}
.nav-bar ul li:nth-child(3){
    animation:nav-right 0.5s ease-in-out forwards;
    animation-delay:0.2s;
}
.nav-bar ul li:nth-child(4){
    animation:nav-right 1s ease-in-out forwards;
    animation-delay:0.3s;
}
.nav-bar ul li:nth-child(5){
    animation:nav-right s ease-in-out forwards;
    animation-delay:0.4s;
}
.nav-bar ul{
    list-style-type: none;
    top:2px;
    width:35vmax;
    margin-top:10vmax;
}
.nav-bar-social{
    display: flex;
    position: relative;
    flex-direction: row;
    margin-top: 3vmax;
}
.nav-bar-social a{
    height: fit-content;
    transition: 0.2s;
    margin-left:2vmax;
}
.fab{
    transition: 0.2s;
    color:rgb(247, 239, 239);
}
a:hover .fab{
    color:rgb(124, 123, 123);
    border-radius: 10%;
    transition: 0.2s;
}
.nav-bar-social i{
    font-size: 3vmax;
}
.social-media-part{
    margin-top:-5vmax;
}
/* Introduction*/
@keyframes introduction-to-right {
    0%{
        
        
    }100%{
        margin-left:0;
    }
}
@keyframes opacity{
    0%{
opacity: 0;
    }100%{
opacity: 1;
    }
}

.introduction-container{
    margin-left: 10%;
margin-right:10%;
margin-top:3%;
padding-top:20px;
}
#home{
    content:'';
    display:block;
    position:absolute;
}
.hello{
    animation: opacity 1s ;
    font-size:2vmax;
}
.name{
    font-size: 10vmax;
    opacity: 0;
    animation:opacity 1s ease-out forwards;
    animation-delay: 1.6s;
}
.desc{
    font-size:1.5vmax;
    opacity: 0;
    animation:opacity 1s ease-out forwards;
    animation-delay: 2.9s;
}
.bottom-border{
    background-color: white;
    position: absolute;
    bottom:20px;
    width:20vmax;
    height:2mvax;
}


/*  Mega line   */
@keyframes down-to-up{
    0%{
        height:0vmax;
    }100%{
        height:80vmax;
    }
}
.mega-line{
    animation: down-to-up 2s ease-out forwards;
    width:0.1%;
    position:absolute;
    top:20%;
    right:25%;
    background: linear-gradient(58deg, rgb(0, 0, 0) 31%, rgba(111,19,19,1) 49%, rgba(244,132,12,1) 68%);
    z-index: -2;
}
.mega-line-1{
    margin-right:1%;
    margin-top:-2%;
    animation-delay:6s;
}
.mega-line-2{
    margin-right:2%;
    margin-top:-1%;
    animation-delay:6.5s;
}
.mega-line-3{
    margin-right:3%;
    margin-top:-0.5%;
    animation-delay:6.9s;
}
.mega-line-4{
    margin-right:4%;
    margin-top:-1%;
    animation-delay:6.5s;
}
.mega-line-5{
    margin-right:5%;
    margin-top:-2%;
    animation-delay:6s;
}
.mega-line1{
    height:80vmax;
    width:10%;
    position:absolute;
    top:50%;
    right:20%;
    background: linear-gradient(58deg, rgb(0, 0, 0) 31%, rgba(111,19,19,1) 49%, rgba(244,132,12,1) 68%);
    z-index: -2;
}


/* button  */

.buttons{
    margin:5vmax auto 2vmax 1vmax;
    display:flex;

}
.buttons div{
    padding: 0.5vmax 3vmax 0.5vmax 3vmax;
    border:1px solid white;
    margin-left:3vmax;
    border-radius: 30vmax;
    font-size:2vmax;
    transition: 0.2s ease-in-out;
}
.mywork{
    background:white;
    color:black;
    opacity: 0;
    animation:opacity 1s ease-out forwards;
    animation-delay: 4.6s;
}
.contact-button{
    opacity: 0;
    animation:opacity 1s ease-out forwards;
    animation-delay: 4.9s;
}
a:hover .mywork {
    background:black;
}
.buttons div:hover{
    background-color: white;
    transition: 0.2s ease-in-out;
    color:black;
}
.social-media-container{
    margin-left:3vmax;
    position:relative;
    animation-delay:0.5s;
    opacity: 0;
    animation:opacity 1s ease-out forwards;
    animation-delay: 4.9s;
}
.social-media-container i{
    font-size:2.6vmax;
    margin-left:3vmax;
    padding:0.5vmax 0.5vmax 0.5vmax 0.5vmax;
}



/*  My work  */



.my-work{
    position: relative;
}
.website-name-and-desc{
    margin-top:-10%;
    
}
.website-name-and-desc h4{
    font-size:5vmax;
}

.sample-and-desc{
    display: flex;
    margin-left:10%;
    margin-right:10%;
    margin-top:-5%;
}
.website-desc-container{
    width:100vmax;
    position: relative;
    margin-top:10vmax;
}
.website-desc-container p{
    font-size: 1.2vmax;
    color:white;
}
.website-desc-container h4{
    font-size:40px;
    color:white;
}
.sample-img2{
    width:100%;
    margin-top:10vmax;
    -moz-box-shadow: 17px 12px 22px 6px rgba(0, 0, 0, 0.72);
    -webkit-box-shadow: 17px 12px 22px 6px rgba(0, 0, 0, 0.72);
    -ms-box-shadow: 17px 12px 22px 6px rgba(0, 0, 0, 0.72);
    box-shadow: 17px 12px 22px 6px rgba(0, 0, 0, 0.72);
}
.sample-img-container{
    position:relative;   
}
.diamond-casino{
    margin-top:20%;
}
.to-link{
    text-align: right;
    font-size:2vmax;
}
.to-link-container{
    position: relative;
    display: inline-block;
    float: right;
}
.to-link-container::after{
    content:'';
    display: block;
    margin-top:-0.5vmax;
    transform:scale(0);
    background-color: white;
    height: 1.8px;
    transition: transform 0.2s ease-out;
    transform-origin: bottom right;
}
.to-link-container:hover::after{
    transform: scale(1);
    transform-origin: bottom left;
}
.my-website-wrapper{
    display:flex;
    flex-direction: column;
    grid-template-columns: 1fr; 
}
.my-website-container{
    position: relative;
}
.my-website-background{
    height: 23vmax;
    width:100%;
    position: absolute;
    z-index: -1;
    left:0;
    top:1vmax;
    background:rgba(46, 165, 139, 0.459);
    -webkit-box-shadow: inset -1px 0px 11px 5px #000000; 
    box-shadow: inset -1px 0px 11px 5px #000000;
}
.website-img{
    width:70%;
    margin-left:10%;
}
.website-img-background{
    position:absolute;
    bottom:30%;
    left:10%;
    width:50%;
    height:40%;
    filter:blur(70px);
    z-index: -1;
    pointer-events: none;
}
.diamond-casino-container{
    position: relative;
    display: flex;
    margin-top:10vmax;
    
}
.diamond-casino-img{
    width:80%;
    height: inherit;
    z-index: -3;
    margin-top:-23vmax;
    margin-left:12vmax; 
    z-index: 2;
    -moz-box-shadow: 17px 12px 22px 6px rgba(0, 0, 0, 0.72);
    -webkit-box-shadow: 17px 12px 22px 6px rgba(0, 0, 0, 0.72);
    -ms-box-shadow: 17px 12px 22px 6px rgba(0, 0, 0, 0.72);
    box-shadow: 17px 12px 22px 6px rgba(0, 0, 0, 0.72);
}
.diamond-casino-background{
    width:100%;
    position: absolute;
    height: 50vmax;
    top:0;
    background-color: rgb(124, 24, 155);
    z-index: -2;
    opacity:40%;
    clip-path: polygon(0% 0%, 100% 21%, 100% 50%, 100% 81%, 0% 100%);
    -webkit-box-shadow: inset 13px 8px 48px 13px #000000; 
    box-shadow: inset 13px 8px 48px 13px #000000;
}
.website-desc-container-right{
    width:100vmax;
    z-index: 1;
    margin-top:12vmax;
    font-size:1.2vmax;
    margin-right:10%;
    margin-left:10%;
    z-index: 3;
}
.website-desc-container-right h4{
    font-size:5vmax;
}
.to-link-diamond{
    float: right;
    margin-top:3vmax;
    font-size: 2vmax;
    display: inline-block;
}
.to-link-diamond::after{
    content: '';
    display: block;
    height: 2px;
    margin-top:-0.4vmax;
    background-color: white;
    transition: transform 0.2s ease-out;
    transform: scale(0);
    transform-origin: bottom right;
}
.to-link-diamond:hover:after{
    transform:scale(1);
    transform-origin: bottom left;
}

/*  ABOUT ME  */


.about-me-container{
    margin-top:30vmax;
}
.about-me-label{
    font-size:5vmax;
}
.about-me-desc{
    margin:40vmax 15% 5vmax 15%;
    font-size:1.2vmax;
}
.known-language{
   display: flex;
   flex-wrap: wrap;
   flex-direction: row-reverse;
}
.languages-container{
    position: relative;
    margin: 6vmax 5vmax 10vmax -6vmax;
}
.languages-background{
    background-color: rgb(174, 229, 255);
    opacity: 70%;
    width:100%;
    height: 20vmax;
    position:absolute;
    z-index: -2;
}
.known-language-description{
    color: black;
    font-size: 2.5vmax;
    width:30vmax;
    margin-right:25vmax;
    margin-top:3vmax;
}
.known-language-description span{
    color: black;
    font-size: 6vmax;
}
.clipart-container{
    position: relative;
    margin-left:-8vmax;
    margin-top:-5vmax;
}
.known-language i{
    font-size:8vmax;
    color:black;
    background:white;
    width:10vmax;
    height: 15vmax;
    border-radius: 0.5vmax;
    padding:1vmax 1vmax 0 1vmax;
    text-align: center;
    margin:2vmax 5vmax 2vmax 5vmax;
    -moz-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.67);
-webkit-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.67);
-ms-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.67);
box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.67);
}
.known-language .fa-html5{
    background-color: rgba(255, 38, 0, 0.808);
    color:white;
}
.known-language .fa-css3-alt{
    background-color: rgba(27, 32, 109, 0.644);
    color:white;
}
.known-language .fa-js-square{
    background-color: rgb(231, 210, 16);
    color:white;
}
.known-language-name{
    opacity:1;
    position: absolute;
    top:15vmax;
    left:7.5vmax;
    color: black;
    text-align: center;
    transform:translateY(-2vmax);
    transition:0.5s;
    font-size:2vmax;
    pointer-events:none;
}
.css{
    left:8.2vmax;
}
.javascript{
    left:5.8vmax;
}
.programs-wrapper{
    position: relative;
}
.programs-img{
    right:0;
    width: 14vmax;  
    position: absolute;
    border-radius: 100%;
    -webkit-box-shadow: 19px 8px 44px 5px #000000; 
    box-shadow: 19px 8px 44px 5px #000000;
}
.programs-img1{
    top:8vmax;
    left:5%;
}
.programs-img2{
    left:13vmax;
    top:4vmax;
}
.programs-img3{
    left:5vmax;
}
.programs-container{
    margin-left:10%; 
    position: relative;
}
.programs-label{
    margin-left:15%;
    position: absolute;
    left:23%;
    bottom:5vmax;
    font-size:2vmax;
}
.this-website-link:hover{
    text-decoration: underline;
}
.programs-desc{
    position: absolute;
    right:0;
font-size: 10vmax;
margin-top:10vmax;
margin-right: 15vmax;
font-family: 'Great Vibes', cursive;
color: rgb(252, 206, 0);
text-shadow: 3px 5px 2px #474747;
}
.programs-background{
    background-color: rgb(255, 255, 255);
    width:100%;
    height:10vmax;
    z-index: -1;
    position: absolute;
    top:8vmax;
    -webkit-box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -34px 40px -30px rgba(0,0,0,0); 
box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -34px 40px -30px rgba(0,0,0,0);
}


/*  Contacts    */

.contact{
    display:flex;
    justify-content: space-evenly;
    font-size: 2vmax;
    margin-bottom:3vmax;
    margin-top:-9vmax;
}
.contact div{
    padding:3vmax;
}
.contact-link{
    margin-left:1vmax;
}
.contact-divider{
    background:white;
    clip-path: polygon(0 49%, 47% 0, 100% 47%, 48% 100%);
}
.contact-social-media{
    display: flex;
}
.contact-social-media i{
margin-bottom:1vmax;
margin-top:2vmax;
font-size: 2vmax;
}
.resume{
    margin-left:6vmax;
    border: white 2px solid;
    padding: 0.5vmax;
    border-radius: 50px;
    z-index: 2;
    transition: 0.2s;
    position: absolute;
    left:16vmax;
    top:-5vmax;
}
.resume:hover{
    background-color: white;
    color: black;
}
.email-hover::after{
    content: '';
    display: block;
    height: 0.1vmax;
    background: white;
    transition: transform 0.2s;   
    transform: scale(0);
}
.email-hover:hover:after{
    transform: scale(1);
}
.resume-and-social{
    display:flex;
}
.resume-and-social a{
    margin-top:-2vmax;
}
.email{
    padding-left:5vmax;
    margin-top:-3vmax;
}
.blog-body{
    margin:7vmax;
    padding:5vmax;
}
.the-great-separator{
    height: 15vmax;
    margin-left: 6vmax;
    margin-right: -6vmax;
    background: white;
    width: 10vmax;
    clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
}


/*      RESPONSI)VE   */

        /*Tablet*/

@media screen and (max-width:995px) and (min-width:426px) {
    .my-website-background{
        height: 40vmax;
    }
    .website-desc-container p{
        font-size:1.2vmax;
    }
    .sample-img2{
        width:100%;
    }
    .resume-and-social{
    }
    .mega-line{
        width:1px;
    }
    .name{
        font-size: 9vmax;
    }
    .introduction-container{
        margin-top:25vmax;
        margin-bottom:30vmax;
    }
    
/*  about me desc */

.known-language-description{
    left: 5vmax;
    width:20vmax;
    margin-left:12vmax;
    position:block;
    font-size: 2vmax 1vmin;
}
}


/*Mobiel*/


@media  screen and (max-width:793px) and (min-width:0) {
    .my-image{
        width:50%;
    }
    .name{
        font-size: 7vmax;
    }
    .introduction-container{
        margin-top:20vmax;
        margin-bottom:35vmax;
    }
    .mega-line-1{
        margin-right:1%;
    }
    .mega-line-2{
        margin-right:2.5%;
    }
    .mega-line-3{
        margin-right:4%;
    }
    .mega-line-4{
        margin-right:5.4%;
    }
    .mega-line-5{
        margin-right:7%;
    }

    
    
    /*  My work - websites */
    
    
    h2{
        font-size:5vmax;
    }
    .my-website-container{
        display: block;
    }
    .website-desc-container{
        position: absolute;
        width:90%;
        top:70%;
        text-align: center;
        left:5%;
    }
    .my-website-container p{
        font-size:2vmax;
    }
    .my-website-container h4{
        font-size: 4vmax;
    }
    .sample-img2{
        width:120%;
        margin-left:-15.5%;
    }
    .diamond-casino-img{
        position: absolute;
        width:90%;
        left:-15.5%;
        height: inherit;
    }
    .diamond-casino-container{        
        margin-top:50%;
        margin-bottom: 30%;;
    }
    .my-website-background{
        height: 135%;
    }
    .diamond-casino-background{
        top:65%;
    }
    .website-desc-container-right{
        z-index: 2;
        font-size:2vmax;
        margin-top:200%;
        margin-right:10%;
    }

    /* About me  */
    .languages-container{
        display: block;
        margin-right: auto;
        margin-left: auto;
    }
    .known-language-description{
        width:100%;
        position: block;
        text-align: center;
        margin-top:-5vmax;
        margin-left:auto;
        margin-right:10vmax;
    }
    .known-language-description span{
        color:white;
    }
    .known-language{
        margin-left:8vmax;
    }
    .languages-background{
        background-color: white;
        opacity: 100%;
        -webkit-box-shadow: inset 5px 5px 50px 5px rgba(0,0,0,0.34); 
    box-shadow: inset 5px 5px 50px 5px rgba(0,0,0,0.34);
    }
    .the-great-separator{
        display: none;
    }
    .resume-and-social{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .resume{
        margin-bottom:5vmax;
        position: block;
    }
    .resume-and-social .nav-bar-social{
        margin:inherit;
        position: block;
        margin-top:5vmax;
        margin-left:-10vmax;

    }
@media  screen and (max-width:385px) and (min-width:0px) {
    .my-image{
        width:100%;
    }
    h1{
        font-size: 5vmax;
    }
    .buttons{
        margin-left:-10%;
    }
    .social-media-container{
        margin-left:1%;
    }
    .my-website-background{
        height: 130%;
    }
    .website-desc-container{
        top:60%;
    }
    .diamond-casino-img{
        left:-20%;
    }
    
    /*  Lanuages I know  */

    .languages-container{
        width:5vmax;
        margin-left:-2rem;    
    }
    .known-language-description{
        font-size:2vmax;
        margin-left:1vmax;
        margin-right:10vmax;
}   
.programs-img{
    width:10vmax;
}
    .programs-img1{
        top:20vmax;
        left:3vmax;
    }
    .programs-img2{
        top:20vmax;
        left:10vmax;
    }
    .programs-img3{
        top:20vmax;
        left:18vmax;
    }
    .programs-desc{
        right:-5vmax;
        left:8vmax;
    }
    .about-me-desc{
        font-size: 2vmax;
    }
    .programs-desc span{
        position: absolute;
        top:5vmax;
        z-index: -1;
    }
@media  screen and (max-width:320px) and (min-width:0) {
    .mywork{
      font-size: smaller;
    }
    .programs-desc span{
        position: absolute;
        top:5vmax;
        z-index: -1;
    }
    .diamond-casino-img{
        width:90%;
        margin-left:10vmax;
    }
}}}