:root{
 --color:black;
}
body{
font-family: "Comfortaa", sans-serif;
}
.main{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.title{
    /* border: 2px solid black; */
    padding: 20px;
    font-size: 20px;
    color: white;
    background-color: var(--color);
}
.input{
     /* border: 2px solid black; */
     width: 95%;
     height: 100px;
     margin:30px 40px;
     box-shadow: 5px 6px 15px rgb(70, 155, 247 , 0.34);
     display: flex;
     justify-content: space-around;
    }
.same{
    flex: 1;
    height:70%;
    margin:10px 20px;
    padding-left:30px;
    font-size: 20px;
}
.input-btn{
    width: 100px;
    background-color: var(--color);
    border-radius:8px;
    box-shadow: 4px 5px 15px rgb(70, 155, 247,0.6);
    border: none;
    font-size: 50px;
    color: aliceblue;
}

.displays{
      /* border: 2px solid black; */
      display: flex;
      width: 95%;
      justify-content: space-around;
      margin-left:40px;
}

.com{
    /* border: 1px solid black; */
    flex:1;
    margin:20px;
    padding:20px 30px;
    background-color: var(--color);
    color: white;
}
.com h2{
    font-size:40px;
}
table{
    
    width: 80%;
    border-radius: 8px;
    border:2px solid #a8a8ad;
    box-shadow: 4px 4px 20px rgb(0, 0, 0,0.30);
}
.head th{
    background-color: var(--color);
    height:50px;
    color: aliceblue;
    font-size: 30px;
}
table tr{
    text-align: center;
    height:50px;
    font-size: 30px;
}

button{
    background-color: red;
}
@media (max-width:600px){
    .title{
    /* border: 2px solid black; */
    /* padding: 20px; */
    font-size: 15px;
    /* color: white; */
    background-color:black;
}
.main{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 2px;
}
.input{
     /* border: 2px solid black; */
     width: 95%;
     height: 250px;
     margin:30px 10px;
     box-shadow: 5px 6px 15px rgba(107, 108, 108, 0.34);
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     background-color: rgb(233, 232, 232);
    }
    .same{
    color: rgb(12, 12, 13);
    flex: 1;
    height:80%;
    margin:10px 20px;
    padding-left:30px;
    font-size: 20px;
}
.input-btn{
    background-color: rgb(12, 12, 13);
    color: rgb(168, 168, 172);
    flex: 1;
    height:80%;
    width: 90%;
    margin:10px 20px;
    padding-left:30px;
    font-size: 30px;
    box-shadow: 4px 4px 4px rgb(0,0,0,0.8);
}

    .displays{
      /* border: 2px solid black; */
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      width: 55%;
      margin-left:20px;
      margin-top: 20px;
}
.com h2{
    font-size:20px;
}
.com{
    box-shadow: 1px 3px 10px rgb(0, 0, 0,0.30);
    /* flex:1; */
    /* margin:10px; */
    padding:20px 10px;
    background-color: black;
    color: white;
}
.displays{
      /* border: 2px solid black; */
      display: flex;
      width: 90%;
      justify-content: space-around;
      margin-left:20px;
}
table{
    width:100%;
    border-radius: 9px;
    border:2px solid #a8a8ad;
    box-shadow: 4px 4px 20px rgb(0, 0, 0,0.30);
}
.head th,td{
    background-color: black;
    height:20px;
    color: aliceblue;
    font-size: 15px;
}
table tr{
    height:10px;
    font-size: 20px;
}

button{
    background-color: red;
}

}