*, *::before, *::after
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

html
{
    font-size: 62.5%;
    scroll-behavior: smooth;
    cursor: default;
}

html, body {
    overflow-x: clip;
}

:root
{
    /* COLORS */
    --mint: #67f2ab;
    --main-color: #32e032;
    --main-color-background: #191;
    --main-color-background-hover: #2c2;
    --blue: #039;
    --purple: #5566b7;
    --teal: #7086A0;
    /* #6A7C99 or #7086A0 */
    --main-white: #fefefe;
    --main-black: #050505;
    --almost-black: #151515;
    --off-black: #232425;
    --charcoal: #323232;
    --grey-1: #606069;
    --grey-2: #909099;
    --grey-3: #b0b0bb;
    --grey-4: #e0e0e0;
    
    --section-background-color: var(--main-text-color);

    /* TEXT */
    --text-color-main: #e9e9ea;
    --text-color-second: #424242;
    --text-color-grey: #727273;

    --font-family-main: "TikTok Sans", "Roboto", sans-serif;
    --font-family-second: "Kedebideri", sans-serif;

    --text-tiny: 1vw;
    --text-small: 1.6vw;
    --text-medium: 2.2vw;
    --text-large: 4.8vw;
    
    /* SPACING */
    --header-height: calc(2rem + 5vw);
    --section-max-width: 80vw;

    --margin-base: 4rem;
    --space-tiny: calc(var(--margin-base) / 4 + 1vw);
    --space-small: calc(var(--margin-base) / 2 + 2vw);
    --space-medium: calc(var(--margin-base) + 4vw);
    --space-large: calc(var(--margin-base) + 8vw);
    --space-giant: calc(var(--margin-base) + 14vw);

    /* OTHER */
    --main-radius: 4px;
    --main-border: 1px solid var(--text-color-grey);
    --service-grid-gap: 1.2vw;
    --first-dot: -2.4vw;
    --last-dot: 2.4vw;
}




/* ******************************************************************************************** */
/* **************************                                         ************************* */
/* **************************            BASE ELEMENTS                ************************* */
/* **************************                                         ************************* */
/* ******************************************************************************************** */



body
{
    font-family: var(--font-family-main);
    color: var(--text-color-main);
    background-color: var(--main-black);
    position: relative;
}

a:link,
a:visited
{
    color: inherit;
    text-decoration: none;
}

a:hover,
a:active
{
    color: inherit;
    text-decoration: none;
}

button
{
    all: unset;              /* wipes UA styles (incl. font, background, borders, etc.) */
    box-sizing: border-box;  /* predictable sizing */
    display: inline-block;   /* behaves like a normal element */
    color: inherit;
    font: inherit;
    text-align: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* Keep keyboard accessibility visible */
button:focus-visible
{
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


textarea
{
    font-family: inherit;
    resize: none;
}

ul,
ol
{
    list-style: none;
}

section
{
    min-height: 0;
    width: 100%;
}

.page__title
{
    font-size: 4rem;
}

.page__text
{
    font-size: 2rem;
}




/* ******************************************************************************************** */
/* **************************                                         ************************* */
/* **************************            CUSTOM ELEMENTS              ************************* */
/* **************************                                         ************************* */
/* ******************************************************************************************** */



.__dfcc
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.__dfc
{
    display: flex;
    flex-direction: column;
}

.__dfr
{
    display: flex;
    flex-direction: row;
}

.--ohidden
{
    overflow: hidden;
}

.--hidden
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* prevent line breaks */
    border: 0;
}


.text--tiny
{
    font-size: var(--text-tiny);
    font-weight: 400;
    letter-spacing: 0.9px;
    line-height: 1.2;
}

.text--small
{
    color: var(--grey-2);
    font-size: var(--text-small);
    font-weight: 400;
    letter-spacing: 0.9px;
    line-height: 1.3;
}

.text--medium
{
    color: var(--text-color-main);
    font-size: var(--text-medium);
    font-weight: 700;
    letter-spacing: 0.9px;
}

.text--large
{
    font-size: var(--text-large);
    font-weight: 700;
    letter-spacing: 1px;
}

.--highlighter
{
    color: var(--text-color-main);
    font-weight: 800;
}

.button3d
{
    font-size: 2.2vw;
    color: inherit;
    background: none;
    border: none;
    padding: 0.6vw 1.2vw;
    cursor: pointer;
    outline: none;
    border-radius: var(--main-radius);
    transition: box-shadow 0.12s ease, transform 0.12s ease, color 0.18s ease;
}
    
.button3d:hover,
.header__menu__button.is_open
{
    box-shadow: -0.12vw -0.12vw 0.12vw 0.06vw var(--text-color-grey);
    transform: translate(0.12vw, 0.12vw);
    color: var(--main-color);
}

.button2d
{
    font-size: 2.2vw;
    color: inherit;
    background: none;
    border: none;
    padding: 1vw 2vw;
    cursor: pointer;
    outline: none;
    border-radius: var(--main-radius);
    transition: color 0.18s ease, background-color 0.18s ease;
}
    
.button2d:hover
{
    background-color: var(--off-black);
    color: #fff;
}

.__phrase__text
{
    font-family: var(--font-family-main);
    font-weight: 300;
    font-size: 8rem;
    letter-spacing: 8px;
}

.space--tiny {margin-top: var(--space-tiny);}
.space--small {margin-top: var(--space-small);}
.space--medium {margin-top: var(--space-medium);}
.space--large {margin-top: var(--space-large);}
.space--giant {margin-top: var(--space-giant);}






/* ******************************************************************************************** */
/* **************************                                         ************************* */
/* **************************                BROWSER                  ************************* */
/* **************************                                         ************************* */
/* ******************************************************************************************** */



/* Scrollbar */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: var(--charcoal);
}

::-webkit-scrollbar-thumb {
  background-color: var(--grey-2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--grey-4);
}

::selection {
  background-color: var(--blue);
}

/* For Mozilla Firefox */
::-moz-selection {
  background-color: var(--blue);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--grey-2) var(--charcoal);
  scrollbar-gutter: stable;
}






/* ******************************************************************************************** */
/* **************************                                         ************************* */
/* **************************               ANIMATIONS                ************************* */
/* **************************                                         ************************* */
/* ******************************************************************************************** */



@keyframes send-message-dot {
  0%, 50% {
    opacity: 1;
    /* transform: translateY(0); */
  }
  25% {
    opacity: 0.25;
    /* transform: translateY(-0.15em); */
  }
}