@font-face {
    font-family: "Cooper";
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    src: url(assets/fonts/Cooper-Regular.woff2) format('woff2');
}

@font-face {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    src: url(assets/fonts/NotoSans-VariableFont_wdth\,wght.ttf) format('ttf');
}

html {
    scroll-snap-type: y mandatory;
}

body, body * {
    all: unset;
}

article,
address,
section {
    box-sizing: border-box;
    padding: 1rem 2rem;
}

header {
    position: sticky;
    top: 0;
}

footer {
    background-color: #758152;
    box-sizing: border-box;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
}

header nav {
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 2rem;
}

header ul {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

#menu-icon {
    height: 100%;
    width: auto;
    display: none;
}

header a {
    color: #758152;
    font-size: 1.5rem;
}

a,
h1,
h2,
li {
    font-family: "Cooper", serif;
    font-weight: 400;
}

a {
    cursor: pointer;
    text-decoration: none;
}

blockquote {
    font-style: italic;
}

div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
}

h1,
#about-us p,
#catalogue p,
#contact address {
    color: #ffffff;
}

h1,
h2,
#contact address li {
    font-size: 3rem;
	line-height: 6rem;
}

h2 {
    color: #758152;
    font-size: 2rem;
}

img {
    display: block;
    object-fit: contain;
}

p {
    font-family: "Noto Sans", sans-serif;
    font-size: 1.5rem;
	line-height: 3rem;
}

script {
    display: none;
}

#index article:nth-of-type(1),
#contact address {
    align-items: center;
    background-position: center;
    background-size: cover;
    background-image: url("./assets/images/neza-garden-artwork.png");
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#index article:nth-of-type(1) {
    height: 50vh;
}

#index article:nth-of-type(2) ul {
    box-sizing: border-box;
    display: flex;
    gap: 4rem;
    padding: 4rem 10vw;
}

#index article:nth-of-type(2) li {
    display: flex;
    flex: 1;
    gap: 1rem;
    flex-direction: column;
    text-align: center;
}

#index article:nth-of-type(2) img {
    height: 8rem;
}

#index article:nth-of-type(3) {
    display: flex;
}

#index article:nth-of-type(3) div {
    justify-content: center;
}

#index article:nth-of-type(3) img {
    height: auto;
    width: 100%;
}

#about-us section,
#catalogue section {
    align-items: center;
    background-color: #758152;
    box-sizing: border-box;
    display: flex;
    gap: 4rem;
    padding: 20vh 10vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

#buyers-guide article,
#contact address {
    height: 100dvh;
}

#buyers-guide article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

#buyers-guide article img {
    width: 100%;
}

#catalogue section:first-of-type {
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

#catalogue section:first-of-type img {
    height: 50dvh;
}

#contact address ul {
    display: flex;
    flex-direction: column;
}

#contact address li {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

#contact address ul img {
    height: 4rem;
    width: auto;
}

.instant-film {
    background-color: #ffffff;
    justify-content: start;
    padding: 1rem;
    text-align: center;
    height: fit-content;
    gap: 1rem;
}

.instant-film img {
    height: auto;
    width: 100%;
}

@media (orientation: landscape) {
    header a,
    #index article:nth-of-type(2) h2,
    #contact address li a {
        transition: font-size .5s;
    }
    header a:hover {
        font-size: 2rem;
    }
    header nav li:last-child {
        display: none;
    }
    #index article:nth-of-type(2) ul,
    #index article:nth-of-type(3),
    #about-us section,
    #catalogue section {
        flex-direction: row;
    }
    #index article:nth-of-type(2) li:hover h2 {
        font-size: 4rem;
    }
    #index article:nth-of-type(2) img {
        transition: height .5s;
    }
    #index article:nth-of-type(2) li:hover img {
        height: 10rem;
    }
    #about-us section,
    #catalogue section {
        height: 100vh;
    }
    #contact address ul {
        gap: 1rem;
    }
    #contact address li:hover a {
        font-size: 4rem;
    }
    #contact address li img {
        transition: height .5s;
    }
    #contact address li:hover img {
        height: 6rem;
    }
}

@media (orientation: portrait) {
    nav {
        height: 4rem;
        padding: 1rem 1rem;
    }
    nav ul {
        align-items: center;
        position: fixed;
        background-color: #ffffff;
        flex-direction: column;
        width: 100vw;
        height: 100dvh;
        text-align: center;
        justify-content: center;
        left: 0;
        top: -100%;
        transition: 1s ease;
    }
    nav ul.show {
        top: 4rem;
    }
    header nav li:last-child {
        display: block;
    }
    header nav li img {
        width: 8rem;
    }
    p {
        font-size: 1.25rem;
        line-height: 2.5rem;
    }
    #menu-icon {
        display: block;
    }
    h1,
    h2 {
        font-size: 2rem;
        line-height: 4rem;
    }
    #index article:nth-of-type(2) ul,
    #index article:nth-of-type(3),
    #about-us section,
    #catalogue section {
        flex-direction: column;
    }
    #about-us section,
    #catalogue section {
        height: auto;
        gap: 1rem;
        padding: 4rem 10vw;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
    #contact address ul {
        gap: 0;
    }
    #contact address ul img {
        height: 2rem;
    }
    #contact address li {
        font-size: 1.5rem;
        gap: 1rem;
    }
}