* {
    box-sizing:border-box;
}

img{
    max-width:100%;
}

body {
    background:rgb(205, 231, 253);
    transition:background .5s;
    font-family:sans-serif;
}

.buttons {
    display:flex;
    justify-content:space-evenly;
    top:20px;
    z-index:10;
}

.plant-btn, .sprout-btn, .bloom-btn, .wilt-btn, .sun-btn, .cloudy-btn, .dark-btn, .rain-btn, .reset-btn {
    width:60px;
    height:35px;
    background:white;
    color:rgb(45, 45, 94);
    border:1px solid rgb(45, 45, 94);
    padding:2px;
    border-radius:12px;
    z-index:10;
}


.container {
    /* display:flex;
    justify-content:center;
    align-items:center; */
    position:fixed;
    margin:0; 
}

.box {
    background:rgb(102, 146, 102);
    width:100vw;
    margin:0;
    height:300px;
    position:fixed;
    top:600px;
    left:0;
}

.seed {
    left:750px;
    width:10px;
    height:12px;
    background:brown;
    opacity:0;
    z-index:10;
}

.seed.plant {
    opacity:1;
    z-index:10;
}

.plant {
    position:relative;
    animation-name: plant;
    animation-duration: 2s;
    animation-iteration-count:1;
    animation-timing-function:linear;
    animation-direction:normal;
    animation-fill-mode:forwards;
}

@keyframes plant {
    0% {
        top:10px;
        displya:none;
    }

    99% {
        opacity:1;
    }

    100% {
        top:600px;
        opacity:0;
    }
}

.stem.leafone.leaftwo {
    opacity:0;
    visibility:hidden;
    transition: opacity 1s, visibility 1s;
}

.stem {
    width:10px;
    height:80px;
    background:rgb(14, 92, 14);
    position:fixed;
    top:550px;
    left:755px;
    opacity:0;
    visibility:hidden;
    
}

.leafone {
    width:30px;
    height:20px;
    background:rgb(14, 92, 14);
    position:fixed;
    top:538px;
    left:727px;
    opacity:0;
    visibility:hidden;
}

.leaftwo {
    width:30px;
    height:20px;
    background:rgb(14, 92, 14);
    position:fixed;
    top:538px;
    left:765px;
    opacity:0;
    visibility:hidden;
}

.sprout {
    opacity:1;
    visibility:visible;
    transition: opacity 1s, visibility 1s;
}

.flowerstem {
    background:rgb(14, 92, 14);
    width:12px;
    height:180px;
    position:fixed;
    top:475px;
    left:755px;
    visibility:hidden;
    opacity:0;
}

.petalone, .petaltwo, .petalthree, .petalfour, .petalfive {
    width:90px;
    height:70px;
    border-radius:50%;
    background:rgb(250, 171, 224);
    position:fixed;
    border:1px rgb(255, 139, 211) dotted;
    visibility:hidden;
    opacity:0;
    z-index:10;
}

.petalone {
    bottom:285px;
    left:760px;
    rotate:30deg;
}

.petaltwo {
    bottom:285px;
    left:678px;
    rotate:-30deg;
}

.petalthree {
    bottom:345px;
    left:765px;
    rotate:-10deg;
}

.petalfour {
    bottom:345px;
    left:665px;
    rotate:10deg;
}

.petalfive {
    bottom:380px;
    left:720px;
    rotate:90deg;
}

.center {
    width:60px;
    height:60px;
    border-radius:50%;
    background:palegoldenrod;
    position:fixed;
    bottom:335px;
    left:730px;
    visibility:hidden;
    opacity:0;
    z-index:11;
}

.flowerleafone {
    background:rgb(14, 92, 14);
    width:70px;
    height:30px;
    border-radius:50%;
    position:fixed;
    bottom:240px;
    left:695px;
    rotate:20deg;
    visibility:hidden;
    opacity:0;
}

.flowerleaftwo {
    background:rgb(14, 92, 14);
    width:70px;
    height:30px;
    border-radius:50%;
    position:fixed;
    bottom:240px;
    left:760px;
    rotate:-20deg;
    visibility:hidden;
    opacity:0;
}

.bloom {
    opacity:1;
    visibility:visible;
    transition: opacity 1s, visibility 1s;
}

#dialog {
    position:fixed;
    top:250px;
    left:590px;
    width:350px;
    height:200px;
    border: 2px solid rgb(45, 45, 94);
    padding:10px;
    color:rgb(45, 45, 94);
    text-align:center;
    background:white;
    border-radius:10px;
    z-index:10;
}

.close-btn {
    height:20px;
    width:20px;
    text-align:center;
    background:rgb(205, 231, 253);
    color:rgb(45, 45, 94);
    border:1.5px solid rgb(45, 45, 94);
    position:relative;
    left:150px;
    font-weight:bold;
    border-radius:2px;
    z-index:10;
}

.close {
   display:none;
}

.sun {
    width:100px;
    height:100px;
    background:rgb(255, 252, 157);
    border-radius:50%;
    visibility:hidden;
    opacity:0;
    position:fixed;
    top:50px;
    right:150px;
    z-index:10;
}

.sun.sunny {
    visibility:visible;
    opacity:1;
    transition:visibility .5s, opacity .5s;
}

.ovalone {
    width:500px;
    height:175px;
    border-radius:50%;
    background:whitesmoke;
    position:fixed;
    top:100px;
    left:150px;
    visibility:hidden;
    opacity:0;
    transition:background .5s;
}

.circleone {
    width:200px;
    height:200px;
    border-radius:50%;
    background:whitesmoke;
    position:fixed;
    top:50px;
    left:180px;
    visibility:hidden;
    opacity:0;
    transition:background .5s;
}

.circletwo {
    width:250px;
    height:200px;
    border-radius:50%;
    background:whitesmoke;
    position:fixed;
    top:30px;
    left:350px;
    visibility:hidden;
    opacity:0;
    transition:background .5s;
}

.ovaltwo {
    width:500px;
    height:175px;
    border-radius:50%;
    background:whitesmoke;
    position:fixed;
    top:100px;
    left:850px;
    visibility:hidden;
    opacity:0;
    transition:background .5s;
}

.circlethree {
    width:200px;
    height:200px;
    border-radius:50%;
    background:whitesmoke;
    position:fixed;
    top:50px;
    left:880px;
    visibility:hidden;
    opacity:0;
    transition:background .5s;
}

.circlefour {
    width:250px;
    height:200px;
    border-radius:50%;
    background:whitesmoke;
    position:fixed;
    top:30px;
    left:1050px;
    visibility:hidden;
    opacity:0;
    transition:background .5s;
}

.cloudy {
    visibility:visible;
    opacity:1;
    transition: visibility .5s ease, opacity .5s ease, background .5s;
}

body.dark {
    background:rgb(161, 171, 180);
}

.cloudy.dark {
    background:rgb(114, 114, 114);
}

.wilt {
    animation: wilt 3.5s .2s 1 linear;
    animation-fill-mode: forwards;
}

@keyframes wilt {
    0% {
        visibility:visible;
        opacity:1;
        background:rgb(250, 171, 224);
    }

    50% {
        background:rgb(174, 149, 166);
    }

    100% {
        /* visibility:hidden; */
        opacity:0;
        background:rgb(174, 149, 166);
    }
}

.raincontainer {
    position:relative;
    width:100vw;
    height:100vh;
}

.rainone, .raintwo, .rainthree, .rainfour, .rainfive {
    width:100%;
    height:100%;
    position:absolute;
}

@keyframes rainone {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
.rainone {
    animation-name:rainone;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    visibility:hidden;
}

@keyframes raintwo {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.raintwo {
    animation-name:raintwo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    visibility:hidden;
}

@keyframes rainthree {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
.rainthree {
    animation-name:rainthree;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    visibility:hidden;
}

@keyframes rainfour {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.rainfour {
    animation-name:rainfour;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    visibility:hidden;
}

@keyframes rainfive {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
.rainfive {
    animation-name:rainfive;
    animation-duration: .3s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    visibility:hidden;
}

.rainy {
    visibility:visible;
}