:root {
    --colour-green: #53a557;
    --colour-blue: #34b0cd;
    --colour-pink: #ff97d5;
    --colour-purple: #4369a8;
    --colour-light-blue: #e1f3ff;
}

body {
    font-family: 'Nunito', sans-serif;
}

@font-face {
    font-family: Nunito;
    src: url(./assets/Nunito-VariableFont_wght.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Quokka;
    src: url(./assets/quokka.woff) format('woff');
    font-weight: bold;
    font-style: normal;
}
.quokka {
    font-family: Quokka, sans-serif;
    font-weight: bold;
}

.section-content {
    width: 100%;
}

.z1 {
    position: relative;
    z-index: 1;
}

.z2 {
    position: relative;
    z-index: 2;
}

.z3 {
    position: relative;
    z-index: 3;
}

/* 1. Container sticks to the top of the viewport */
.top-banner {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;               /* sit above everything */
  background-color: var(--colour-pink);
  display: flex;
  flex-direction: column;      /* content + underline */
}

/* 2. Inner content: center it and give vertical padding */
.top-banner .banner-content {
  padding: 12px 20px;
  text-align: center;
  color: white;
  font-size: 18px;
}

/* Example link style inside banner */
.top-banner .banner-link {
  font-weight: bold;
  text-decoration: underline;
  color: white;
}


.parallax-flowers {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200vh;
    pointer-events: none;
    z-index: 1;

    .pink.flower {
        position: absolute;
        width: 30px;
        height: 30px;
    }

    .white.flower {
        position: absolute;
        width: 40px;
        height: 40px;
    }

    .yellow.flower {
        position: absolute;
        width: 50px;
        height: 50px;
    }

    /* Evenly distributed left, randomized top */
    .flower1  { top: -745px; left: 0%; }
    .flower2  { top:  923px; left: 2.5%; }
    .flower3  { top: -388px; left: 5%; }
    .flower4  { top:  586px; left: 7.5%; }
    .flower5  { top: -218px; left: 10%; }
    .flower6  { top:  812px; left: 12.5%; }
    .flower7  { top: -694px; left: 15%; }
    .flower8  { top:  174px; left: 17.5%; }

    .flower9  { top: -395px; left: 20%; }
    .flower10 { top:  892px; left: 22.5%; }
    .flower11 { top: -677px; left: 25%; }
    .flower12 { top:  754px; left: 27.5%; }
    .flower13 { top: -110px; left: 30%; }
    .flower14 { top: -790px; left: 32.5%; }
    .flower15 { top:  323px; left: 35%; }
    .flower16 { top:  912px; left: 37.5%; }

    .flower17 { top: -455px; left: 40%; }
    .flower18 { top:  439px; left: 42.5%; }
    .flower19 { top: -150px; left: 45%; }
    .flower20 { top:  999px; left: 47.5%; }
    .flower21 { top: -798px; left: 50%; }
    .flower22 { top:  232px; left: 52.5%; }
    .flower23 { top: -342px; left: 55%; }
    .flower24 { top:  785px; left: 57.5%; }

    .flower25 { top: -118px; left: 60%; }
    .flower26 { top:  865px; left: 62.5%; }
    .flower27 { top: -710px; left: 65%; }
    .flower28 { top:  119px; left: 67.5%; }
    .flower29 { top: -336px; left: 70%; }
    .flower30 { top:  678px; left: 72.5%; }
    .flower31 { top: -515px; left: 75%; }
    .flower32 { top:  921px; left: 77.5%; }

    .flower33 { top: -773px; left: 80%; }
    .flower34 { top:  583px; left: 82.5%; }
    .flower35 { top: -498px; left: 85%; }
    .flower36 { top:  973px; left: 87.5%; }
    .flower37 { top: -688px; left: 90%; }
    .flower38 { top:  312px; left: 92.5%; }
    .flower39 { top: -402px; left: 95%; }
    .flower40 { top:  867px; left: 97.5%; }
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    color: white;
}

.filler {
    flex-grow: 1;
}

.dashed-line {
    height: 12px;
    width: 100%;
    align-self: flex-end;
}
.green.dashed-line {
    background: repeating-linear-gradient(
        to right,
        var(--colour-green) 0 11px,     /* Dash length */
        transparent 11px 15px  /* Gap length */
    );
}
.pink.dashed-line {
    background: repeating-linear-gradient(
        to right,
        var(--colour-pink) 0 11px,     /* Dash length */
        transparent 11px 15px  /* Gap length */
    );
}
.purple.dashed-line {
    background: repeating-linear-gradient(
        to right,
        var(--colour-purple) 0 11px,     /* Dash length */
        transparent 11px 15px  /* Gap length */
    );
}

.image {
    width: 150px;
    height: 185px;
    margin: auto;
    border-radius: 10px;
}

.image.partnership-image {
   background: none
}

div#content {
    background-color: var(--colour-light-blue);
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .section {
        position: relative;
        width: 100%;
        min-height: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .section#header{
        display: flex;
        flex-direction: column;
        background-image:  url('./assets/header.jpg');
        background-size: cover;
        background-position: center;
        /* height: 300px;  MRS*/
        height: 60vh;   /* percentage of screen height of header section */


        .section-content {
            /* margin-top: 10px;
            width: 100%; */
            margin-top: 20vh;
            width: 75%;
            
            display: flex;
            flex-direction: row;
            #block {
                width: 300px;
                padding: 20px;

                #header-we-are {
                    font-size: 35px;
                }
                #header-grow-up {
                    font-size: 60px;
                }
                #header-description {
                    font-size: 16px;
                }
            }

        }
    }

    .section#about {
        display: flex;
        flex-direction: column;
        background-color: var(--colour-green);
        .about-content {
            display: flex;
            flex-direction: row;
            /* MRS
            padding-top: 20px;
            padding-bottom: 20px;
            */
            
            padding-top: 50px;
            padding-bottom: 100px;

            .text {
                width: 400px;
                margin-right: 50px; /*MRS*/
            }
            .quokka {
                font-size: 30px;
            }
        }
        .dashed-line {
            align-self: flex-end;
        }
    }

    .section#signup {
        background-color: var(--colour-pink);
        display: flex;
        flex-direction: column;
        align-content: space-between;
        text-align: center;
        padding-top: 20px;

        .quokka {
            font-size: 30px;
        }

        .content {
            padding-top: 40px;
            padding-bottom: 80px;
        }

        .signup-button-link {
            background: url('./assets/button-shape.svg') no-repeat center center;
            background-size: contain;
            border: none;
            width: 200px;
            height: 60px;
            color:var(--colour-pink);
            font-size: 18pt;
            font-family: Quokka, sans-serif;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease; 
            outline: none;
        }

    }
    

    .section#partnerships-showcases {
        background-color: var(--colour-purple);
        display: flex;
        flex-direction: column;

        .partnerships-content {
            width: 100%;
            display: flex;
            flex-direction: row;
            .rows {
                width: 400px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: 40px;
                padding-left: 60px;
                padding-bottom: 100px;
                .row.one {
                    font-size: 30px;
                    padding-bottom: 5px;
                }
                .row.two {
                    font-size: 20px;
                    padding-bottom: 20px;
                }
                .row.three {
                    padding-bottom: 20px;
                }
                .row.four {
                    padding-bottom: 20px;
                }
            }
            
             .host-image img {
                max-width: 400px;
                margin: auto;
                padding-left: 50px;
                padding-bottom: 10px;
                background-color: transparent;
            }
            .host-image {
                background-color: transparent ;
            }
            .info-button-link {
                background: url('./assets/button-shape.svg') no-repeat center center;
                background-size: contain;
                border: none;
                width: 200px;
                height: 60px;
                color:var(--colour-purple);
                font-size: 18pt;
                font-family: Quokka, sans-serif;
                text-transform: uppercase;
                cursor: pointer;
                transition: all 0.3s ease; 
                outline: none;
        }

            
        }
        .showcases {
            width: 100%;
            font-size: 30px;
            text-align: center;
        }
        .showcase-images {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            padding: 20px;
            .image {
                width: 175px;
                height: 225px;
                background-color: gray;
                border-radius: 10px;
                margin: 0 10px;
            }
            .name {
                font-size: 20px;
                margin-left: 10px;
                margin-top: 10px;
            }
            .description {
                font-size: 15px;
                margin-top: 5px;
                margin-left: 10px;
                margin-bottom: 10px;
            }
        }
    }
    .section#team {
        background-color: var(--colour-green);
        width: 100%;
        .content {
            width: 100%;
            .team-header {
                width: 100%;
                font-size: 30px;
                text-align: center;
                padding-top: 20px;
            }
            .team-subheader {
                width: 100%;
                font-size: 20px;
                text-align: center;
                padding-bottom: 20px;
            }
            .team-members {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                padding: 30px;
                .member {
                    width: 150px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                  
                 
                    .team-image img {
                    width: 185px;
                    height: 217px;
                    object-fit: cover; 
                    }
                    }
                    .name {
                        font-size: 20px;
                        margin-bottom: 5px;
                    }
                    .role {
                        font-size: 15px;
                    }
                }
            }
        }
    }
    .section#footer {
        background-color: var(--colour-light-blue);
        text-align: center;
        color: #1e5d70; /* Darker shade that pairs well with --colour-blue */
        padding: 20px 0;
    }
    .section#footer .content 
    {
        width: 100%;
        text-align: center;
}


@media screen and (max-width: 768px) {
    .top-banner .banner-content {
        font-size: 16px;
        padding: 10px;
    }

    .parallax-flowers {
        display: none; /* optional: hide on mobile to reduce clutter/performance */
    }

    .section#header .section-content {
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin-top: 10vh;
    }

    .section#header #block {
        margin-left: 0;
        width: 100%;
        padding: 0;
        text-align: center;

            background-color: rgba(83, 165, 87, 0.9); /* black with 50% opacity */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    #header-we-are {
        font-size: 24px !important;
    }

    #header-grow-up {
        font-size: 36px !important;
    }

    #header-description {
        font-size: 14px !important;
        padding: 0 10px;
    }

    .section#about .about-content {
        display: flex;
        flex-direction: column !important;
        align-items: center;
    }

    .section#about .about-content .text {
        max-width: 75vh;
        text-align: center;
        margin: 0 auto;
        margin-right: 0px !important; /*MRS*/
    }

    .section#about .about-content .filler {
        display: none; /* disable spacer divs on mobile */
    }

    .section#about .about-content .z3.image {
        width: 175px;
        height: 150px;
        margin: 0 auto;
        align-items: center;
    }

    .section#about .about-content ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .section#about .about-content li {
        margin-bottom: 10px;
    }

    .section#partnerships-showcases .partnerships-content {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
    }

    .section#partnerships-showcases .rows {
        width: 100%;
        padding: 20px;
    }

    .section#partnerships-showcases .host-image{
        width: 40vh !important;
        padding-bottom: 60px;
    }

    .section#partnerships-showcases .host-image img {
        padding-left: 0 !important;
        max-width: 40vh !important;
    }

    .section#team .team-members {
        flex-direction: column !important;
        align-items: center;
        padding: 0px !important;
    }

    .section#team .member {
        margin-bottom: 30px;
    }

    .section#signup .content {
        padding: 20px 10px;
    }

    .section#signup .signup-button-link {
        padding: 10px 20px;
        font-size: 16px;
    }

    .section#footer .content {
        font-size: 14px;
        padding: 15px;
    }
}