body{
    background-color:rgb(15, 173, 235);
    height:100%;
    width:100%;
  
  }
  .container{
      display:grid;
      justify-content:center;
      margin-top: 7rem;
  }
  h2{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    word-spacing: 1px;
    color:rgb(247, 247, 247); 
  }
  h3{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color:rgb(253, 225, 17)
  }
  input{
    border-radius: 0px 40px 40px 0px;
    border:0px solid transparent;
    background-color: rgb(246, 238, 238);
    height:2rem;
    width:10rem;
    color:black;
  }
  input:hover{
    height:2.2rem;
    width:10.5rem;
    border:1px  solid rgb(0, 4, 255);
  }
  ul{
     color:aliceblue;
     list-style:square;
     font-family:cursive;
     font-size:30px;
  }

.action-button{
    border:0px solid transparent;
    background-color: white;
    height:2rem;
    width:5rem;
    margin-bottom:5px;
}

.action-button:hover{
  height:2.2rem;
  width:5.5rem;
  background-color: rgb(210, 200, 200);;
}
/*--------- media quries------------- */

@media screen and (max-width: 354px) {
  input{
    border-radius: 0px 40px 40px 0px;
    border:0px solid transparent;
    background-color: rgb(246, 238, 238);
    height:1.8rem;
    width:6rem;
    color:black;
  }
  input:hover{
    height:2rem;
    width:6.3rem;
    border:1px  solid rgb(0, 4, 255);
  }
  .action-button{
    border:0px solid transparent;
    background-color: white;
    height:1.4rem;
    width:3rem;
    margin-bottom:11px;
}
.action-button:hover{
  height:1.6rem;
   width:3.2rem; 
  background-color: rgb(210, 200, 200);;
}

ul{
  color:aliceblue;
  list-style:square;
  font-family:cursive;
  font-size:20px;
}
}