/*page layout styling*/  
* {
  margin:0;
  padding:0;
 }

  body, html{
    height: 100vh;
    font-size:18px;
    font-family:"Trebuchet MS";
    color:white; 
  }

  .mainContainer, .subContainer{
    min-height: 100vh;
    font-size: 15px;
    display: -webkit-flex;
    flex-direction: column;
    background: -webkit-linear-gradient(-45deg, #50E3C2,#1F2667);
  }

  .subContainer{
  background: -webkit-linear-gradient(-45deg, #1F2667,#50E3C2) no-repeat;
  }

  div.header, div.exchangeFunction{
    padding:15px;
    margin:45px;
  }

/*menu components styling*/
  div.menuBar{
    float:left !important;
    padding:10px;
  }

  div#button button{
    padding:10px;
    background-color:transparent;
    border:1px solid white;
    outline:none;
    border-radius:5px;
    text-transform: uppercase;
    font-family:"Trebuchet MS";
    height:10%;
    color:white;
    min-width:20%;
    margin-top:4px;
   float:right !important;
  }

  div.menu, div.menuShorter{
    width: 30px;
    height: 4px;
    background-color: white;
    margin: 4px 0;
    border-radius:3px;
  }

  div.menuShorter{ width: 20px;}

/*heading components styling*/
  div.title p#t1{
  text-align:right;
  margin-right:10px;
  font-size:11px;
  }

  div.title h3, div.title h4{ text-align:center; margin:15px;}

  div.title h3 { margin-top: 35px; }

  div.title{ height:20%; }

  div.title h4{ color:#50E3C2; }

  /* main section */
  div.exchangeFunction{
    background-color:rgb(10,10,10,0.7);
    box-shadow: 2px 2px 5px black;
    display: -webkit-flex;
    flex-direction: column;
    width: 70%;
    height: auto;
    margin: 0 auto;
    border-radius: 3px;
    padding: 25px;
  }

/*exchange rate converter styling*/
  div.converter{
    display:grid;
    grid-template-columns: 1fr 0.1fr 1fr;
    margin:20px;
  }

/*select elements  and relevant country flags styling*/
  div#fromCurrImage, div#toCurrImage{
    display:flex;
    justify-content:center;
    padding:10px;
  }

  div#fromCurrImage img, div#toCurrImage img{
    border: 1px solid white;
    padding:8px 15px;
    float:left;
  
  }

  div#fromCurrImage select, div#toCurrImage select{
    background-color:transparent;
    outline:none;
    border:1px solid white;
    cursor:pointer;
    color:white;
    width:70%;

    border-radius:0;
    }

  div#fromCurrImage select option, div#toCurrImage select option{
    background-color:rgb(10,10,10,0.8);
  }

/*arrows styling*/
  div.arrows {
    display: flex;
    justify-content: center;
    padding:15px;
  }

  div.arrows p{
    margin:-7px;
  }

  div.arrows p#rotateArrow{
   transform: rotate(180deg);
  }

/*input elements styling*/
  form{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  form div{
    padding-top:5px;
    margin:20px 0;
    display:flex;
    justify-content:center;
  }

 form input{
    background-color:transparent;
    border:1px solid rgb(255,255,255,0.4);
    color:white;
     border-radius:5px;
   padding:10px;
  }

  form button{
    padding:15px;
    background-color:transparent;
    border:1px solid #50E3C2;
    outline:none;
    text-transform: uppercase;
    font-family:"Trebuchet MS";
    cursor: pointer;
    color:#50E3C2;
    min-width:15%;
    border-radius:5px;
    display:inline;
   margin:10px 0 0 15px;
  }

  form button:hover{
    background-color:#50E3C2;
    color:black;
  }

/*currency symbols styling*/
  div.inputs p{
   font-size:20px;
   margin:5px;
   color:#50E3C2;
  }

/*relative link styling*/
  div.exchangeFunction p.link{
  text-align: right;
  color:white;
  text-decoration:none;
  font-size:10px;
   margin-top:20px;
}

  p.link a{
  color:white;
  text-decoration:none;
  font-size:10px;
  }

  p.link a:hover{
  color:#50E3C2;
  }

/* media queries */
@media screen and (max-width: 800px) {
  div.converter{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
  }

  div.arrows{
    display: none;
  }
}