/*
File: style.css
Author: Gijs de Jong
*/

body {
    background-color : #fff;
}

#wrapper {
    font-family      : "Open-Sans", sans-serif;

    width            : 100%;
    height           : 100vh;

    background-color : #222;
}

/*---------------------------------------------------------------------------------------------------*/

#loadingcontainer {
    font-family      : "Montserrat", sans-serif;
    font-size        : 7em;
    font-weight      : 700;
    line-height      : 120px;

    position         : absolute;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;

    width            : 100%;
    width            : calc(100% - 24px);
    height           : 100vh;
    height           : calc(100% - 24px);
    margin           : auto;

    text-align       : center;

    color            : #fff;
    background-color : #222;

    border           : 12px solid #fff;
}

.loadingicon {
    position : absolute;
    top      : 0;
    right    : 0;
    bottom   : 0;
    left     : 0;

    width    : 120px;
    height   : 120px;
    margin   : auto;
}

.animationborder {
    position           : absolute;
    top                : 0;
    right              : 0;
    bottom             : 0;
    left               : 0;

    width              : calc(100% - 12px);
    height             : calc(100% - 12px);
    margin             : auto;

    -webkit-transition : 0.3s; /*0.3 of 0.2 voor ander effect*/
    transition         : 0.3s;

    border             : 6px solid #222;

    border-image-slice : 1;
}

.puzzle {
    position           : absolute;
    top                : auto;
    right              : 20px;
    bottom             : 20px;
    left               : auto;

    width              : 44px;
    height             : auto;
    margin             : auto;
    -webkit-transition : 0.3s;
    transition         : 0.3s;
    opacity            : 0;

    cursor             : pointer;

    /*background: linear-gradient(-45deg, #1f6aff, #72c5ff, #dfacff, #c124ff);*/
    /*animation: Gradient 15s ease infinite;*/
}

.puzzle:hover {
    opacity            : 1;
    -webkit-transition : ease-in 1s;
    transition         : ease-in 1s;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

/*---------------------------------------------------------------------------------------------------*/

#start {
    position         : absolute;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;

    display          : none;

    width            : calc(100% - 12px);
    height           : calc(100% - 12px);
    margin           : auto;

    background-color : #fff;
    border           : 6px solid #222;
}

.textcontainer {
    position   : absolute;
    top        : 0;
    right      : 0;
    bottom     : 0;
    left       : 0;

    width      : 522px;
    height     : 240px;
    margin     : auto;

    text-align : center;

    color      : #222;
}

.title {
    font-family        : "Inconsolata", monospace;
    font-size          : 5em;
    font-weight        : 700;

    -webkit-transition : 0.3s;
    transition         : 0.3s;
}

#start .title {
    margin-top         : 40px;
}

.name {
    -webkit-transition : 0.3s;
    transition         : 0.3s;
}

.subtitle {
    font-family        : "Merriweather", serif;
    font-size          : 1.2em;
    font-style         : italic;

    margin-top         : 45px;
    margin-bottom      : 35px;

    -webkit-transition : 0.3s;
    transition         : 0.3s;

    opacity            : 0;
}

.nerd, .stuff {
    font-weight        : 700;

    -webkit-transition : 0.3s;
    transition         : 0.3s;
}

.portfoliobutton {
    font-family        : "Inconsolata", monospace;
    font-size          : 1.2em;
    font-weight        : 700;
    line-height        : 60px;

    width              : 200px;
    height             : 60px;
    margin             : 55px auto 0 auto;

    cursor             : pointer;
    -webkit-transition : 0.3s;
    transition         : 0.3s;

    opacity            : 0;
    border             : 4px solid #222;
    background-color   : #fff;
}

/*---------------------------------------------------------------------------------------------------*/

#work {
    position         : absolute;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;

    display          : none;

    width            : calc(100% - 12px);
    height           : calc(100% - 12px);
    margin           : auto;

    background-color : #fff;
    border           : 6px solid #222;
}

.item-container {
    position         : absolute;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;

    width            : calc(100% - 60px);
    height           : calc(100% - 60px);
    margin           : auto;

    background-color : #fff;
}

.contenttitle {
    font-family : "Inconsolata", monospace;
    font-size   : 5em;
    font-weight : 700;

    margin-top  : 60px;

    opacity     : 0;
}

.contentsubtitle {
    font-family : "Merriweather", serif;
    font-size   : 1.2em;
    font-style  : italic;

    margin-top  : 30px;

    opacity     : 0;
}

#content {
    width            : 80vw;
    height           : auto;
    margin           : 12px auto 0 auto;

    background-color : #fff;
}

.item {
    position           : relative;

    display            : inline-block;

    width              : 640px;
    height             : 360px;
    margin             : 1%;

    cursor             : pointer;
    -webkit-transition : 0.3s;
    transition         : 0.3s;

    opacity            : 0;
}

.itemimg {
    width  : 100%;
    height : 100%;
}

.itemborder {
    position           : absolute;
    z-index            : 1;
    top                : 0;
    left               : 0;

    width              : 598px;
    height             : 318px;
    margin             : 15px;

    -webkit-transition : 0.3s;
    transition         : 0.3s;

    border             : 6px solid transparent;
}

.itemtextcontainer {
    position           : absolute;
    top                : 0;
    left               : 0;

    width              : 640px;
    height             : 360px;

    -webkit-transition : 0.3s;
    transition         : 0.3s;
    text-align         : center;

    opacity            : 0;
    background-color   : rgba(0, 0, 0, 0.65);
}

.itemtextcenter {
    position : absolute;
    top      : 0;
    right    : 0;
    bottom   : 0;
    left     : 0;

    width    : 100%;
    height   : 54px;
    margin   : auto;

    color    : #fff;
}

.itemtitle {
    font-family   : "Montserrat", sans-serif;
    font-size     : 1.4em;
    font-weight   : 700;

    margin-bottom : 8px;
}

.itemdesc {
    font-family : "Merriweather", serif;
    font-size   : 1.2em;
    font-style  : italic;
}

/*---------------------------------------------------------------------------------------------------*/

#footer {
    position         : relative;

    display          : none;

    width            : 100%;
    height           : 300px;

    background-color : #222;
}