@font-face{
    font-family: "Safiro";
    src: url("../fonts/safiro-regular-webfont.woff") format("woff");
    font-display: swap;
}

@font-face{
    font-family: "Safiro Medium";
    src: url("../fonts/safiro-medium-webfont.woff") format("woff");
    font-display: swap;
}

:root {
    --highlight-color: #6FF5C8;
    --main-bg-color: #F9F9F9;
    --main-color: #000;
    --subtle-bg-color: #fff;
    --subtle-highlight-color: #F9F9F9;
    --main-font: "Safiro", sans-serif;
    --sec-font: "Safiro", sans-serif;
    --mono-font: "Safiro", sans-serif;
    --medium-font: "Safiro Medium", sans-serif;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --highlight-color: #00C79D;
        --main-bg-color: #1E1E1E;
        --main-color: #EAF4FB;
        --subtle-bg-color: #1C1C1C;
    }
}

body{
    padding:0 0;
    margin:0 0;
    font-family: var(--sec-font);
    min-height:100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--main-bg-color);
    color: var(--main-color);
}

a:link, a:visited, a:hover, a:active{
    color:var(--highlight-color);
    text-decoration: none;
}

/* PAGE */
nav{
    width:100vw;
    max-width:100vw;
    background-color:var(--subtle-bg-color);
    font-size:1rem;
    text-align: center;
    font-family: var(--sec-font);
    text-transform: capitalize;
    display: flex;
    justify-content: space-evenly;
    position:sticky;
    top:0;
    left:0;
    z-index:100;
    border-bottom: 1px solid var(--main-color);
    border-top: 1px solid var(--main-color);
}
.menu:link, .menu:visited{
    display:inline-block;
    margin:0 0 0 0;
    padding: 1em;
    text-decoration: none;
    color:var(--main-color);
    width:100%;
}
.menu:hover, .menu:active{
    font-family:var(--medium-font);
    background-color:var(--subtle-highlight-color);
}

nav a.rightborder{
    border-right:1px solid var(--main-color);
}

header{
    width:100vw;
    max-width:100vw;
    padding:0 0;
}
header img{
    width: 100vw;
    height:90vh;
    object-fit:cover;
}
#header_credits{
    display:inline-block;
    padding:0.3rem 0.5rem;
    z-index:10;
    position:relative;
    bottom:4vh;
    left:2vw;
    color: var(--main-bg-color);
    background-color:var(--main-color);
    font-size: 0.8rem;
    letter-spacing: 1px;
}
section{
    width:100vw;
    max-width:100vw;
    vertical-align: top;
}

.green{
    color:var(--highlight-color);
}

#wrapper{
    width:80vw;
    max-width: 80vw;
    display: block;
    margin:2vh auto 8vh auto;
    padding: 0 0;
    vertical-align: top;
}
#main{
    padding:2vh 0;
    font-size:1.1rem;
    display:inline-block;
    vertical-align: top;
}

#narrow_main{
    width:55vw;
    vertical-align: top;
    margin-right:2vw;
}

#projects{
    width:80vw;
    display: block;
    padding:0 0;
    position:relative;
    margin: 0 auto;
}

.collection_title{
    display:inline-block;
    background-color: var(--main-color);
    color: var(--main-bg-color);
    padding:0.3rem 0.5rem;
    font-size: 1rem;
    margin-bottom: 1.5vh;
    font-family: var(--medium-font);
    letter-spacing: 1px;
}

.one_project{
    display:grid;
    margin:2vh 0 0 0;
    border-bottom:2px solid var(--main-color);
    vertical-align: top;
    padding-top:0;
}

.one_project p{
    color:var(--main-color);
    font-weight: normal;
    padding-top:0;
    margin-top:1vh;
}

.project_img{
    height:25vh;
    width:auto;
    overflow:hidden;
    margin-left:2vw;
    padding-top:0;
}

.project_img img{
    width:180%;
    object-fit: cover;
    object-position: center center;
    image-rendering: pixelated;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

h1, h2{
    font-family: var(--main-font);
    font-weight: normal;
    margin:0 0 1vh 0;
    text-transform: uppercase;
}
h2{ font-size: 1.2rem; }

.big_header{
    font-size:3.5rem;
    max-width:80vw;
    text-transform: uppercase;
    text-align:left;
    position:relative;
    margin: 4vh auto 0 auto;
    padding:0 0;
    font-family: var(--medium-font);
}

#category{
    display:inline-block;
    padding:0.3rem 0.5rem;
    color: var(--main-bg-color);
    background-color:var(--main-color);
    font-size: 0.8rem;
    margin-bottom: 1.5vh;
    text-transform:capitalize;
    font-family: var(--mono-font);
    letter-spacing: 1px;
}

.project_cat{
    display:inline-block;
    color: var(--highlight-color);
    font-size: 2rem;
    margin:1vh 1vw;
    text-transform: uppercase;
    font-family: var(--main-font);
    text-align:left;
}

.text_credits{
    margin: 1.5vh 0;
}

.text_credits:before{
    content: "[Text: ";
}

.text_credits:after{
    content: "]";
}

#main a:link, #main a:visited{
    text-decoration: none;
    color:var(--main-color);
}
#main a:hover, #main a:active{
    text-decoration: underline;
    color:var(--main-color);
}
#projects a:link, #projects a:visited{
    text-decoration: none;
}
#projects a:hover, #projects a:active{
    text-decoration-line: line-through;
    text-decoration-style: solid;
    text-decoration-thickness:2px;
    text-decoration-color:var(--main-color);
}

#projects a:hover .project_cat{

}

#projects a:hover .project_img img{
    width:100%;
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    /*
    filter:sepia(100%) hue-rotate(120deg) brightness(100%) saturate(100%);
    -webkit-filter: sepia(100%) hue-rotate(120deg) brightness(100%) saturate(100%);
     */
    object-position: bottom center;
}

div[title] {
    position: relative;
}

div[title]:hover::after{
    content:attr(title);
    width:20vw;
    position:absolute;
    left:100%;
    bottom:0;
    color:var(--main-color);
    background-color: var(--main-bg-color);
    padding:0.25rem 1rem;
}

#links{
    padding:2vh 0 2vh 2vw;
    border-left:2px solid var(--highlight-color);
    font-size:1rem;
    display:inline-block;
    width:20vw;
}
#links a:link, #links a:visited{
    text-decoration: none;
    color:var(--main-color);
}
#links a:hover, #links a:active{
    text-decoration: underline;
}

#proj-credits {
    font-size: 0.8rem;
    margin-top:1rem;
    padding-top:1rem;
    border-top:2px solid var(--main-color);
}

#proj-credits p{
    margin: 0 0;
}

.block{
    display:block;
}
footer{
    width:100vw;
    max-width:100vw;
    background-color:var(--subtle-bg-color);
    color:var(--main-color);
    font-size:0.85rem;
    padding:0 0;
    display:grid;
    grid-template-columns: 2fr 1fr;
    font-family: var(--sec-font);
    text-transform: none;
    position:fixed;
    bottom:0;
    border-top: 1px solid var(--main-color);
    border-bottom: 1px solid var(--main-color);
}
footer a:link, footer a:visited, footer a:hover, footer a:active{
    color:var(--main-color);
    margin:0.25vw;
}
footer a:hover, footer a:active{
    text-decoration: underline;
}
footer div{
    margin:1vh 2vw;
    min-height:3vh;
    line-height:3vh;
}
#credits{ text-align:left;}
#social{ text-align:right;}

#social svg{
    width:1.3vw;
    height:1.5vw;
    fill: var(--main-color);
}

footer #social span.icon svg:hover{
    fill:var(--highlight-color);
}

/* PHONES LANDSCAPE */

@media only screen
and (min-device-width: 320px)
and (max-device-width: 812px)
and (orientation: landscape) {

    header{
        max-height:90vh;
        width:100vw;
    }

    #wrapper{
        width:94vw;
        max-width: 94vw;
        display: block;
        margin:1vh auto 3vh auto;
    }
    #main{
        padding:2vh 2vw;
    }

}

/* TABLETS PORTRAIT */

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: portrait) {

    footer div{
        display:inline-block;
    }

}


/* TABLETS LANDSCAPE */

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: landscape) {

    header{
        max-height:90vh;
    }

}


/* PHONES PORTRAIT */

@media only screen
and (min-device-width: 320px)
and (max-device-width: 812px)
and (orientation: portrait) {

    body{
        max-width:100vw;
        padding:0 0;
        margin:0 0;
    }

    nav{
        text-align: center;
    }

    .menu:link, .menu:visited{
        margin: 0 0;
        padding:2vh 0;
    }

    header{
        max-height:90vh;
        width:100vw;
        margin-bottom:1vh;
    }

    header img{
        max-height: 90vh;
    }

    #header_credits{
        position:relative;
        bottom: 0;
        left:0;
        margin: 0 0;
        translate:0 -120%;
    }

    .big_header{
        font-size:2rem;
        max-width:92vw;
        text-transform: uppercase;
        text-align:left;
        margin:1vh auto 1vh auto;
    }

    #wrapper{
        width:94vw;
        max-width: 94vw;
        display: block;
        margin:2vh auto 3vh auto;
    }
    #main{
        padding:1vh 2vw;
    }

    #narrow_main{
        width:92vw;
        margin-top:2vh;
    }

    #projects{
        /*text-align: center;*/
    }

    .collection_title{
        margin:0 0 1vh 0;
        padding:0.3rem 0.5rem;
    }

    #projects p{
        text-align:left;
    }

    .one_project p.date{
        margin:1vh 0 0 0;

    }

    .one_project{
        display:block;
        width:90vw;
        margin:5vh 0 2vh 0;
        border-bottom:10px solid var(--main-color);
        text-align: left;
    }

    .project_img{
        width:90vw;
        height:30vh;
        padding:0 0;
        overflow:hidden;
        margin:0 0 1vh 0;
    }

    .project_img img{
        width:200%;
        object-fit: cover;
        object-position: center center;
        image-rendering: pixelated;
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }

    .project_cat{
        padding: 0 0;
        margin:0 0;
        width:90vw;
        display:block;
    }

    #links{
        border-top:10px solid var(--highlight-color);
        border-left-width: 0;
        margin: 2vh 0;
        padding-top:3vh;
        width:90vw;
    }

    #social{
        font-size:0.7rem;
        margin:0 2vw;
    }

    footer {
        display: block;
        margin-top: 0;
        height: auto;
        min-height: 10vh;
        text-align: center;
        text-transform: none;
        position: relative;
        width: 100vw;
    }

    footer div{
        margin:2vh 2vw;
        height:auto;
        font-size:0.8rem;
    }

    #social svg{
        display:inline-block;
        width:1.8rem;
        height:1.8rem;
        margin: 1vh 1.5vw;
    }

    #credits{ text-align:center; }
    #social{ text-align:center; font-size:1.2rem;}
}