:root{
    --project-width: 512px;
    --project-height: 288px;
    --overlayMargin-top: 42%;

    --font-size-projectname: 27px;
    --font-size-roles: 19px;
    --font-size-info: 16px;
    --font-size-category: 17px;

    --animation-speed-fast:0.4;
    --animation-speed-fast-s:0.4s;
    --animation-speed-veryfast:0.3;
    --animation-speed-veryfast-s:0.3s;
    --animation-speed-slow:1.2;
    --animation-speed-slow-s:1.2s;

    --project-border-size: 1px;

    --siteGreen: #86C232;
}
.project-box {
    grid-column: 1/3;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
    justify-content: center;
    margin-bottom: 100px;
}
.project{
    position: relative;
    flex-basis: var(--project-width);
    cursor: pointer;
    
    margin: 12px;
    border: var(--project-border-size) solid #222;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
}
.project::before{
    content: '';
    display: block;
    padding-top: calc(var(--project-height) - var(--project-border-size) * 2);
}
.project-content{
    position: absolute;
    top: 0%; left: 0%;
    height: 100%;
    width: 100%;

    font-family: 'Abel';
    text-align: center;
    color:#ddd;
}

a.projectLink{
    position: absolute;
    top: 0%; left: 0%;
    width:100%;
    height: 100%;

    cursor: pointer;
    z-index: 1000;
}

.blurImage{
    position: absolute;
    background-repeat: no-repeat;

    height: 100%;
    width: 100%;

    background-clip: content-box;
    padding-top:42%;
    background-size: 100%;

    opacity: 1;

    -webkit-filter: blur(4px) brightness(60%);
    -moz-filter: blur(4px) brightness(60%);
    -o-filter: blur(4px) brightness(60%);
    -ms-filter: blur(4px) brightness(60%);
    filter: blur(4px) brightness(60%);
    
    /*-webkit-transition: padding-top var(--animation-speed-fast); 
    -moz-transition: padding-top var(--animation-speed-fast-s);
    transition: padding-top var(--animation-speed-fast-s);*/
    -webkit-transition: all var(--animation-speed-fast-s) ease; 
    -moz-transition: all var(--animation-speed-fast-s) ease;
    transition: all var(--animation-speed-fast-s) ease;
}
.blurImage.focus{
    padding-top:0%;

    -webkit-filter: blur(2px) brightness(10%);
    -moz-filter: blur(2px) brightness(10%);
    -o-filter: blur(2px) brightness(10%);
    -ms-filter: blur(2px) brightness(10%);
    filter: blur(2px) brightness(10%);

    /*-webkit-transition: padding-top var(--animation-speed-fast); 
    -moz-transition: padding-top var(--animation-speed-fast-s);
    transition: padding-top var(--animation-speed-fast-s);*/
    -webkit-transition: all var(--animation-speed-fast-s) ease; 
    -moz-transition: all var(--animation-speed-fast-s) ease;
    transition: all var(--animation-speed-fast-s) ease;
}
.textholder
{
    position: absolute;
    z-index: 10;
    background: linear-gradient(rgba(40, 40, 40, 0.5) 0%, rgba(25, 25, 25, 0.5) 100%);
    margin-top:var(--overlayMargin-top);
    width: 100%;
    height: 100%;
    overflow: hidden;

    -webkit-transition: height var(--animation-speed-fast), margin-top var(--animation-speed-fast); 
    -moz-transition: height var(--animation-speed-fast-s), margin-top var(--animation-speed-fast-s);
    transition: height var(--animation-speed-fast-s), margin-top var(--animation-speed-fast-s);
}
.textholder.focus{
    margin-top:0%;

    -webkit-transition: height var(--animation-speed-fast), margin-top var(--animation-speed-fast); 
    -moz-transition: height var(--animation-speed-fast-s), margin-top var(--animation-speed-fast-s);
    transition: height var(--animation-speed-fast-s), margin-top var(--animation-speed-fast-s);
}
.project-name {
    font-size: var(--font-size-projectname);
    margin-top: 1%;
    width: 100%;

    -webkit-transition: margin-top var(--animation-speed-fast); 
    -moz-transition: margin-top var(--animation-speed-fast-s);
    transition: margin-top var(--animation-speed-fast-s);
}
.project-name.focus{
    margin-top: 9%;
    -webkit-transition: margin-top var(--animation-speed-fast); 
    -moz-transition: margin-top var(--animation-speed-fast-s);
    transition: margin-top var(--animation-speed-fast-s);
}
.roles {
    font-size: var(--font-size-roles);
    width: 100%;
    
}
.roles.focus{
    color: var(--siteGreen);
}
.line{
    margin-top: 3%;
    border-bottom: 1px solid #ddd;
    
    width: 0%;
    margin-left: 50%;

    -webkit-transition: width var(--animation-speed-slow), margin-left var(--animation-speed-slow); 
    -moz-transition: width var(--animation-speed-slow-s), margin-left var(--animation-speed-slow-s);
    transition: width var(--animation-speed-slow-s), margin-left var(--animation-speed-slow-s);
}
.line.focus{
    width: 80%;
    margin-left: 10%;

    -webkit-transition: width var(--animation-speed-slow), margin-left var(--animation-speed-slow); 
    -moz-transition: width var(--animation-speed-slow-s), margin-left var(--animation-speed-slow-s);
    transition: width var(--animation-speed-slow-s), margin-left var(--animation-speed-slow-s);
}
.info{
    font-size: var(--font-size-info);
    width: 100%;
    margin-top: 3%;
}

.category{
    width: 20%;
    height: 9%;
    font-size: var(--font-size-category);
    background: linear-gradient(90deg, rgba(35, 35, 35, 0.7) 40%, rgba(35, 35, 35, 0.5) 80%, rgba(35, 35, 35, 0) 100%);

    -webkit-transition: opacity var(--animation-speed-veryfast); 
    -moz-transition: opacity var(--animation-speed-veryfast-s);
    transition: opacity var(--animation-speed-veryfast-s);
}
.category.focus{
    opacity: 0;

    -webkit-transition: opacity var(--animation-speed-veryfast); 
    -moz-transition: opacity var(--animation-speed-veryfast-s);
    transition: opacity var(--animation-speed-veryfast-s);
}

/* If the screen size is 600px wide or less*/
@media only screen and (max-width: 1090px) 
{
    :root{
        --project-width: 384px;
        --project-height: 216px;
        
        --overlayMargin-top: 42%;
    
        --font-size-projectname: 20px;
        --font-size-roles: 15px;
        --font-size-info: 14px;
        --font-size-category: 13px;

    }
}

@media only screen and (max-width: 833px) 
{
    :root{
        --project-width: 300px;
        --project-height: 168.75px;
        
        --overlayMargin-top: 38%;
    
        --font-size-projectname: 20px;
        --font-size-roles: 15px;
        --font-size-info: 10px;
        --font-size-category: 13px;

    }
}

@media only screen and (max-width: 395px) 
{
    :root{
        --project-width: 290px;
        --project-height: 163.1px;

    }
}