body{
    display:flex;
    justify-content: center;
    align-items: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.main-container{
    width:50%;
    border-radius: 10px;
    height:100vh;
    background-color:rgba(0, 0, 0, 0.747);
}
.main-header{
    background-color: rgba(8, 247, 247, 0.349);
    padding:10px;
    text-align: center;
    margin:15px;
    color:white;
border-radius: 10px;
  
    text-transform: capitalize;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.inputarea{
    display: flex;
    align-items: center;
    justify-content:space-around;
    margin-top:50px;
}
label{
    color:rgb(255, 255, 255);

}
input{
    padding:10px;
    border-radius:5px;
    border:none;
    margin-top:10px;;

    
}
.input{
    display: flex;
    flex-direction: column;
}
button{
    margin-top:15px;
    width:50%;
    padding:10px;
    border-radius:5px;
    cursor: pointer;
    border:none;
    color:white;
    text-transform: capitalize;
    background-color:rgba(8, 247, 247, 0.349);

}
#result-area{
    background-color:rgba(8, 247, 247, 0.349) ;
   width:50%;
   height:230px;
   border-radius: 10px;
   padding:10px;
   text-align: center;
   color:white;
   text-transform: capitalize;
   margin-bottom:40px;
}
.pera-text{
    text-align: center;
    background-color:rgba(8, 247, 247, 0.349)  ;
    color:white;
    margin:10px;
    padding:5px;
    text-transform: capitalize;
}
@media screen and (max-width:1050px){
    .main-container{
        width:70%;
    }
    
}


@media screen and (max-width:767px){
    .main-container{
        width:90%;
    }
    
}