@import url('https://fonts.googleapis.com/css2?family=Amarante&family=Chelsea+Market&family=Lexend:wght@100..900&family=Lilita+One&family=Rammetto+One&family=Yanone+Kaffeesatz:wght@200..700&display=swap');
@import url("retro-frame.css");
@import url("responsive.css");

:root{
  --space: clamp(0.5rem, 1vw + 0.25rem, 1rem);
  --space-lg: clamp(0.75rem, 1.5vw + 0.25rem, 1.5rem);
}

* {
    box-sizing: border-box;
}

img,svg,video,canvas,iframe { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (hover: none) and (pointer: coarse) {
  nav#site-navigation a { padding: .5rem .75rem; }
}

nav#site-navigation { padding: var(--space-lg); }
nav#site-navigation ul { gap: var(--space); flex-wrap: wrap; }
nav#site-navigation ul a { padding: .25rem .5rem; }

main#main-content div#who-we-are { width: min(60ch, 90%); }

html,
body {
    margin: 0;
    padding: 0;
    font-family: Lexend, sans-serif
}


body {
    display: grid;
    grid-template-columns:
        [left-start full-start] minmax(0, 1fr) 
        [middle-start] minmax(0, 2fr) 
        [middle-end right-start] minmax(0, 1fr) 
        [right-end full-end];
      grid-template-rows: auto auto 1fr auto;
      min-height: 100svh;       /* use 100dvh/100vh if you prefer */
}


header#masthead-header,
main#main-content,
nav#site-navigation,
footer#site-footer {
    grid-column: left-start / right-end;
    /* span all three columns */
}

header#masthead-header {
    display: grid;
    grid-template-columns: subgrid;
    /* inherit 1fr 2fr 1fr from body */
    grid-template-rows: auto auto;
    background-image: 
        url(../images/rain.png), 
        linear-gradient(darkgreen  , rgb(156, 197, 156) );
    background-position-x: -10px;
    border-block-end: 2px solid rgb(5, 27, 5);

    /* make sure text sits above the cloud slots */
    isolation: isolate;

    .cloud-slot {
        min-height: 6rem;
        /* visible band for clouds */
        background-repeat: no-repeat;
        background-size: 150% auto;
        grid-row: span 2;
        /* bigger than the cell */
        z-index: 0;
        /* behind text */
        pointer-events: none;
    }

    .cloud-slot.left {
        background-image: url("../images/cloud-left.png");
        background-position: right top;
        grid-column: 1;
    }

    .cloud-slot.right {
        background-image: url("../images/cloud-right.png");
        background-position: left top;
        grid-column: 3;
    }


    h1 {
        font-family: 'Amarante', cursive;
        letter-spacing: 2px;
        font-size: clamp(2rem, 6vw, 5rem);;
        justify-self: center;
        grid-column: middle;
        grid-row: 1;

        text-transform: uppercase;
        margin: 0;
        color: #daf0d4;

        text-shadow:
            -2px 3px 1px rgba(0, 0, 0, 0.5),
            -1px 1px 1px rgba(0, 0, 0, 0.2),
            1px -1px 1px rgba(0, 0, 0, 0.2),

            1px 1px 0 rgba(0, 0, 0, 0.2);

    }

    h2 {
        margin: 0;
        font-family: Lexend, sans-serif;
        grid-column: middle;
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        grid-row: 2;
        text-transform: uppercase;
        text-shadow:
            -2px 2px 1px rgba(0, 0, 0, 0.5),
            1px -1px 1px rgba(0, 0, 0, 0.2);
        color: #dae4d8;
        justify-self: center;
        font-weight: normal;
        padding-block-end: 1em;
    }
}


nav#site-navigation {
    grid-column: left-start / right-end;
    padding: 1rem;
    background:green;
    grid-row: auto; 
    padding: var(--space-lg);


    /* inset box shadow on the top */
    box-shadow: 
        inset 0 -1px 0 black,
        inset 0 -2px 0 black;

    ul {
        display: flex;
        margin:0;
        gap: var(--space); flex-wrap: wrap;
        justify-content: space-around;
        list-style: none;
        a { 
            color: #dae4d8;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            padding: .25rem .5rem;
            &:hover {
                color:white;
                text-decoration: underline;
                transform: scale(1.1);
            }
        }
    }
}


main#main-content {
    grid-column: middle;
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: minmax(100px, auto);
    border-left: 1px solid darkgreen;
    border-right: 1px solid darkgreen;

    div#who-we-are {
        width: 60%;
        justify-self: center;
    }
}

nav#site-navigation,
footer#site-footer {
    background-image: url(../images/rain.png);

}

footer#site-footer {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: full;
    background-color: forestgreen;
}