/* =========================================================
   SKAYTECH
   GLOBAL CSS
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {

  --color-bg: #020509;

  --color-bg-light: #050b11;

  --color-surface:
    rgba(7, 18, 27, .65);

  --color-cyan: #00c8ff;

  --color-cyan-light: #67ddff;

  --color-blue: #006cff;

  --color-white: #ffffff;

  --color-text: #eaf8ff;

  --color-text-muted:
    rgba(220, 240, 250, .58);

  --border:
    rgba(0, 200, 255, .15);

  --border-hover:
    rgba(0, 200, 255, .55);

  --shadow-cyan:
    0 0 30px rgba(0, 200, 255, .18);

  --max-width: 1200px;

  --header-height: 80px;

}


/* =========================================================
   RESET
========================================================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  min-height: 100vh;

  overflow-x: hidden;

  background: var(--color-bg);

  color: var(--color-text);

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  -webkit-font-smoothing: antialiased;

}


img {

  max-width: 100%;

  height: auto;

  display: block;

}


a {

  color: inherit;

  text-decoration: none;

}


button {

  font: inherit;

}


::selection {

  background:
    rgba(0, 200, 255, .25);

  color: white;

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

  width: 7px;

}


::-webkit-scrollbar-track {

  background: #020509;

}


::-webkit-scrollbar-thumb {

  background:
    rgba(0, 200, 255, .35);

}


::-webkit-scrollbar-thumb:hover {

  background:
    var(--color-cyan);

}