body{
    overflow-x: hidden;
}
.container{
    position:absolute;
    top: 10px;
    left: 50vw;
}
.chart-container{
    position: relative;
    width: 35vw;
    top: 0;
    left: 80%;
    transform: translateX(-50%);
    /* border:1px dashed black; */
    margin-bottom:20px;
    margin-bottom:20px;
}
.form{
    position: relative;
    left: 50%;
    transform: translateX(-200px);
}
.form input:nth-child(1){
    width: 400px;
    height: 25px;
}
.button{
    background-color: black;
    color: white;
    height: 30px;
    border: none;
}

.flexbox{
    width: fit-content;
    /* background-color: gray; */
    display: flex;
}
.flexbox div{
    margin: 1em;
    width: 15vw;
    height: 30vh;
    font-family: sans-serif;
    text-align: center;
    border-radius: 20px;
}
.flexbox div span{
    position: relative;
    font-size: 35px;
    font-weight: bolder;
}
.flexbox div h4{
    font-size: 20px;
}
.flexbox div p{
    font-weight: bolder;
}
.container1{
    color: red;
    background-color: #ff000024;
}
.container2{
    color: blue;
    background-color:#0000ff24;
}
.container3{
    color: green;
    background-color: #9aff0036;
}

.imageContainer{
    position: relative;
    left: 20vw;
    top: 10vh;
}
.imageContainer :hover{
    filter: grayscale(30%);
}
.title h5{
    position: relative;
    left: 30%;
    font-family: sans-serif;
    font-size: 15px;
    top: 50px;
    color: rgb(71, 71, 71);
}
@media only screen and (max-width: 700px){
    body{
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }
    .flexbox{
        align-items: center;
    }
    .flexbox div{
        width: 32vw;
        height: 15vh;
    }
    .flexbox div span{
        position: relative;
        font-size: 12px;
        font-weight: bolder;
    }
    .flexbox div h4{
        font-size: 12px;
    }
    .flexbox div p{
        font-weight: bolder;
        font-size: 10px;
    }
    .imageContainer{
        position: relative;
        top: 90vh;
        left: 7vw;
    }
    .imageContainer img{
        width: 70%;
    }
    .title h5{
        position: relative;
        top: 90vh;
    }
    .container{
        display: flex;
        flex-direction: column;
        top: 200px;
        left: -30vw;
    }
    .chart-container{
        width: 400px;
    }
}
