@font-face {
    font-family: CourierPrime;
    src: url(../assets/fonts/courier-prime/CourierPrime.ttf);
}

@font-face {
    font-family: CourierPrimeBold;
    src: url(../assets/fonts/courier-prime/CourierPrimeBold.ttf);
}

body{
   background: linear-gradient(0deg, rgba(100,100,100,1) 0%, rgba(165,165,165,1) 46%, rgba(186,186,190,1) 49%, rgba(205,205,208,1) 50%, rgba(222,218,218,1) 58%, rgba(221,221,221,1) 91%, rgba(181,182,182,1) 100%);
   height: 1000px;
   font-family: CourierPrime;
}

#intent{
    margin: 0.375rem 0.5rem;
    float: left;
    border-radius: 3px;
}

.curren-name{
    margin: 0 0 0 4.7rem;
    line-height: 2.125rem;
    font-size: 1.25rem;

}

.navbar{
    list-style-type: none;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 85%;
    margin:  auto;
    padding:4% 0 0 0;
}
    
#logo{
    height: 45px;
    width: 231px;
    margin: 5% auto;
}
    
.input-slot{
    height: 40px;
    width: 220px;
    background-color: #ffffff;
    color: #227bd6;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.6rem;
    border: 1.5px solid #292b29;
}

#arrow{
    display: flex;
    justify-content: space-between;
    flex-flow: column wrap;
    margin: 2% auto;
}

#arrow img{
    height:70px;
    width:70px;
    transform: rotate(90deg);
    cursor: pointer;
}

#arrow img:hover{
    filter: brightness(1.2);
}
#date{
    font-family: CourierPrimeBold;
    font-size: 1.2rem;
    line-height: 0px;
    margin: 6% auto;
}
    
.wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 75%;
    margin:  auto;
}
    
#container-from{
    display: flex;
    flex-flow: column wrap;
    margin:  4% auto;
}

#container-to{
    display: flex;
    flex-flow: column wrap;
    margin:  4% auto;
}

#current-rate-a{
    text-align: center;
    margin: auto;
}
#current-rate-b{
    text-align: center;
    margin: auto;
}
    
#container-c-values{
    font-family: CourierPrime;
    display: flex;
    flex-flow: column wrap;
    margin: 4% auto;
    font-size: 1.28rem;
}

/*---------------------------- LARGE SMARTPHONES --------------------------------*/
/*-------------------------------------------------------------------------------*/

@media (min-height : 600px){
.navbar{
    padding: 4% 0 0 0;
}
    
#logo{
    height: 50px;
    width: 257px;
    margin: 6% auto;
}
    
#arrow img{
    height:100px;
    width:100px;
    transform: rotate(90deg);
}
    
#date{
    font-family: CourierPrimeBold;
    font-size: 1.3rem;
    line-height: 0rem;
    margin: 8% auto;
}
    
.wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 75%;
    margin: 4% auto;
}  

#container-c-values{
    font-family: CourierPrime;
    display: flex;
    flex-flow: column wrap;
    margin: 6% auto;
    font-size: 1.3rem;
}
}


/*---------------------------- XLARGE SMARTPHONES --------------------------------*/
/*-------------------------------------------------------------------------------*/

@media (min-width: 400px) {
.navbar{
    list-style-type: none;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 85%;
    margin:  auto;
    padding: 4% 0 0 0;
}
    
#logo{
    height: 50px;
    width: 257px;
    margin: 5% auto;
}
    
.input-slot{
    height: 50px;
    width: 220px;
    background-color: #ffffff;
    color: #227bd6;
    font-size:2rem;
    text-align: center;
    margin-bottom: 0.6rem;
    border: 1.5px solid #292b29;
}
    
#arrow img{
    height:100px;
    width:100px;
    transform: rotate(90deg);
}
    
#date{
    font-family: CourierPrimeBold;
    font-size: 1.375rem;
    line-height: 0rem;
    margin: 6% auto;
}
    
.wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 65%;
    margin: 4% auto;
}  

#container-c-values{
    font-family: CourierPrime;
    display: flex;
    flex-flow: column wrap;
    margin: 12% auto;
    font-size: 1.33rem;
}
}


/*---------------------------- SMALL TABLETS --------------------------------*/
/*-------------------------------------------------------------------------------*/

@media (min-width: 430px) {
    
.input-slot{
    height: 50px;
    width: 220px;
    background-color: #ffffff;
    color: #227bd6;ios
    font-size:2rem;
    text-align: center;
    margin-bottom: 0.6rem;
    border: 1.5px solid #292b29;
}
    
#arrow img{
    height:100px;
    width:100px;
    transform: rotate(90deg);
}
    
#date{
    font-family: CourierPrimeBold;
    font-size: 1.375rem;
    line-height: 0rem;
    margin: 6% auto;
}
    
.wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 40%;
    margin: 4% auto;
}  

#container-c-values{
    font-family: CourierPrime;
    display: flex;
    flex-flow: column wrap;
    margin: 12% auto;
    font-size: 1.33rem;
}
}


/*----------------------------------- IPAD --------------------------------------*/
/*-------------------------------------------------------------------------------*/

@media (min-width: 768px){

.navbar{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    flex-flow: nowrap;
    width: 85%;
    margin: 6% auto;
    padding:3% 0;
}
    
.wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 85%;
    margin: 16% auto;
}    
    
#logo{
    height: 50px;
    width: 257px;
    margin: 2% 4% 4% 0;
}

#date{
    font-family: CourierPrimeBold;
    font-size: 1.375rem;
    line-height: 3.5rem;
    margin: 2% 0;
}

.input-slot{
    height: 70px;
    width: 220px;
    font-size: 2rem;
    border: 1.5px solid #292b29;
}    
    
#arrow{
    display: flex;
    justify-content: space-between;
    flex-flow: column wrap;
    margin-top:0%;
    margin: auto;
    transform: rotate(90deg);
}
    
#arrow img{
    height:100px;
    width:100px;
}

    
#container-c-values{
    display: flex;
    flex-flow: column wrap;
    margin: 2% auto;
    font-size: 1.5rem;
}
    
}

/*--------------------------------- IPAD PRO --------------------------------------*/
/*-------------------------------------------------------------------------------*/

@media (min-width: 1000px){

.navbar{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: auto;
    padding: 6% 0;
}
    
#logo{
    height: 56px;
    width: 288px;
} 
    
.wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 75%;
    margin: auto;
}

#container-from{
    display: flex;
    flex-flow: column wrap;
    margin: 19% auto;

}
    
#container-to{
    display: flex;
    flex-flow: column wrap;
    margin: 19% auto;
}

#date{
    font-family: CourierPrimeBold;
    font-size: 1.75rem;
    line-height: 3.5rem;
}
#arrow img{
    height:140px;
    width:140px;
}

#container-c-values{
    display: flex;
    flex-flow: column wrap;
    margin: 4% auto;
    font-size: 1.4rem;
}
    
}

/*----------------------------------- LAPTOP --------------------------------------*/
/*-------------------------------------------------------------------------------*/

@media (min-width: 1200px){

.navbar{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    width: 75%;
    margin: auto;
    padding:3% 0;
}
    
#logo{
    height: 56px;
    width: 288px;
}
    
#date{
    font-family: CourierPrimeBold;
    font-size: 1.75rem;
    line-height: 3.5rem;
} 
    
#arrow img{
    height:160px;
    width:160px;
    transform: rotate(90deg);
}
    
.wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 65%;
    margin: auto;
}
   
#container-from{
    display: flex;
    flex-flow: column wrap;
    margin: 14% auto;

}
    
#container-to{
    display: flex;
    flex-flow: column wrap;
    margin: 14% auto;
}    
    
#container-c-values{
    display: flex;
    flex-flow: column wrap;
    margin:  auto;
    font-size: 1.6rem; 
}

.input-slot{
    border: none;
    height: 80px;
    width: 220px;
    background-color: #ffffff;
    color: #227bd6;
    font-size:2rem;
    text-align: center;
    margin-bottom: 0.6rem;
    border: 1.5px solid #292b29;
}
    
}

/*---------------------------------- DESKTOP ------------------------------------*/
/*-------------------------------------------------------------------------------*/

@media (min-width: 1400px) {

.navbar{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    width: 75%;
    padding:3% 0;
    
}

#logo{
    height: 68px;
    width: 350px;
}

#date{
    font-family: CourierPrimeBold;
    font-size: 2rem;
    line-height: 4.25rem;
}
    
#arrow img{
  height:200px;
  width:200px;
}

.wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 55%;
    margin: auto;
}

#container-from{
    display: flex;
    flex-flow: column wrap;
    margin: 13% auto;
    margin-bottom: 14%;
}

#container-to{
    display: flex;
    flex-flow: column wrap;
    margin: 13% auto;
    margin-bottom: 14%;
}

#container-c-values{
    margin: 2% auto;
    font-size: 1.85rem;
}   

}