:root{
    --primary-color:#0066b3;
    --primary-color-opacity:#0065b3c5;
    --secondary-color:#c9c2c0;
    --font-size: 14px;
    --header:8vh;
}
html{scroll-behavior: smooth;}
@font-face {
    font-family: 'bold';
    src: url('../fonts/MyriadPro-Bold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'regular';
    src: url('../fonts/MyriadPro-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
html{color: var(--primary-color);}
body{overflow-x: hidden;margin: 0;color: var(--primary-color);background-color: white;font-size: var(--font-size);font-family: 'regular';padding-top: var(--header);}
::selection{background-color: var(--primary-color);color: white;}
header{position: fixed;width: 90%;padding: 0 5%;height: var(--header);top: 0;z-index: 20;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.521);
}
nav a,.logo{color: white;}
header,nav{justify-content: space-between;}
header,nav,.d-flex{display: flex;align-items: center;}
header::before,nav::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(90deg, #090979bd,#00d5ff57, #090979bd);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
    z-index: -1;
}
nav{flex-direction: column;gap: 5vw;text-transform: uppercase;display: none;}
.responsive nav{display: flex;position: absolute;left:0;top: var(--header);width: 100%;border-top: 1px solid var(--primary-color);padding:2% 0;}
.icon{width: 7%;}
.logo{width:30%}
.logo img{width: 100%;}
.d-flex{justify-content: center;}
h1,h2,h3{text-transform: uppercase;}
a{text-decoration: none;}
a:active{-webkit-tap-highlight-color: transparent;}
p{text-align: justify;text-align-last:center;padding: 0 8%;}
footer{gap: .5%;padding: 3% 0;flex-direction: column;font-size: 15px;}
footer a{color: var(--primary-color);}
.media-footer{gap: 5vw;margin: 1vh 0;}
@media only screen and (min-width: 600px) {
:root{--font-size: 18px;}
footer{font-size: var(--font-size);}
.icon{width:5%;}
}
@media only screen and (min-width: 992px) {
 ::-webkit-scrollbar {width: 12px; }
 ::-webkit-scrollbar-track {background: white; }
 ::-webkit-scrollbar-thumb {background-color: var(--primary-color); border-radius: 10px; border: 3px solid white;}
 .logo{width: 15%;}
 .icon{display: none;}
 footer{padding: 1% 0;}
 .media-footer{gap: 3vw;}
 nav{flex-direction: row;flex-grow: 1;padding-left: 20%;display: flex;}
}
@media only screen and (min-width: 1700px) {
    :root{
        --font-size: 22px;
    }
}