@font-face {
font-family: 'Neometric';
src: local('Neometric Light'), local('Neometric-Light'),
url('font/Neometric-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}


@font-face {
font-family: 'Neometric';
src: local('Neometric Regular'), local('Neometric-Regular'),
url('font/Neometric-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}


@font-face {
font-family: 'Neometric';
src: local('Neometric Medium'), local('Neometric-Medium'),
url('font/Neometric-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}



@font-face {
font-family: 'Neometric';
src: local('Neometric Bold'), local('Neometric-Bold'),
url('font/Neometric-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}



@font-face {
font-family: 'Neometric';
src: local('Neometric Extra Bold'), local('Neometric-ExtraBold'),
url('font/Neometric-ExtraBold.ttf') format('truetype');
font-weight: bold;
font-style: 700;
font-display: swap;
}


@keyframes aparecerBaixo {
from {transform: translateY(25px); opacity: 0; filter: blur(5px)}	
to {transform: translateY(0); opacity: 1; filter: blur(0)}
}

@keyframes aparecerCima {
from {transform: translateY(-35px); opacity: 0; filter: blur(5px)}	
to {transform: translateY(0); opacity: 1; filter: blur(0)}
}


html {font-family: 'Neometric', sans-serif;line-height: 1.15;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent; box-sizing: border-box}
body {position: relative; font-family: 'Neometric', sans-serif;font-size: 19px;font-weight: 400;line-height: 1.65;color: #ffffff; text-align: left;background-color: #191919;height: 100vh;width: 100vw;display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 0 auto; box-sizing: border-box; overflow: hidden}
a {text-decoration: none}
ul, ul li {text-decoration: none; list-style: none; margin: 0; padding: 0}


#particles-js {position: absolute; left: 0; right: 0; top: 0; bottom: 0 ;width: 100%;height: 100%;z-index: -1;opacity: .2}


.bio img {display: block;width: 225px;margin: 0 auto; animation: aparecerBaixo .75s both}
.bio h1 {font-size: 15px;font-weight: 500;text-align: center; animation: aparecerBaixo .75s both; animation-delay: .25s}
.bio h1 span.more {color: #ff3d54}

.links {width: 400px;margin: 70px 0 0}

.links a {display: flex;align-items: center;width: 100%;color: inherit;overflow: hidden;backdrop-filter: blur(2.5px);-webkit-backdrop-filter: blur(2.5px);;background: linear-gradient(to right, #00000015, #ffffff05);border: 1px solid;border-left: none;border-image: linear-gradient(to left, #ffffff21, transparent) 1;margin: 0 0 22px 0}
.links a.destaque {background: #01346d; color: #fff; font-weight: 600}
.links a:last-child{margin-bottom: 0px}
.links a .icone {padding: 20px}
.links a .icone img {width: 25px; height: 25px; display: block}
.links a .titulo {padding: 0 30px;font-size: 18px;letter-spacing: .25px;font-weight: 300;line-height: 1.3}


.links .diagnostico .icone {background: linear-gradient(45deg, #2196F3, #49a8f3);}
.links .diagnostico .titulo span {color: #2e9cf3;text-transform: uppercase;font-weight: 600;}
.links .whatsapp .icone {background: linear-gradient(45deg, #039518, #038115);}
.links .site .icone {background: linear-gradient(90deg, #ff0170, #fe4052)}
.links .instagram .icone {background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}

.icon-fix {transform: scale(1.44);}

.links a:nth-child(1) {animation: aparecerCima .75s both; animation-delay: .6s}
.links a:nth-child(2) {animation: aparecerCima .75s both; animation-delay: 1s}
.links a:nth-child(3) {animation: aparecerCima .75s both; animation-delay: 1.4s}
.links a:nth-child(4) {animation: aparecerCima .75s both; animation-delay: 1.8s}
.links a:nth-child(5) {animation: aparecerCima .75s both; animation-delay: 2.2s}


@media (max-width: 768px) {
.bio img {width: 180px}
.bio h1 {font-size: 14px}	
.links {width: 85%;margin: 45px 0 0}	
.links a .titulo {font-size: 17px}
}

@media (max-width: 575px){
.links a .titulo {font-size: 3.6vw;}	
}

@media (max-width: 360px) {
.links {width: 95%}
}

@media (max-height: 600px) {
body {height: auto; overflow: visible; padding:30px 0}
}