body, div, p, ul, h1 , img{
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ensures padding/border are included in the element's total width/height */
}

#banner {
    position: relative;
    background-image: linear-gradient(to bottom, rgb(174, 174, 174), white);
    height: 25vh;
    width: 100%;
    z-index: -1;
    /* align-items: center; */
    }
    #banner p{
        text-align: center;
        margin: 0;
        font-size: 5vw;
        font-family: "Courier";
        padding: 5vh 0 0 0;
    }
#body {
    position: relative;
    z-index: 1;
    /* margin: 25vh 0 0 0; */
    background-color: rgba(0, 0, 0, 0.1);
    background-blend-mode: darken;
    height: 75vh;
    width: 100%;
}
#body .container{
    display: flex;
    height: 100%;
    /* gap: 20vh 20vh; */
    justify-content: center;
    align-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    /* margin: 0 5vw; */
    /* align-items: baseline; */
}
#body .container .box {
    background-size: contain;
    text-align: center;
    transition: transform 0.2s ease-in-out;
}
#body .container .box img{
    object-fit: scale-down;
    width: 100%;
    height: 100%;
    padding: 0;
}
#body .container .box p{
    font-family: "Courier";
    position: relative;
}
.box:hover{
    transform: translateY(-10px);
}

@media screen and (orientation:portrait) {
    #body .container .box {
        height: 10vh;
        /* overflow-wrap: normal; */
    }
    #body .container{
        gap: 15vh 5vh;
        margin: 0 5vh;
    }
    #body .container .box p{
    padding: 1em 0 0 0 ;
    }
}
/* Landscape */
@media screen and (orientation:landscape) {
    #body .container .box {
        height: 10vw;
    }
    #body .container{
        gap: 15vw 5vw;
        margin: 0 5vw;
    }
}
/* 

 */
.petal-line {
    stroke: rgb(219, 165, 174);
    fill: pink;
}
.petal-seam {
    stroke: rgb(219, 165, 174);
    fill: transparent;
}
.petal {
    height: 100px;
    width: 100px;
    position: absolute;
    z-index: 50;
    transition: opacity .25s ease-out;
}
.petal.hidden {
    opacity: 0;
}    

#petal1 {
    animation:
     x1 3s 1 ease-in-out alternate,
     y1 3s linear 1,
     rot1 3s 1 linear alternate;
}
    @keyframes x1 {
        0% {
            left: 50%;
        }
        100% {
            left: 25%;
        }
    }@keyframes y1 {
        0% {
            top: -10%;
        }
        100% {
            top: 70%;

        }
    }@keyframes rot1 {
        0% {
            rotate: 0deg;
        }
        50%{
            rotate: -30deg;
        }
        100% {
            rotate: 0deg;
        }
    }

#petal2 {
    animation:
     x2 1.5s 2 ease-in-out alternate,
     y2 3s linear 1,
     rot2 3s 1 linear alternate;
}
    @keyframes x2 {
        0% {
            left: 45%;
        }
        100% {
            left: 25%;
        }
    }@keyframes y2 {
        0% {
            top: -10%;
        }
        100% {
            top: 60%;
        }
    }@keyframes rot2 {
        0% {
            rotate: 0deg;
        }
        50%{
            rotate: -30deg;
        }
        100% {
            rotate: 0deg;
        }
    }

#petal3 {
    animation:
     x3 1.5s 2 ease-in-out alternate,
     y3 3s linear 1,
     rot3 3s 1 linear alternate;
}
    @keyframes x3 {
        0% {
            left: 25%;
        }
        100% {
            left: 45%;
        }
    }@keyframes y3 {
        0% {
            top: -10%;
        }
        100% {
            top: 60%;
        }
    }@keyframes rot3 {
        0% {
            rotate: 0deg;
        }
        50%{
            rotate: -30deg;
        }
        100% {
            rotate: 0deg;
        }
    }

#petal4 {
    animation:
     x4 3s 1 ease-in-out alternate,
     y4 3s linear 1,
     rot4 3s 1 linear alternate;
}
    @keyframes x4 {
        0% {
            left: 30%;
        }
        100% {
            left: 115%;
        }
    }@keyframes y4 {
        0% {
            top: -10%;
        }
        100% {
            top: 50%;
        }
    }@keyframes rot4 {
        0% {
            rotate: 0deg;
        }
        50%{
            rotate: -30deg;
        }
        100% {
            rotate: 0deg;
        }
    }
#petal5 {
    animation:
     x5 3s 1 ease-in-out alternate,
     y5 3s linear 1,
     rot5 3s 1 linear alternate;
}
    @keyframes x5 {
        0% {
            left: 50%;
        }
        25% {
            left: 35%;
        }
        75% {
            left: 80%;
        }
        100% {
            left: 74%;
        }
    }@keyframes y5 {
        0% {
            top: -10%;
        }
        100% {
            top: 70%;
        }
    }@keyframes rot5 {
        0% {
            rotate: 0deg;
        }
        50%{
            rotate: -30deg;
        }
        100% {
            rotate: 0deg;
        }
    }