@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina|Carter+One|Days+One|Righteous|Oswald');
   /**************************
   Common sets
   ***************************/
   *{  
       margin:0;
       padding:0;       
       box-sizing: border-box;       
       text-align:center;  
       background: rgb(155, 241, 237);    
   }
   header{
       font-family: 'Righteous',sans-serif;
       display:block;
       position: fixed;
       top:0;
       left:0;
       width:100%;
       font-size:25px;
       background:rgb(167, 241, 238);
       padding: 10px;
       text-shadow:2px 2px 5px rgb(11, 121, 111);
       box-shadow: 0px 2px 20px #000;
   }
   button{
    font-family: 'Righteous',sans-serif;
      
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 5px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
   }
   button:hover{
       box-shadow: 2px 2px 10px #000;
   }
   button:focus{
       color:white;
       border:none;
       box-shadow:none;
   }
   main{
      
       display:flex;
       flex-direction:column;
       justify-content:center;
       align-items:center;
       margin:80px auto;
       width:100%;       
       flex-wrap:wrap;
       margin-bottom: 10px;
   }
   #info{
       text-align: center;
       padding:5px;      
   }
   .info{
       display:block;
       font-family: 'Righteous',sans-serif;
       width:55%;
       font-size:20px;
       box-shadow: 2px 2px 10px #000;
       background:rgb(149, 216, 216);
       margin: 5px;
       border-radius: 20px;
       padding:5px;
      
}
.info div{
    background:inherit;
}
#but{
    padding-top:5px;
    
}
button{
    color:rgb(15, 7, 31);
    background:rgb(192, 171, 171);
    margin:2px;
}

 .trans{
       display:block;
       margin: 5px;
       width: 48%;
       height:auto;       
       border-radius: 20px;
       box-shadow: 2px 2px 10px #000;
       background:rgb(149, 216, 216); 
       
   }
   
 .trans .header{
       background:rgb(149, 216, 216);       
       width:100%;
       padding:5px;
       border-bottom: 1px solid rgb(37, 136, 131);
       border-top-left-radius: 20px;
       border-top-right-radius: 20px;
       font-family: 'Righteous',sans-serif;
       font-size: 20px;
       text-shadow: 3px 3px 10px rgb(8, 118, 133);
       height:auto;
   }
 .trans .content{
     display:block;
       background:rgb(149, 214, 216);
       display:flex;
       flex-wrap:wrap;
       padding:15px;
      height:auto;
       font-size:15px;
       border-bottom-left-radius: 20px;
       border-bottom-right-radius: 20px;

   }
   .trans .content div{
       display:block;
       font-family: 'Oswald',sans-serif;
       font-size:1.5em;
       background: rgb(180, 234, 238);
       width:48%;
        box-shadow: 1px 1px 10px #000;     
       border-radius: 10px;
       margin-top:2px;
       margin-left:2px;
       padding:5px; 
       text-align: left;  
   }    
.disable-trans{
    display:hide;
}
h3{
    margin:20px 25px;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}

h3:hover{
    box-shadow: 0 0 50px; 
}
select{
    width:100%;
    background: white;
}
 
   footer{
       color:white;
       font-family: 'Days One', Times, serif;
       font-size: 15px;
       display:block;
       width:100%;
       background:rgb(63, 90, 90);
       padding: 15px;
       text-shadow: 2px 2px 10px #000;
       box-shadow: 0px -2px 20px #000;
   }
   form{
       font-family:'Oswald';
       display:none;
       position:fixed;
       top:10%;
       left:30%;
       right:30%;
      
      padding:20px;
      border-radius: 20px;
       box-shadow: 0px 0px 30px;
       opacity:0.95;
       background: #eee;
       font-size: 1.5em;
   }
   form input{
    font-family:'Oswald';
       width:100%;
       background:rgb(255, 252, 252);
       font-size:1em;
   }
   #ch-list{
       font-size:1em;
   }
   @media screen and (max-width:720px){
       main{
           margin-top:100px;
          width:100%;
          flex-direction: column;
          align-items: center;
       }
       .trans{
           width:95%;
       }
       .info{
           width:95%;
       }
       form{
         right:5%;
         left:5%; 
        
       }
   }