root {
    --brand:#B3735C;
    --black: black;
    --base-light:#c38f7c;
    --purple-light: #A293AD;
    --purple-dark:#7566A0;
    --white: white; 
}

/* CSS Reset */

html {
box-sizing: border-box;
font-size: 16px;
font-family: "Inter", sans-serif;
color: var(--black);
scroll-behavior: smooth;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Josefin Sans", sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
}

/* ol, */
/* ul {
list-style: none;
} */

img {
max-width: 100%;
height: auto;
}

input,
button,
textarea,
select {
font: inherit;
}
/* makes bg image cover the whole page yay */
html, body {
    height: 100%;
}
@media (max-width: 768px) {
    .bee, .orangetree, .toolshed, .moon, .ladybug {
        width: 20%;
    }
    
    .flower1, .flower2, .flower3, .flower4, .flower5, .flower6, .flower7, .flower8, .flower9, .flower10 {
        width: 15%;
    }
}

@media (max-width: 480px) {
    .bee, .orangetree, .toolshed, .moon, .ladybug {
        width: 30%;
    }
    
    .flower1, .flower2, .flower3, .flower4, .flower5, .flower6, .flower7, .flower8, .flower9, .flower10 {
        width: 20%;
    }
}
.intro-header {
    position: absolute;
    top: 130px;
    left: 50px;
    padding: 20px;
}
.page-intro {
    font-family: 'Sacramento', cursive;
    font-size: 2rem;
    color: var(--white);
    margin: 0;
}

.page-footer {
    padding: 1rem;
    text-align: center;
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
    margin-top: auto;
}
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.flex {
    flex: 1; 
}
body {
    margin: 0;
    padding: 0;
    background-image: url("../images/homepagebackground.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; 
    font-family: 'Josefin Sans', sans-serif;
    background-color: #412939;
}
    /* change placement of bee so its not the same as the first page!! */
    .bee {
        margin-top:100px;
        width: 10%;
        position: absolute;
        transform-origin: 0% 0%; 
        animation: bee-animation 60s ease infinite; /* 60 seconds so it goes at a normal speed */
    }
    @keyframes bee-animation {
        /* Random points in an attempt to make the flying look natural */
        0%{ left:80px;transform: rotate(50deg);}
        10%{ left:44px;transform: rotate(65deg);}
        12%{ right:105px;transform: rotate(45deg);}
        15%{ left:55px;transform: rotate(23deg);}
        56%{ left:800px;transform: rotate(15deg);}
        10%{ left:500px;transform: rotate(180deg);}
        75%{ left:25px;transform: rotate(15deg);}
        64%{ right:80px;transform: rotate(70deg);}
        30%{ right:100px;transform: rotate(15deg);}
        99%{ left:600px;transform: rotate(67deg);}
        78%{ right:400px;transform: rotate(55deg);}
        85%{ right:25px;transform: rotate(15deg);}
        50% {left:300px;transform: rotate(-360deg);}
        100% {left:50px;transform: rotate(30deg);}
        }

        .orangetree {
            animation: treejump 3s infinite;
            transform-origin: 50% 100% 0;
            position: absolute;
            transition: transform .2s, filter .2s;
            bottom: 25%;
            left: 1.3%;
            width: 30%;
        }
        .orangetree:hover {
            transform: scale(1.2); 
            filter: brightness(1.2); 
        }
        @keyframes treejump {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-5px); 
            }
            60% {
                transform: translateY(-5px); 
            }
        } 
        .toolshed {
            animation: shedjump 3s infinite;
            transform-origin: 50% 100% 0;
            transition: transform .2s, filter .2s;
            position: absolute;
            bottom: 20%;
            left: 68%;
            width: 20%;
        }
        .toolshed:hover {
            transform: scale(1.2); 
            filter: brightness(1.2); 
        }
        @keyframes shedjump {
            0%, 30%, 60%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-2px); 
            }
            60% {
                transform: translateY(-2px); 
            }
        }
        .moon {
            animation: moonjump 3s infinite;
            transform-origin: 50% 100% 0;
            transition: transform .2s, filter .2s;
            position: absolute;
            bottom: 80%;
            left: 90%;
            width: 5%;
        }
        .moon:hover {
            transform: scale(1.2); 
            filter: brightness(1.2); 
        }
        @keyframes moonjump {
            0%, 30%, 60%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-2px); 
            }
            60% {
                transform: translateY(-2px); 
            }
        }
        .ladybug {
            animation: crawl 20s linear infinite; 
            transform-origin: 50% 100% 0;
            transition: transform .2s, filter .2s;
            position: absolute;
            bottom: 0;
            left: 80%;
            width: 2.5%;
        }
        .ladybug:hover {
            transform: scale(1.2); 
            filter: brightness(1.2); 
        }
        @keyframes crawl {
            0% {
                transform: translateX(0) translateY(0) rotate(60deg);
            }
            15% {
                transform: translateX(5) translateY(30) rotate(30deg);
            }
            25% {
                transform: translateX(-20px) translateY(10px) rotate(-10deg);
            }
            35% {
                transform: translateX(-40px) translateY(20px) rotate(-20deg);
            }
            50% {
                transform: translateX(0) translateY(0) rotate(0);
            }
            65% {
                transform: translateX(15px) translateY(15px) rotate(-10deg);
            }
            75% {
                transform: translateX(20px) translateY(-10px) rotate(90deg);
            }
            100% {
                transform: translateX(0) translateY(0) rotate(-30deg);
            }
        }
        
        
        
    .flower1 {
        animation: flower1jump 3s infinite;
        transform-origin: 50% 100% 0;
        transition: transform .2s, filter .2s;
        position: absolute;
        bottom: 0px;
        left: 5%;
        width: 10%;
    }
    .flower1:hover {
        transform: scale(1.2); 
        filter: brightness(1.2); 
    }
    @keyframes flower1jump {
        0%, 30%, 60%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-4px); 
        }
        60% {
            transform: translateY(-4px); 
        }
    }

    .flower2 {
        animation: flower2sway 10s infinite;
        transform-origin: 50% 100% 0;
        position: absolute;
        bottom: -10px;
        left: 25%;
        width: 9%; 
    }
    
    @keyframes flower2sway {
        60%, 0% { transform: rotate(10deg); }
        50% { transform: rotate(-10deg); }
    }
    
    .flower3 {
        animation: flower3sway 18s infinite;
        transform-origin: 100% 50% 0;
        position: absolute;
        bottom: -25px;
        left: 33%;
        width: 3%; 
    }
    @keyframes flower3sway {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px);
        }
    }
    
    .flower4 {
        animation: flower4sway 15s infinite;
        transform-origin: 50% 100% 0;
        position: absolute;
        bottom: -10px;
        left: 80%;
        width: 5%; 
    }
    
    @keyframes flower4sway {
        60%, 0% { transform: rotate(10deg); }
        50% { transform: rotate(-10deg); }
    }

    .flower5 {
        animation: flower5sway 30s infinite;
        transform-origin: 100% 50% 0;
        position: absolute;
        bottom: -25px;
        left: 85%;
        width: 4%; 
    }
    @keyframes flower5sway {
        0% {
            transform: translateY(-20px);
        }
        50% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-10px)
        }
    }

    .flower6 {
        animation: flower6sway 60s infinite;
        transform-origin: 50% 100% 0;
        position: absolute;
        bottom: -10px;
        left: 95%;
        width: 3%; 
    }
    
    @keyframes flower6sway {
        60%, 0% { transform: rotate(30deg); }
        50% { transform: rotate(-30deg); }
    }
    .flower7 {
        animation: flower7sway 20s infinite;
        transform-origin: 50% 100% 0;
        position: absolute;
        bottom: -10px;
        left: 15%;
        width: 5%;
    }
    @keyframes flower7sway { s
        0%, 100%{ transform: rotate(-6deg);}
        50%{ transform: rotate(6deg); }
    }
    .flower8 {
        animation: flower8sway 15s infinite;
        transform-origin: 50% 100% 0;
        position: absolute;
        bottom: 0px;
        left: 70%;
        width: 8.5%;
    }
    @keyframes flower8sway {
        0%, 100%{ transform: rotate(-6deg);}
        50%{ transform: rotate(6deg); }
    }
    .flower9 {
        animation: flower9sway 30s infinite;
        transform-origin: 100% 50% 0;
        position: absolute;
        bottom: -25px;
        left: 68%;
        width: 4%; 
    }
    @keyframes flower9sway {
        0%, 100%{ transform: rotate(-20deg);}
        50%{ transform: rotate(20deg); }
    }
    .flower10 {
        animation: flower10sway 30s infinite;
        transform-origin: 100% 50% 0;
        position: absolute;
        bottom: -10px;
        left: 3%;
        width: 2%; 
    }
    @keyframes flower10sway {
        0%, 100%{ transform: rotate(-20deg);}
        50%{ transform: rotate(20deg); }
    }
    .dot1 {
        background: #B3735C;          
        border-radius: 50%;       
        margin: 10px;
        left: 80%;               
        top: 10%;                 
        height: 9px;             
        width: 9px;              
        animation: pulse 3s infinite;
        transform-origin: center; 
        position: absolute;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(0.5);
        }
        
        50% {
            transform: scale(1);
        }
        
        100% {
            transform: scale(0.5);
        }
    }
    .dot2 {
        background: black;          
        border-radius: 50%;       
        margin: 10px;
        left: 10%;               
        top: 60%;                 
        height: 15px;             
        width: 15px;              
        animation: pulse 3s infinite;
        transform-origin: center; 
        position: absolute;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(0.5);
        }
        
        50% {
            transform: scale(1);
        }
        
        100% {
            transform: scale(0.5);
        }
    }
    .dot3 {
        background: #B3735C;          
        border-radius: 50%;       
        margin: 10px;
        left: 22%;               
        top: 20%;                 
        height: 20px;             
        width: 20px;              
        animation: pulse 5s infinite;
        transform-origin: center; 
        position: absolute;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(0.5);
        }
        
        50% {
            transform: scale(1);
        }
        
        100% {
            transform: scale(0.5);
        }
    }
    .dot4 {
        background: black;          
        border-radius: 50%;       
        margin: 10px;
        left: 89%;               
        top: 70%;                 
        height: 8px;             
        width: 8px;              
        animation: pulse 2s infinite;
        transform-origin: center; 
        position: absolute;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(0.5);
        }
        
        50% {
            transform: scale(1);
        }
        
        100% {
            transform: scale(0.5);
        }
    }
    .dot5 {
        background: #c38f7c;          
        border-radius: 50%;       
        margin: 10px;
        left: 95%;               
        top: 35%;                 
        height: 10px;             
        width: 10px;              
        animation: pulse 2s infinite;
        transform-origin: center; 
        position: absolute;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(0.5);
        }
        
        50% {
            transform: scale(1);
        }
        
        100% {
            transform: scale(0.5);
        }
    }
    .dot6 {
        background: #c38f7c;          
        border-radius: 50%;       
        margin: 10px;
        left: 75%;               
        top: 40%;                 
        height: 13px;             
        width: 13px;              
        animation: pulse 3s infinite;
        transform-origin: center; 
        position: absolute;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(0.5);
        }
        
        50% {
            transform: scale(1);
        }
        
        100% {
            transform: scale(0.5);
        }
    }
    .dot7 {
        background: #c38f7c;          
        border-radius: 50%;       
        margin: 10px;
        left: 10%;               
        top: 14%;                 
        height: 20px;             
        width: 20px;              
        animation: pulse 2s infinite;
        transform-origin: center; 
        position: absolute;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(0.5);
        }
        
        50% {
            transform: scale(1);
        }
        
        100% {
            transform: scale(0.5);
        }
    }

    .page-footer {
        background-color: #412939;
        padding: 20px;
        margin-top: auto;
        text-align: center;
        font-family: "Gotu", sans-serif;
    }
    
    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-images {
        margin-bottom: 10px; 
    }
    
    .footer-images a {
        display: inline-block;
        margin: 0 10px; 
    }
    
    .footer-images img {
        width: 40px;
        height: auto;
    }
    
    .footer-text {
        color: white;
        margin: 5px 0; 
    }