/*
    Auteur: Pepijn Emmers 
    Aanmaakdatum: 14-12-2020

    Homepagina portfolio
*/

/* --- laadscherm met animatie --- */
#loadingScreen
{
    background-color: #242424;
    cursor: progress;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 999;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    animation: closeScreen 1s linear forwards 4.5s;
}
#loadinName
{
    width: 90%;
    animation: closeScreen 1s linear forwards 4s;
}
#loadinName path:nth-child(1)
{
    stroke-dasharray: 572.8px;
    stroke-dashoffset: 572.8px;
    animation: outlinePath 1s ease forwards;
}
#loadinName path:nth-child(2)
{
    stroke-dasharray: 585px;
    stroke-dashoffset: 585px;
    animation: outlinePath 1s ease forwards 0.2s;
}
#loadinName path:nth-child(3)
{
    stroke-dasharray: 572.8px;
    stroke-dashoffset: 572.8px;
    animation: outlinePath 1s ease forwards 0.4s;
}
#loadinName path:nth-child(4)
{
    stroke-dasharray: 276.8px;
    stroke-dashoffset: 276.8px;
    animation: outlinePath 1s ease forwards 0.6s;
}
#loadinName path:nth-child(5)
{
    stroke-dasharray: 389.1px;
    stroke-dashoffset: 389.1px;
    animation: outlinePath 1s ease forwards 0.8s;
}
#loadinName path:nth-child(6)
{
    stroke-dasharray: 766.8px;
    stroke-dashoffset: 766.8px;
    animation: outlinePath 1s ease forwards 1s;
}
#loadinName path:nth-child(7)
{
    stroke-dasharray: 585px;
    stroke-dashoffset: 585px;
    animation: outlinePath 1s ease forwards 1.2s;
}
#loadinName path:nth-child(8)
{
    stroke-dasharray: 960.3px;
    stroke-dashoffset: 960.3px;
    animation: outlinePath 1s ease forwards 1.4s;
}
#loadinName path:nth-child(9)
{
    stroke-dasharray: 960.3px;
    stroke-dashoffset: 960.3px;
    animation: outlinePath 1s ease forwards 1.6s;
}
#loadinName path:nth-child(10)
{
    stroke-dasharray: 585px;
    stroke-dashoffset: 585px;
    animation: outlinePath 1s ease forwards 1.8s;
   
}
#loadinName path:nth-child(11)
{
    stroke-dasharray: 699.9px;
    stroke-dashoffset: 699.9px;
    animation: outlinePath 1s ease forwards 2s;
    
}
#loadinName path:nth-child(12)
{
    stroke-dasharray: 622.3px;
    stroke-dashoffset: 622.3px;
    animation: outlinePath 1s ease forwards 2.2s;
}
/* --- animatie loading dots --- */
#loadingScreen h2
{
    position: fixed;
    bottom: 10px;
    color: #ffee00;
    font-size: 22px;
    animation: closeScreen 1s linear forwards 4s;
}
.dots
{
    position: relative;
}
.dots:nth-child(1)
{
    animation: loadingDots 1.5s linear 10;
}
.dots:nth-child(2)
{
    animation: loadingDots 1.5s linear 0.3s 10;
}
.dots:nth-child(3)
{
    animation: loadingDots 1.5s linear 0.6s 10;
}
/* animaties aanmaken */
@keyframes outlinePath
{
    to{
        stroke-dashoffset: 0px;
    }
}
@keyframes closeScreen
{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
        pointer-events: none;
        z-index: -1;
    }
}
@keyframes loadingDots
{
    0%, 40%, 60%, 80%, 100%{
        bottom: 0;
    }
    20%{
        bottom: 5px;
    }
}
#skiploading
{
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
}

/* --- main styling --- */
main
{
    width: calc(100% - 40px);
    height: auto;
    padding-bottom: 250px;
}
#homeContent
{
    width: 60%;
    float: left;
}
#homeImage
{
    width: 30%;
    float: left;
    margin: 100px 0 0 50px;
}
#homeImage > img
{
    height: 650px;
    transition: 0.5s;
    -webkit-filter: drop-shadow(0px 0px 5px #121212);
    filter: drop-shadow(0px 0px 5px #121212);
}
#homeImage > img:hover
{
    transform: rotate(1.5deg) scale(1.05);
    -webkit-filter: drop-shadow(5px 5px 5px #121212);
    filter: drop-shadow(5px 5px 5px #121212);
}
h1
{
    margin-top: 0;
    text-decoration: none;
}
#firstPar::first-letter
{
    font-size: 1.5em;
    font-weight: bold;
}
.noWrap
{
    white-space: nowrap;
}
#homeContent > #content a
{
    color: #fff;
}
#naarCV, #contactButton
{
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    background-color: #ffee00;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    margin-top: 10px;
}
#naarCV:hover, #contactButton:hover
{
    background-color: #ffbe0d;
    text-decoration: underline;
}
#naarCV
{
    height: 45px;
    width: 240px;
    margin-right: 20px;
}
#contactButton
{
    height: 45px;
    width: 130px;
}

/*  --- homepage footer/engelse vlag --- */
#homeFooter
{
    position: fixed;
    right: 10px;
    bottom: 10px;
}
#homeFooter img
{
    height: 35px;
    border: 1px solid #000;
    cursor: pointer;
    transition: 0.5s;
    position: relative;
    right: 0px;
    bottom: 0px;
}
#homeFooter:hover img
{
    transform: scale(2, 2);
    position: relative;
    right: 40px;
    bottom: 15px;
}

/* ----- TELEFOON PORTRAIT ----- */
@media screen and (max-width: 1340px) 
{
    #homeContent
    {
        width: 100%;
        float: none;
    }
    #homeImage
    {
        width: 100%;
        margin: 20px 0;
    }
    #homeImage > img
    {
        height: 400px;
        width: auto;
    }
    #homeFooter img
    {
        height: 30px;
        width: auto;  
    }
}