/*
    Auteur: Pepijn Emmers 
    Aanmaakdatum: 3-1-2021

    stylesheet werkervaring pagina
*/
main
{
    min-height: 80vh;
}
/* --- stylen van section inhoud --- */
section
{
    margin: 40px 0;
}
#blauwEtenContent
{
    width: 57%;
    height: auto;
    position: relative;
    left: 0;
    animation: floatInToRight 0.3s linear;
}
#workImg
{
    width: 40%;
    height: auto;
    float: right;
    margin-right: 10px;
    position: relative;
    right: 0;
    animation: floatToLeft 0.3s linear;
}
#workImg img
{
    width: 100%;
    height: auto;
}
#workImg figure
{
    margin: 0;
}
#workImg figcaption
{
    font-style: italic;
}
/* animation */
@keyframes floatInToRight
{
    from{
        left: 350px;
        opacity: 0.6;
    }
    to{
        left: 0;
        opacity: 1;
    }
}
@keyframes floatToLeft
{
    from{
        right: 350px;
        opacity: 0.6;
    }
    to{
        right: 0;
        opacity: 1;
    }
}
@keyframes floatInToTop
{
    from{
        bottom: 350px;
        opacity: 0.6;
    }
    to{
        bottom: 0;
        opacity: 1;
    }
}
@keyframes floatToBottom
{
    from{
        top: 350px;
        opacity: 0.6;
    }
    to{
        top: 0;
        opacity: 1;
    }
}

/* --- knop voor site openen --- */
.openSiteButton
{
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 250px;
    height: 50px;
    margin-top: 10px;
    
    background-color: #ffee00;
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
.openSiteButton:hover
{
    text-decoration: underline;
}

/* --- responsive --- */
@media screen and (max-width: 1100px)
{
    #workImg
    {
        width: 50%;
    }
    #blauwEtenContent
    {
        width: 46%;
    }
}

/* ----- TELEFOON PORTRAIT ----- */
@media screen and (max-width: 950px)
{
    #blauwEtenContent
    {
        width: 100%;
    }
    #workImg
    {
        width: 100%;
    }
    #workImg figcaption
    {
        display: none;
    }
}