* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html:has(.visitekaartje) {
   height: 100vh;
}


/* achtergrond streepjes */
body {
    background-color: 9FB0D3;
    background-image: url(streepjes-achtegrond-visitekaartje..png);
}


/* animtie die zorgt dat het visitekaartje een rondje draait */
.visitekaartje:hover {
    animation: rotateImage 2s infinite;

    /* wanneer iemand in zijn instellingen 'vermindering beweging' aan heeft staan komt er geen animatie */
    @media (prefers-reduced-motion: reduce) {
    animation: none;
} 
}


@keyframes rotateImage {
    0% {
        transform: rotate3d(0, 0, 0, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}


body:has(.visitekaartje) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


/* het hele witte kaartje */
article.visitekaartje {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    width: 22em;
    height: 33em;
    background-color: #e9e8e8;
    box-shadow: 0 0 20px 20px rgba(0,0,0,.1);
    transition: .25s;
}


/* foto van mij */ 
.visitekaartje-img {
    position:absolute;
    object-fit: cover;
    top: 25px;
    width: 300px;
    height: 180px;
    border: 3px solid #9FB0D3;
    transition: .25s .15s;
    margin-left: 25px;
}


h1 {
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    margin-top: 7.4em;
    font-size: 1.6em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.fdnd-student {
    text-align:center;
    font-style: italic;
    background-color: #9FB0D3;
    margin: 1em 7em 0em 7em;
    padding: 0.4em 0em 0.4em 0em;
    border: 5px solid #9FB0D3;

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

    /* geeft aan welke kleur/dikte de outline is wanneer iemand tabt */
    a:focus {
      outline: 3px solid #f33715;
      outline-offset: 4px;
    }

    &:hover {
        background-color: transparent;
        border: 5px solid #9FB0D3;
    }
}


.tekst {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 1.2em 1em 0em 1em;
}


.rij-blokjes {
    display: flex;
    justify-content: space-around;
    margin-top: 1em;
    margin-left: 1.3em;
    margin-right: 1.3em;
}


.rij-skills {
    margin: 2em 3.5em 0em 3.5em;
}


/* animatie blokjes */
.blokjes {
    border: 5px solid #9FB0D3;
    padding: 0.4em;

    animation-name: fallFromTop;
    transform: translateY(-100vh); 
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;

    /* wanneer iemand in zijn instellingen 'vermindering beweging' aan heeft staan komt er geen animatie */
    @media (prefers-reduced-motion: reduce) {
      transform: translateY(0); 
      animation-name: none;
      animation-duration: none;
      animation-iteration-count: none;
      animation-timing-function: ease-in none;
      animation-fill-mode: none;
    }
}


@keyframes fallFromTop {
  0% {
    transform: translateY(-100vh);
  }
  70% {
    transform: translateY(0);
        background-color: rgb(255, 223, 186);
  }
  85% {
    transform: translateY(-40px); /* - zorgt ervoor dat blokje weer terug omhoog bounct */
        background-color: rgb(243, 206, 254);
  }
  95% {
    transform: translateY(0px);
        background-color: rgb(217, 232, 255);
  }
  100% {
    transform: translateY(0);
  }
}


/* zorgt voor vertraging */
.creatief { animation-delay: 0.5s; } 
.sociaal { animation-delay: 1s; } 
.behulpzaam { animation-delay: 1.5s; } 
.javasript { animation-delay: 2s; }  
.html { animation-delay: 2.5s; }  
.css { animation-delay: 3s; }