body {
    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;
    z-index: 0;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    flex: 1;
}

#contentpage {
    min-height: 100vh; 
    position: relative;
}
.intro-header {
    position: absolute;
    top: 100px;
    left: 50px;
    padding: 20px;
}
.page-intro {
    font-family: 'Sacramento', cursive;
    font-size: 2rem;
    color: var(--white);
    margin: 0;
}

.bee {
    margin-top: 100px;
    width: 2%;
    position: absolute;
    transform-origin: 0% 0%; 
    animation: bee-animation 60s ease infinite; /* 60 seconds so it goes at a normal speed */
}

@keyframes bee-animation {
    0%, 100% { left: 50px; transform: rotate(30deg); }
    10% { left: 44px; transform: rotate(65deg); }
    12% { right: 105px; transform: rotate(45deg); }
    15% { left: 55px; transform: rotate(23deg); }
    30% { right: 100px; transform: rotate(15deg); }
    50% { left: 300px; transform: rotate(-360deg); }
    56% { left: 800px; transform: rotate(15deg); }
    64% { right: 80px; transform: rotate(70deg); }
    75% { left: 25px; transform: rotate(15deg); }
    78% { right: 400px; transform: rotate(55deg); }
    85% { right: 25px; transform: rotate(15deg); }
    99% { left: 600px; transform: rotate(67deg); }
}

#tool-steam-container {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
}

@media (max-width: 768px) {
    .toolshed {
        bottom: 10%;
        left: 50%;
        width: 30%;
    }
}

.wateringcan a img,
.rake a img,
.gloves a img,
.wheelbarrow a img,
.tools a img,
.seed a img,
.pot a img {
    position: absolute;
    animation: jump 3s infinite;
    transform-origin: 50% 100% 0;
}

.wateringcan a img {
    width: 6%;
    bottom: 20%;
    left: 60%;
}

.rake a img {
    width: 25%;
    bottom: 30%;
    left: 0.5%;
    z-index: 3;
}

.gloves a img {
    width: 3%;
    bottom: 23%;
    left: 45%;
    z-index: 3;
}

.wheelbarrow a img {
    width: 12%;
    bottom: 25%;
    left: 30%;
    z-index: 3;
}

.tools a img {
    width: 4.5%;
    bottom: 15%;
    left: 20%;
    z-index: 3;
}

.seed a img {
    width: 3%;
    bottom: 25%;
    left: 75%;
    z-index: 3;
}

.pot a img {
    width: 4%;
    bottom: 28%;
    left: 5%;
    z-index: 3;
}

@keyframes jump {
    0%, 30%, 60%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 60% {
        transform: translateY(-2px); 
    }
}

.modal {
    position: fixed;
    inset: 0;
    background: linear-gradient(to bottom, var(--purple-dark), rgba(233, 222, 217, 0));
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 6; 
}

.skillcontent {
    position: relative;
    background-image: url("../images/headerbackground.png");
    background-repeat: no-repeat; 
    background-color: var(--white); 
    background-size: cover;
    opacity: 0.7;
    border-radius: 10px; 
    padding: 1em 2em;
    text-align: center;
}

.skillcontent h1 {
    font-family: "Aboreto", system-ui;
    font-weight: 400;
}

.skillcontent p {
    font-family: "Gotu", sans-serif;
    font-weight: 400;
}

.modal:target {
    display: flex;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--purple-dark);
    font-size: 30px;
    text-decoration: none;
}

#steam-container {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
}

.steam {
    position: absolute;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color: var(--white);
    margin-top: -75px;
    margin-left: 75px;
    z-index: 0;
    opacity: 0;
}

#steam1,
#steam3,
#steam2,
#steam4 {
    animation: steam 4s ease-out infinite;
}

#steam3 {
    animation-delay: 1s;
}

#steam2 {
    animation-delay: 0.5s;
}

#steam4 {
    animation-delay: 1.5s;
}

@keyframes steam {
    0% {
        transform: translateY(0) translateX(0) scale(0.25);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-200px) translateX(20px) scale(1);
        opacity: 0;
    }
}
.page-footer {
    background-color: #412939;
    padding: 20px;
    margin-top:auto;
    text-align: center;
    font-family: "Gotu", sans-serif;
    z-index: 10;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-images {
    margin-bottom: 1px; 
}

.footer-images a {
    display: inline-block;
    margin: 0 10px; 
}

.footer-images img {
    width: 40px;
    height: auto;
}

.footer-text {
    color: var(--white);
    margin: 5px 0; 
}

@media (max-width: 768px) {
    .steam {
        height: 100px;
        width: 100px;
    }

    #steam-container {
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .rake a img {
            width: 20%; 
            bottom: 25%;
            left: 5%;
    }
}


@media (max-width: 480px) {
    .steam {
        height: 75px; 
        width: 75px;
    }

    #steam-container {
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .rake a img {
        width: 15%; 
        bottom: 20%;
        left: 10%;
    }
}