@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Montserrat.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: bold;
    font-weight: 700;
    src: url(fonts/Montserrat.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
    margin: 0;
    overflow: hidden;
}

body {
    height: 100vh;
    display: grid;
    grid: 1fr 7fr / 1fr;
    background: no-repeat center / cover url(img/server.jpg);
    font-family: 'Montserrat', sans-serif;
    font-family: 'Montserrat';

    
    --accent: #00a9ff;
    /* --secondary: #85858e; */
}

body>div.appbar {
    position: relative;
    grid-area: 1 / 1 / 2 / 2;
}

body div.appbar header {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 12.5vh;
    transition: top .4s ease-out;
    background: #111213;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
        0px 4px 5px 0px rgba(0, 0, 0, 0.14),
        0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    z-index: 1;
}

nav {
    margin: auto;
    width: 96vmin;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

nav div.logo {
    width: 100%;
    height: 100%;
    background: #111213 center / auto 65% no-repeat url(img/logo.svg);
    transform: translateY(0);
    transition: transform .4s ease-out;
    z-index: 1;
}

body.zen nav div.logo {
    transform: translateY(-20%);
}

nav ul {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 4em;
    background: #111213;
    transform: translate(-50%, -150%);
    animation: helpful 4s;
    list-style: none;
}

@keyframes helpful {
    10% {
        transform: translate(-50%, 0);
    }
    90% {
        transform: translate(-50%, 0);
    }
}

body.zen nav ul {
    animation: none;
}

nav ul li {
    display: block;
    border-top: 1px solid var(--accent);
    text-transform: uppercase;
    color: var(--accent);
    cursor: pointer;
}

nav ul li a {
    text-decoration: none;
    color: white;
}

nav ul li a:hover {
    color: var(--accent);
}

body.zen {
    grid: 1fr 39fr / 1fr;
}

body.zen div.appbar header {
    top: -10vh;
}


main {
    min-height: 0;
    grid-area: 2 / 1 / 3 / 2;
    overflow: hidden;
}

main article {
    height: 100%;
    overflow: scroll;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    color: white;
}

main article h1 {
    font-size: 2em;
}

main section {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2vmin calc(50vw - 45vmin);
    transform: translateY(0);
}

body.zen main article>section,
body.zen main article>footer {
    transform: translateY(10vh);
}

/***************** HOME ******************** HOME ****************** HOME ****************************/

#home div.logo {
    width: 20em;
    height: 10em;
    background: center / contain no-repeat url(img/logo_white.svg), radial-gradient(closest-side, black, transparent);
}

#home p {
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 0.7em 0.7em rgba(0, 0, 0, .5);
    font-size: 2em;
    text-align: center;
}

#home strong {
    display: inline-block;
    padding: 0 .2em;
    border: 4px solid white;
    background: rgba(0, 0, 0, .5);
}

/***************** SERVICES ******************** SERVICES ****************** SERVICES ****************************/

#services {
    background: rgba(0, 0, 0, .5);
}

#services h1 {
    margin-bottom: 0;
}

#services div.panel {
    display: grid;
    grid: 1fr / auto;
    gap: 1vmin;
    grid-gap: 1vmin;
    background: rgba(0, 0, 0, .5);
}

#services div.panel div.card {
    display: grid;
    grid: 4em auto / 1fr;
}

#services div.panel div.card header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e0e0e;
}

#services div.panel div.card h3 {
    margin: 0;
    text-align: center;
    color: var(--accent);
}

#services div.panel div.card footer {
    padding: 1vmin;
    background: rgba(0, 0, 0, .5);
    background: linear-gradient(160deg, var(--accent)a0, rgba(0, 0, 0, .7));
    color: white;
    color: #ddd;
}


/******************* WORK ****************** WORK ********************* WORK *************************/

#work {
    background: #30789a;
    background: #45484a;
}

#work div.board {
    /* grid: auto / repeat(auto-fill, minmax(70vmin, 1fr)); */
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    color: var(--accent);
}

#work div.tile {
    position: relative;
    margin: 1vmin;
    width: 90vmin;
    height: 90vmin;
    overflow: hidden;
    outline: lightgrey 1px solid;
    background: #444c;
}

#work div.tile div.context {
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    -webkikt-filter: url('#blurfilter');
    filter: url('#blurfilter');
    z-index: -1;
}

#work div.tile:hover div.context {
    -webkit-filter: none;
    filter: none;
}

#work div.client {
    margin: 5%;
    width: 90%;
    height: 90%;
    transform: scale(.9);
    transition: transform .4s;
}

#work div.client:hover {
    transform: scale(1.1);
}


/***************** RESOURCES ***************** RESOURCES ***************** RESOURCES **************************/

#resources {
    display: grid;
    place-items: center;
    background: linear-gradient(black, rgba(0, 0, 0, .3)), center / cover no-repeat url(img/resources.jpg);
}

#resources ul {
    margin: 0;
    padding: 1em 2em;
    list-style: none;
    background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .1));
}

#resources li {
    margin: 1em;
}

#resources li>* {
    margin: 0;
}

#resources a {
    color: white;
}


/****************** CONTACT ******************* CONTACT ******************* CONTACT ***************************/

#contact {
    display: flex;
    flex-direction: column;
    background: #053248;
    background: linear-gradient(black, rgba(0, 0, 0, .6)), center / cover no-repeat url(img/keyboard.jpg);
    color: white;
}

#contact h1,
#contact p {
    margin: 0;
}

#contact form {
    margin: 2em;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#contact form>* {
    margin: .5em;
}

/* 
#contact input {
    margin-bottom: 1em;
    width: 96%;
    padding: .5em;
    background: none;
    border: none;
    border-bottom: 2px solid var(--accent);
    font-family: inherit;
    font-size: inherit;
    text-align: center;
    color: inherit;
    animation: 3.5s 1s backwards appear;
}

#contact input:focus {
    outline: none;
    background: rgba(0, 0, 0, .8);
}

@keyframes appear {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
} */

#contact form textarea {
    width: 100%;
    padding: .5em;
    border: none;
    border-top: 2px solid var(--accent);
    background: rgba(0, 0, 0, .5);
    font-size: inherit;
    font-family: inherit;
    color: inherit;
}

#contact button {
    /* margin: 1em; */
    width: 7em;
    padding: .5em;
    outline: none;
    border: none;
    border-radius: 10px;
    font-size: inherit;
    background: var(--accent);
    border: 2px solid var(--accent);
    color: white;
    cursor: pointer;
}

#contact button:hover {
    border: 2px solid var(--accent);
    background: white;
    color: var(--accent);
}

/**************** FOOTER *************** FOOTER ***************** FOOTER *****************/

article>footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 1em;
    background: grey;
    background: #111213;
    color: white;
}

article>footer i {
    font-size: 2em;
    cursor: pointer;
}

footer div.social {
    letter-spacing: .5em;
}

footer div.credits h5 {
    margin-bottom: 0;
    text-align: center;
    color: darkgrey;
}

footer div.credits p {
    color: grey;
    font-size: .8em;
}

footer div.credits a {
    color: grey;
}

p.cited {
    color: red;
}

@media (min-width: 768px) {

    nav {
        height: auto;
        justify-content: space-between;
    }

    nav div.logo {
        width: 10vh;
        height: 12vh;
        background: #111213 center / contain no-repeat url(img/logo_white.svg);
    }

    nav ul {
        margin: 2vh 0;
        position: static;
        flex-direction: row;
        padding: 0;
        transform: none;
        animation: none;
    }

    body.zen nav ul {
        transform: none;
    }

    nav ul li {
        display: flex;
        border: none;
        font-size: .8em;
    }

    nav ul li::after {
        content: "//";
        display: block;
        padding: 1em;
        font-weight: bold;
    }

    main section {
        padding: 2vmin calc(50vw - 48vmin - 9px);
    }

    #services div.panel {
        grid: 1fr / 1fr 1fr 1fr;
    }

    #work div.tile {
        width: 30vmin;
        height: 30vmin;
    }

    #contact form {
        width: 50%;
    }
}