*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    color-scheme: dark light;

    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
}

body {
    min-height: 100vh;
}

img picture svg video {
    display: block;
    max-inline-size: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    line-height: 1.5;
    text-wrap: pretty;
}

.content-grid {
    --padding-inline: 2rem;
    --content-max-width: 85ch;
    --breakout-max-width: min(75vw, 1200px);

    --breakout-size: calc(
        (var(--breakout-max-width) - var(--content-max-width)) / 2
    );

    display: grid;
    grid-template-columns:
        [full-width-start] 
            minmax(var(--padding-inline), 1fr)
        [breakout-start] 
            minmax(0, var(--breakout-size))
        [content-start] 
            min(100% - (var(--padding-inline) * 2), var(--content-max-width))
        [content-end]
            minmax(0, var(--breakout-size)) 
        [breakout-end]
            minmax(var(--padding-inline), 1fr) 
        [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
    grid-column: content;
}

.content-grid > .breakout {
    grid-column: breakout;
}

.content-grid > .full-width {
    grid-column: full-width;

    display: grid;
    grid-template-columns: inherit;
}

img.full-width {
    width: 100%;
    max-height: 45vh;
    object-fit: cover;
}

/* 
  above is my generic css code with reset and some other reusable code
  below is all the css specific to this website
*/

:root {
    --clr-light: rgb(245, 245, 245);
    --clr-dark: rgb(30, 30, 30);
    /* --clr-primary: ;
    --clr-secondary: ; */
    --clr-accent: rgb(90, 120, 80);

    --forground: var(--clr-dark);
    --background: var(--clr-light);
}

.darkmode {
    --clr-light: rgb(245, 245, 245);
    --clr-dark: rgb(30, 30, 30);
    /* --clr-primary: ;
    --clr-secondary: ; */
    --clr-accent: rgb(187, 213, 183);

    --forground: var(--clr-light);
    --background: var(--clr-dark);
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.background {
    position: fixed;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(to bottom, #0b0b0c, transparent 40%),
        radial-gradient(circle at top left, #0b0b0c, transparent 110%),
        radial-gradient(circle at top right, #0b0b0c, transparent 110%),
        linear-gradient(to bottom, #9b9da0);
    background-repeat: no-repeat;

    transition: opacity 1s cubic-bezier(.4,0,.2,1), background 1s cubic-bezier(.4,0,.2,1);
}

.background::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;

    background-image: url("/assets/BackgroundPadFull.png");
    background-repeat: repeat;

    transition: opacity 1s cubic-bezier(.4,0,.2,1), background 1s cubic-bezier(.4,0,.2,1);
}

.background.image-bg::before {
    opacity: 1;
}

main {
   margin-inline: auto;
}

.scroll-animation-wrapper {
    block-size: 400vh;
}

.scroll-animation-screen {
    position: fixed;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    min-height: 100vh;

    opacity: 0;
}

.scroll-animation-screen animated-logo {
    display: block;
    width: 90%;
    max-width: 1300px;
    height: auto;
}

.scroll-animation-screen h1 {
    padding-block-start: 2.5rem;
    font-size: clamp(1.8rem, calc(3vw + 1rem), 4.8rem);
    color: var(--forground);
}

.scroll-animation-screen img {
    position: absolute;
    top: 90%;

    width: auto;
    height: 40px;

    animation: bounce 1.4s infinite;
}

.splash-screen {
    min-block-size: 85vh;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;

    margin-block-end: 5vh;
    font-size: clamp(1.6rem, calc(2vw + 1rem), 3.5rem);
}

.splash-screen h1 {
    font-size: 3em;
    margin-block-end: 1rem;
}

.splash-screen p {
    margin-block: 0.9em;
    max-width: 1200px;
    color: var(--clr-accent);
}

.splash-screen img {
    height: 1em;
    width: auto;

    display: inline-block;
    vertical-align: baseline;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 55px;

    margin-inline: 3vw;
}

section h1 {
    font-size: 3.5rem;
    padding-block-end: 1.5rem;
}

.product-container {
    width: calc(100vw - var(--padding-inline) * 3);

    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.product {
    margin-block-start: 1rem;
    text-align: center;

    background-image: url("/assets/grid-paper.png");
    background-repeat: repeat;

    border-radius: 0.3rem;
    box-shadow: 0px 0.25rem 0.5rem var(--background);
}

.product h2 {
    color: var(--clr-dark);
    padding-block: 1rem;
}

.product a {
    position: relative;
    display: inline-block;
    width: 80%;
} 

.product a:hover::after {
    opacity: 0.6;
}

.product a::after {
    content: "Click to view";
    background: gray;
    color: var(--forground);
    font-weight: bolder;
    font-size: 3.5rem;

    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: calc(100% - 1.7rem);

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.product img {
    width: 100%;
    padding-block-end: 1.5rem;
    border-radius: 0.3rem;
}

.history-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.history-section .block {
    justify-content: center;
    margin-block: 1rem;
    gap: 1rem;
}

.block p {
    flex: 1;
    font-size: 1.25rem;
    line-height: 1.6;
    text-align: start;
}

.block img {
    padding-block-start: 2rem;
    object-fit: contain;
}

.fade {
    transition: opacity 0.5s ease-in, scale 0.5s ease-in;
    will-change: opacity, scale;
}

.fade.visible {
    opacity: 1;
}

.fade.hidden {
    opacity: 0;
}

@keyframes bounce {
    0%, 100%
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-0.8rem);
    }
}

@media (width >= 750px) {

    .scroll-animation-wrapper {
        block-size: 300vh;
    }

    .history-section .block.flipped {
        flex-direction: row-reverse;
    }

    .history-section .block {
        display: flex;
    }

    .block img {
        align-self: flex-start;
        padding-block-start: 0.35rem;
    }
}

@media (width >= 800px) {
    .product-container {
        grid-template-columns: 1fr 1fr;
    }
}