*, *::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;
}

:root
{
    --main-color-light-light: #abd;
    --main-color-light: #677b99;
    --main-color: #458;
    --main-color-dark: #235;
    --secondary-color-light-light: #f2bb72;
    --secondary-color-light: #ee9c55;
    --secondary-color: #d78548;
    --secondary-color-dark: #bf6f3e;
    --terciary-color: #c7c358;
    --main-text-color: #424242;
    --main-text-color-light: #efefef;
    --main-font-family: "Roboto", sans-serif;

    --section-margin: 4rem;
}

body
{
    font-family: var(--main-font-family);
    color: var(--main-text-color);

    /* Space for scrollbar */
    /* padding-left: calc(100vw - 100%); */

    position: relative;
    overflow-x: hidden;
}

a:link,
a:visited
{
    color: var(--main-text-color);
    text-decoration: none;
    display: block;
}

a:hover,
a:active
{
    color: var(--main-text-color-light);
}

img
{
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    touch-action: pan-x pan-y;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
}

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

ul,
ol
{
    list-style: none;
}

h1
{
    color: var(--main-color);
}

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

.page__title
{
    font-size: 4rem;
    position: relative;
    z-index: 11;
}

.page__text
{
    position: relative;
    font-size: 2.4rem;
    line-height: 1.6;

    z-index: 11;
}

.hidden
{
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
}

.purple__line,
.orange__line
{
    position: absolute;
}

#path-overlay path,
#path-overlay circle
{
  stroke-width: 1.2rem;
}