/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    padding:0;
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    max-height:100%;
    min-height:10px;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
html, body {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight:400;
    background-color: rgb(255, 255, 255);
    scroll-snap-type: y mandatory;
    cursor:url(/assets/img/cursor.png) 10 10, default;
}
a {
    text-decoration: none;
    color: inherit;
}
a:-webkit-any-link {
    cursor:url(/assets/img/cursor.png) 10 10, pointer;
}
header {
    position:fixed;
    top:0;left:0;
    width:100%;
    font-size:16px;
    /*background-color:rgba(252, 246, 237,.7);*/
    background-color:rgba(255, 255, 255,.7);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    z-index:1;
}
header nav ul {
    display:flex;
    list-style:none;
    padding:20px 40px;
    font-weight:600;
}
header nav ul li {
    line-height:1;
    max-height:20px;
}
header nav ul li:first-child {
    margin-right:30px;
    overflow:scroll;
}
header nav ul li:first-child::-webkit-scrollbar {
    display:none;
}
header nav ul li:first-child a{
    padding-bottom: 2px;
}
header nav ul li:not(:first-child) {
    visibility:hidden;
    margin:0 30px;
    opacity:0;
    transition:visibility 1s, opacity 1s;
}
header nav ul li[active="true"] ~ li{
    visibility: visible;
    opacity:1;
}

main {
    height:100%;
}
section {
    scroll-snap-align: start;
    display:flex;

    padding:90px 40px 20px;
    gap:4vw;
    justify-content:center;
    align-items:center;
    height:100%;
    position:relative;
}
main section .project-container {
    position:relative;
    max-height:75vh;
    flex:0 0 46%;
}

main section .project-container .images {
    position:relative;
    overflow: hidden;
    margin-bottom:5px;
    max-height:100%;
}

main section .project-container .images img {
    width: auto;
    height:auto;
    max-height: calc(75vh - 30px);
}
main section .project-container .images img.color {
    position: absolute;
    top:0;left:0;
    opacity:0;
    transition:opacity .3s;
}
main section .project-container:hover .images img.color {
    opacity:1;
}
main section .project-container p {
    display:inline-block;
    position:relative;
    color:#000;
}
main section .project-container p:after {
    content:'';
    position:absolute;
    left:0;top:100%;
    width:0;height:1px;
    background-color:#000;
    transition:width 1s cubic-bezier(.645,.045,.355,1);
}
main section .project-container:hover p:after {
    width:100%;
}
.images:hover p{
    color:#000;
}
.images:hover span:after {
    width:100%;
}
@media screen and (max-width:750px) {
    header nav ul {
        padding:20px;
        justify-content:space-between;
    }
    header nav ul li:not(:first-child),
    header nav ul li:first-child {
        margin: 0;
        visibility: visible;
        opacity:1;
        transition:1s;
    }

    section {
        /*scroll-snap-align: start;*/
        padding:100px 40px 20px;
        /*flex-wrap:wrap;*/
        flex-direction:column;
        /*grid-template-rows:40vh 40vh;*/
        gap:5vw;
        max-height:100%;
        position:relative;
    }
    .hidden {display:none !important;}
    main section .project-container:first-child {
        margin-bottom:20px;
    }
    main section .project-container {
        margin:auto;
        text-align:center;
    }

    main section .project-container .images {
        /*width:min(450px, 100%);*/
        /*margin:auto;*/
        /*max-height:34vh;*/
        /*object-fit: contain;*/
    }
    main section .project-container .images img{
        max-height: calc(40vh - 30px);
    }
    .images span {
        text-align: center;
        display:inline-block;
    }
    main section .project-container .images img.color {
        opacity:1;
    }
}
/*.images img:first-child {z-index:1;}*/
/*.images img:nth-child(2) {z-index:-1;}*/
/*.images:hover img:nth-child(2) {z-index:2;}*/
#contacts_card {
    position:fixed;
    display:grid;
    place-items:center;
    bottom:0;left:0;
    width:100%;height:calc(100% - 65px);
    transform: translateY(0);
    transition:transform .5s ease-in-out;
    background: rgb(255,255,255);
    cursor:url(/assets/img/close.png) 6 6, default;
    padding:20px 20px 20px 80px;
    font-weight:900;
    /*line-height:1.2;*/
}
#contacts_card.closed {
    transform: translateY(100%);
    transition:transform .1s ease-in-out;
}
#contacts_card .grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:80px 20px;
    width:100%;
}
@media screen and (max-width:800px){
    #contacts_card {
        padding:5px;
    }
    #contacts_card .grid {
        grid-template-columns: 1fr;
        text-align:center;
    }
    #contacts_card .grid *:empty {
        display:none;
    }
}