/*
  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%;
}
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);
    overflow:hidden;
    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;
}

.wrapper {
    display:grid;
    grid-template-rows: 67.5px calc(100% - 135px) 67.5px;
    grid-template-areas:
    "header"
    "main"
    "footer";
    max-height:100%;
    max-width:100%;
    position: relative;
}
header {
    grid-area:header;
    width:100%;
    font-size:16px;
    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;
    transition:visibility 1s, opacity 1s;
}
header nav ul li:first-child {
    margin-right:30px;
    overflow:scroll;
}
header nav ul li:not(:first-child) {
    visibility:hidden;
    margin:0 30px;
    opacity:0;
}
header nav ul li:first-child::-webkit-scrollbar {
    display:none;
}
header nav ul li:first-child a{
    padding-bottom: 2px;
}
header nav ul li[active="true"] ~ li{
    visibility: visible;
    opacity:1;
    transform:translateX(0) scale(1);
}
header nav ul li[active="true"]:hover {

}

main {
    grid-area:main;
    display:grid;
    grid: auto-flow / repeat(2,30vw) 1fr;
    grid-template-areas:
    "column1 column2 _"
    "img2 img2 img1"
    "contacts contacts contacts";
    position: relative;
    padding:20px 0 20px 40px;
    font-size:15px;
    font-weight:600;
    gap:3vw;
    overflow-y:scroll;
    max-height:calc(100% - 60px);
    margin-bottom:50px;
}
main p {
    padding-bottom:20px;
}
main .column1 {
    grid-area:column1;
    font-size:1.5em;
    line-height: 1.2;
    padding-right: 4vw;
}
main .column2 {
    grid-area:column2;
}
main img {
    width:100%;
    height:auto;
}
main img.img-1 {
    grid-area: img1;
    min-height: 0;
    min-width: 0;
    justify-self: end;
}
main img.img-2 {
    grid-area: img2;
    min-height:0;
    min-width: 0;
    padding-left:100px;
    margin-bottom:50px;
    width: min(700px, 90%);
    justify-self: end;
    max-height:90vh;
}
footer {
    position:fixed;
    bottom:0;
    left:0;
    grid-area: footer;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:20px 40px;
    font-weight:600;
}
#contacts {
    grid-area:contacts;
    display:grid;
    place-items:center;
    bottom:0;left:0;
    width:100%;
    padding:150px 50px;
    font-weight:900;
}
#contacts .grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:80px 20px;
    width:100%;
}
#contacts p {
    padding-bottom:0;
}
@media screen and (max-width:970px){
    main {
        grid: auto-flow / repeat(4,15vw) 1fr;
        grid-template-areas:
        "column1 column1 column1 column2 column2"
        "img2 img2 img2 img1 img1"
        "contacts contacts contacts contacts contacts";
    }
    main .column1,
    main .column2 {
        padding-left:10px;
        padding-right:10px;
    }
}
@media screen and (max-width:800px){
    #contacts {
        padding:100px 5px;
    }
    #contacts .grid {
        grid-template-columns: 1fr;
        text-align:center;
    }
    #contacts .grid *:empty {
        display:none;
    }
}

@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;
    }
    main {
        grid: auto-flow / 1fr;
        padding:20px 0;
        grid-template-areas:
        "column1"
        "column2"
        "img2"
        "img1"
        "contacts";
    }
    main .column1,
    main .column2 {
        padding-left:10px;
        padding-right:10px;
    }
}