:root {
  --color-dark-background: #00222e;
  --color-light-background: #007d89;
  --color-pink-main: #ff60ac;
  --color-primary-accent-hover: #ff69b1;
  --color-primary-light: #60e2ff;
  --color-primary-lightest: #9bedff;
  --gradient-main: linear-gradient(133.78deg, #255762 25.53%, #162526 79.6%);
  --gradient-main-transparent: linear-gradient(133.78deg, #255762d7 25.53%, #162526d8 79.6%);
  --gradient-transparent: linear-gradient(127.38deg, #60e2ff 0%, rgba(96, 226, 255, 0.2) 46%, #60e2ff 100%);
  --gradient-vertical-dark: linear-gradient(
    180deg,
    rgba(0, 50, 61, 0.856) 0%,
    rgba(0, 48, 65, 0.833) 48.5%,
    rgba(0, 50, 61, 0.856) 100%
  );
  --gradient-vertical-light: linear-gradient(
    180deg,
    rgba(85, 185, 239, 0.7) 0%,
    rgba(0, 125, 159, 0.5) 48.5%,
    rgba(85, 185, 239, 0.7) 100%
  );
  --gradient-vertical-logo: linear-gradient(180deg, #60e2ff 0%, #2a385d 100%);
  --gradient-alex: linear-gradient(
    180deg,
    rgba(85, 185, 239, 0.4) 0%,
    rgba(0, 125, 159, 0.2) 48.5%,
    rgba(85, 185, 239, 0.4) 100%
  );
  --index: 1vw;
  --gradient-vertical-light-semitransparent-bottom: linear-gradient(
    180deg,
    rgba(85, 185, 239, 0.7) 0%,
    rgba(0, 125, 159, 0.5) 48.5%,
    rgba(85, 185, 239, 0) 100%
  );
  --gradient-vertical-light-semitransparent-top: linear-gradient(
    180deg,
    rgba(85, 185, 239, 0) 0%,
    rgba(0, 125, 159, 0.5) 48.5%,
    rgba(85, 185, 239, 0.7) 100%
  );

  --index: calc(1vw + 1vh);
}

html {
  font-family: 'Kanit', 'Lexend exa', sans-serif;
  background-color: var(--color-dark-background);
  background-image: var(--gradient-main);
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--color-dark-background);
  overflow-x: hidden;
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
ul,
ol {
  padding: 0;
  margin: 0;
}

.not-scrollable {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.main-content {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(133.78deg, #255762 25.53%, #162526 79.6%);
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-direction: column;
  padding: 60px 20px 20px;
}

.logo {
  width: 200px;
  margin-bottom: 80px;
}

.maintanace {
  width: 160px;
  margin-bottom: 48px;
}

.title {
  color: #fff;
  font-family: 'Kanit';
  font-weight: 400;
  font-size: calc(var(--index) * 3);
  text-align: center;
  line-height: 1.2;
}

.text {
  color: #fff;
  font-family: 'Kanit';
  font-weight: 200;
  font-size: calc(var(--index) * 1.5);
  text-align: center;
  margin-bottom: 48px;
}

.footer-section-socials-container {
  display: flex;
  flex-direction: row;
  gap: 32px;
  width: fit-content;
}

.footer-section-social {
  width: 100px;
  height: 100px;
  transition: 0.5s;
  border-radius: 50%;

  &:hover {
    scale: 115%;
  }
}

.footer-section-social:hover {
  box-shadow: 0 0 10px #03c3fe, 0 0 20px #03c3fe, 0 0 30px #03c3fe, 0 0 50px #03c3fe, 0 0 120px #03c3fe;
}

.footer-section-social-img:hover {
  background-color: #ffffff;
  box-shadow: 0 0 10px #03c3fe, 0 0 20px #03c3fe, 0 0 30px #03c3fe, 0 0 50px #03c3fe, 0 0 120px #03c3fe;
}

.footer-section-social-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: 0.5s;
}

/* ---------- FONTS ---------- */
/* KANIT */
/* kanit-100 - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 100;
  src: url('../../fonts/kanit-v15-latin-100.woff2') format('woff2');
}
/* kanit-100italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 100;
  src: url('../../fonts/kanit-v15-latin-100italic.woff2') format('woff2');
}
/* kanit-200 - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 200;
  src: url('../../fonts/kanit-v15-latin-200.woff2') format('woff2');
}
/* kanit-200italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 200;
  src: url('../../fonts/kanit-v15-latin-200italic.woff2') format('woff2');
}
/* kanit-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  src: url('../../fonts/kanit-v15-latin-300.woff2') format('woff2');
}
/* kanit-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 300;
  src: url('../../fonts/kanit-v15-latin-300italic.woff2') format('woff2');
}
/* kanit-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/kanit-v15-latin-regular.woff2') format('woff2');
}
/* kanit-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 400;
  src: url('../../fonts/kanit-v15-latin-italic.woff2') format('woff2');
}
/* kanit-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  src: url('../../fonts/kanit-v15-latin-500.woff2') format('woff2');
}
/* kanit-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 500;
  src: url('../../fonts/kanit-v15-latin-500italic.woff2') format('woff2');
}
/* kanit-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  src: url('../../fonts/kanit-v15-latin-600.woff2') format('woff2');
}
/* kanit-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 600;
  src: url('../../fonts/kanit-v15-latin-600italic.woff2') format('woff2');
}
/* kanit-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/kanit-v15-latin-700.woff2') format('woff2');
}
/* kanit-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 700;
  src: url('../../fonts/kanit-v15-latin-700italic.woff2') format('woff2');
}
/* kanit-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  src: url('../../fonts/kanit-v15-latin-800.woff2') format('woff2');
}
/* kanit-800italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 800;
  src: url('../../fonts/kanit-v15-latin-800italic.woff2') format('woff2');
}
/* kanit-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 900;
  src: url('../../fonts/kanit-v15-latin-900.woff2') format('woff2');
}
/* kanit-900italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 900;
  src: url('../../fonts/kanit-v15-latin-900italic.woff2') format('woff2');
}

/* NICO MOJI */
@font-face {
  font-family: 'Nico-Moji';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.woff2) format('woff2');
}