html { overflow-x: hidden; background: #101820 } 
body { font-family: "Roboto", sans-serif; color: #ffffff; font-size: 16px; font-weight: 400; line-height: 1.625; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #101820 } 
* { border: none; margin: 0; outline: none; padding: 0; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } 
:after,
:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } 
ol,
ul { list-style: none } 
img { max-width: 100%; display: block; } 
a { color: var(--primayColor); text-decoration: underline; } 
a:focus,
a:hover { color: var(--textColor); text-decoration: none } 
.container { padding-left: 15px; padding-right: 15px; margin: 0 auto; max-width: 100%; } 
.btn,
:after,
:before,
a { -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; transition: all .3s linear 0s; } 
header { padding: 20px 0 } 
header .container { display: flex; align-items: center; justify-content: space-between } 
header .logo { max-width: 45px; } 
header .logo a { display: block; } 
header .logo:hover a { transform: translateY(10px) } 
header .btn { font-size: 14px; background-color: #ffffff; padding: 5px 15px; color: #101820; text-decoration: none; text-transform: uppercase; font-weight: 600; border-radius: 40px } 
header .btn:hover { background-color: #ffd100; color: #ffffff } 
@media only screen and (min-width:991px){
 .container { padding-left: 35px; padding-right: 35px; } 
}
 @media only screen and (max-width:479px) { header .logo { max-width: 25px; } 
 }