body{
    background-color: rgb(177, 218, 224);
    font-family: 'Roboto Mono', monospace;
   
}
.logo{
    margin-left: 45%;
    margin-top: 8%;
}
.main-div{
    background-color: white;
    width: 55%;
   
    margin-left: 22%;
    margin-top: 4%;
    border-radius: 20px;
    display: flex;
}
.div-cal{
   
    width:50%;
    margin-top: 3%;
    margin-left: 3%;
    border-radius: 10px;
    margin-bottom: 30px;
    margin-right: 1%;
    padding-left: 3%;
    height: 22rem;
}
.div-show{
    background-color:rgb(7, 73, 79) ;
    width:50%;
    margin-top: 3%;
    margin-right: 4%;
    border-radius: 10px;
    margin-bottom: 30px;
   
}
.logo-d{
    margin-left: 2%;
    z-index: 3;
}
.amount{
    background-color:rgb(218, 235, 237) ;
    border: 2px rgb(218, 235, 237) ;
    width:90%;
    height: 2rem;
    border-radius: 3px;
    margin-top: -2%;
    text-align: right;
    font-family: 'Roboto Mono', monospace;
    z-index: 5;
   background-repeat: no-repeat;
   background-position: left center;
   cursor: pointer;
}
#per{
    background-color: rgb(104, 194, 177)
}
.div-per[clicked]{
    background-color: rgb(104, 194, 177)
}
[ammount-checked]{
    border:rgb(114, 252, 197) solid 2px  ;
}
p{
    font-weight:bold;
    color:rgb(69, 110, 115);
    font-size: 15px;
}
p:nth-of-type(2){
    margin-top: 8%;
}
.tip-div{
 display: grid;
 gap: 4%;
 grid-template-columns: 1fr 1fr 1fr;
 width:90%;

}
.tip-div span{
    background-color:rgb(7, 73, 79) ;
    height: 2rem;
    width:100%;
    border-radius: 3px;
    color: white;
    text-align: center;
   padding-top: 2%;
   margin-top: -2%;
   margin-bottom: 7%;
   font-size: 20px;
   padding-top: 2%;
   cursor: pointer;
}
#input{
    background-color:rgb(218, 235, 237) ;
    height: 2rem;
    width:95%;
    border-radius: 3px;
    color: white;
    text-align: center;
   padding-top: 2%;
   margin-top: -2%;
   margin-bottom: 7%;
   font-size: 20px;
   padding-top: 2%;
   border-radius: 3px;
   border:2px solid white;
   cursor: pointer;
}
#input:hover{
    border:rgb(114, 252, 197) solid 2px
}
.tip-div div:hover{
    background-color: rgb(104, 194, 177);
    cursor: pointer;
    color:rgb(7, 73, 79) ;
    font-weight: bolder;
}
.tip-div div:nth-of-type(6){
    background-color:rgb(218, 235, 237) ;
    border: 2px rgb(218, 235, 237) ;
    color:rgb(7, 73, 79) ;
    font-weight: bolder;
}
p:nth-of-type(3){
    margin-top: 8%;
}
.error{
    margin-left: 30%;
    color:red;
   visibility: hidden;
}
.amount[error]{
    border: 2px solid red;
}
.display{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width:80%;
    margin-left: 15%;
    margin-top: 10%;
}
.header{
    font-weight:bold;
    color:rgb(69, 110, 115);
    font-size: 15px;
}
.cal{
  margin-top: 6%;
  font-size: 40px;
  color: rgb(104, 194, 177);
  font-family: 'Source Code Pro', monospace;
  
}
.cal1{
    margin-top: -96%;
  font-size: 40px;
  color: rgb(104, 194, 177);
  font-family: 'Source Code Pro', monospace;
}

button{
    width: 175%;
    margin-top: 20%;
    height: 2.4rem;
    background-color: rgb(19, 96, 103);
    border:2px solid  rgb(7, 73, 79);
    border-radius: 5px;
    font-size: 20px;
    text-transform: uppercase;
    font-family: 'Roboto Mono', monospace;
    color:rgb(15, 83, 89);
    font-weight: bold;
}
button:hover{
    background-color: rgb(104, 194, 177);
    cursor: pointer;
}
@media screen and (min-width: 280px) and (max-width:567px) {
   
    .main-div{
        width: 104%;
        margin-left: -1.9%;
        display: flex;
        flex-direction: column;
      
    }
    .div-cal{
   
        width:80%;
   
        padding-left: 6%;
    }   
    .amount{
        width: 100%;
    }
    .div-show{
        width: 82%;
        margin-left: 10%;
       margin-top: -8%;
       
    }
   
    button{
        margin-top: -25%;
        margin-bottom: 5%;
    }
  }
@media (min-width:360px) and (max-width:390px){
    .main-div{
        margin-top: 0%;
      
    }
    .logo{
        margin-left: 40%;
      margin-top: 5%;
    }
    .main-div{
        margin-top: 4%;
         margin-top: 5.2%;
         height: 39rem;
     }
}
@media (min-width:390px) and (max-width:567px){
    .main-div{
       height: 42rem;
        margin-top: 10%;
    }
    .logo{
        margin-left: 40%;
      margin-top: 13%;
    }
}