@font-face {
    font-family: Meccanica;
    src: url(assets/Meccanica-Regular.woff);
}
@keyframes fadein {
    0%      {
                opacity: 0;
                /* -webkit-transform: translateY(10px);
                -ms-transform: translateY(10px);
                transform: translateY(10px); */
            }

    100%    {
                opacity: 1;
                /* -webkit-transform: translateY(-10px);
                -ms-transform: translateY(-10px);
                transform: translateY(-10px); */
            }
}
:root {
    --transulcent-white: rgba(255, 255, 255, 0.6);
    --grey-o: rgba(243, 243, 237, 0.6);
    --grey-15: rgb(15, 15, 15);
    --borderblend: rgb(0, 0, 0);
    --sky-40: rgb(92, 131, 131);
    --sky-60: rgb(146, 180, 180);
    --sky-80: rgb(198, 218, 218);
}
html, body {
    font-family: Meccanica;
    color: var(--grey-15);

    width: 100%; /* take up full width */
    height: 100%; /* take up full height */
    position: fixed; /* don't scroll */
    top: 0; /* place at top of page */
    z-index: -99; /* place behind all content */
    margin: 0;
    padding: 0;
    overflow: scroll;
    scrollbar-width: none; /* firefox remove scroll bar */
    -ms-overflow-style: auto; /* explorer remove scroll bar */

    background-color: var(--transulcent-white); /* use image as background */
    background-size: cover; /* fill full space */
    background-position: center;
}
::-webkit-scrollbar {
    display: none;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/* .headerbanner ul {
    background-color: var(--grey-o);
} */
li {
    height: 48px;
    float: left;
    vertical-align: middle;
}
li a {
    height: 48px;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Meccanica;

    /* -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    transition-duration: 1s; */
}
.headerbanner li a { 
    height: 48px;
    vertical-align: middle;
    text-align: center;
    color: var(--grey-15);
}
.headerbanner li a:hover {
    vertical-align: middle;
    text-align: center;
    color: var(--sky-60);
}
.headerbanner {
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    z-index: 99;

    width: 100%;
    height: 48px;

    /* background-color: var(--grey-o); */
}
.profileblock {
    width: 100%;
    margin: auto;
    padding: auto;

    position: sticky;
    display: inline-block;
    vertical-align: middle;
}
.titlediv {
    display: block;
    width: 75%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 50px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    animation-name: fadein;
    animation-duration: 1.5s;
}
.textdiv {
    width: 75%;
    margin: auto;
    padding: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    animation: fadein 3s;
}
#about { height: auto; }
#infotitle { margin: auto; padding: auto; text-align: center;}
#infotext { margin: auto; }
.static-container {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    left: 0px;
    margin: auto;
    padding: 0;

    width: 100vw;
    /* height: 313px; */
    background-color: var(--grey-o);
}
.projectcard {
    width: 200px;
    height: 240px;
    border-radius: 10px;
    margin: auto;
    text-align: center;
    color: var(--grey-15);

    background-position: center;
    background-size: cover;

    display: table;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.projectcard:hover, .projectcard:focus {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}
.projectcard div {
    padding: 10px;
    display: table-cell; 
    vertical-align: middle;
    font-size: smaller;
}
#cards {
    position: relative;
    bottom: 10px;
    width: 930px;
    height: 33vw;
    margin: auto;
    padding: 30px;
    display: -moz-grid;
    display: -ms-grid;
    display: grid;

    overflow: visible;

    grid-template-columns: repeat( auto-fit, 250px );
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: -2;
}