@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('/assets/css/global.css');
@import url('/assets/css/hero.css');
@import url('/assets/css/main.css');
@import url('/assets/css/head.css');
@import url('/assets/css/xp.css');
@import url('/assets/css/projects.css');
@import url('/assets/css/doing.css');

/* Reset */
* {padding: 0;margin: 0;box-sizing: border-box; font-family: 'Poppins', sans-serif; font-display: swap;}
body {background-color: var(--main-black);}
html {scroll-behavior: smooth;}

h1, h2, h3, h4, h5, h6, a, p , span {padding: 0;margin: 0;box-sizing: border-box;}

ul, li {list-style: none;}

a {text-decoration: none; color: var(--main-white);}

/* variaveis */
:root {
  --main-black: #111111;
  --main-black-bg: #11111180;
  --main-white: #ffffff;
  --primary-grey: #D9D9D9;
  --light-grey: #EAEEF4;
  --dark-grey: #B7BBC0;
  --highlight-blue: #088C9E;
  --highlight-blue-bg: #088C9E30;
  --alert: #FF484B;
  --warning: #E5A000;
}

h1 {font-size: 80px; font-weight: 400; line-height: 85px;}
h2 {font-size: 60px; font-weight: 400; line-height: 65px;}
h3 {font-size: 40px; font-weight: 400; line-height: 44px;}
h4 {font-size: 30px; font-weight: 400; line-height: 34px;}
h5 {font-size: 24px; font-weight: 400; line-height: 28px;}
h6 {font-size: 20px; font-weight: 400; line-height: 22px;}
p {font-size: 15px; font-weight: 300;}

.caption {font-size: 14px; font-weight: 600; line-height: 18px;}
.small {font-size: 12px; line-height: 16px;}
.tiny {font-size: 10px; line-height: 14px;}


@media (max-width: 1100px) {
   h1 {font-size: 40px; font-weight: 400; line-height: 45px;}
   h2 {font-size: 30px; font-weight: 400; line-height: 35px;}
   h3 {font-size: 20px; font-weight: 400; line-height: 24px;}
   h4 {font-size: 18px; font-weight: 400; line-height: 20px;}
   h5 {font-size: 16px; font-weight: 500; line-height: 18px;}
   h6 {font-size: 14px; font-weight: 500; line-height: 16px;}
   p {font-size: 13px;}
}

::selection {
  background-color: var(--highlight-blue-bg);
  color: var(--highlight-blue);
}
::-moz-selection {
  background-color: var(--highlight-blue-bg);
  color: var(--highlight-blue);
}
::-webkit-selection {
  background-color: var(--highlight-blue-bg);
  color: var(--highlight-blue);
}