@font-face {
    font-family: "Monarch";
    src: url("fonts/MONARCH_1.4.otf") format("opentype");
}

@font-face {
    font-family: "Steinbeck";
    src: url("fonts/SteinbeckRegular.otf") format("opentype");
}

:root {
    --bgr-color: #000;
    --txt-color: #fff;
    --hl-color: #0000EE;
    --font-big: 150px;
    --font-small: 47px;
    --font-big-m: 120px;
    --font-small-m: 32px;
    --font-big-s: 40px;
    --font-small-s: 15px;
}

* {
    font-family: "Steinbeck", Helvetica Arial, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bgr-color);
}

h1 {
    color: var(--hl-color);
    font-family: "Monarch";
    font-size: var(--font-big);
    margin: 0;
    line-height: 0.8em;
}

p {
    color: var(--txt-color);
    margin: 0;
    padding-left: var(--font-small);
    padding-left: var(--font-small);
    font-size: var(--font-small);
    line-height: 1.2em;
}

a {
    text-decoration: none;
    color: var(--hl-color);
    font-size: var(--font-small);
    padding-left: var(--font-big);
    line-height: 1.5em;
}

a:visited {
    color: var(--hl-color);
}

span.hl {
    color: var(--hl-color);
}

#preloader {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 999;
    background-color: var(--bgr-color);
    transition: all 0.35s ease;
}

#preloader.hide {
    pointer-events: none;
    opacity: 0;
}

.fullscreen {
    background-color: var(--bgr-color);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
}

.container {
    box-sizing: border-box;
    z-index: 999;
}

@media (max-width: 1050px) {
    h1 {
        font-size: var(--font-big-m);
    }

    p {
        font-size: var(--font-small-m);
        padding-left: calc(var(--font-small-m) + 10px);
    }

    a {
        font-size: var(--font-small-m);
        padding-left: calc(var(--font-big-m) - 20px);
    }
}

@media (max-width: 700px) {
    h1 {
        font-size: var(--font-big-s);
    }

    p {
        font-size: var(--font-small-s);
        padding-left: var(--font-small-s);
    }

    a {
        font-size: var(--font-small-s);
        padding-left: calc(var(--font-big-s) + 5px);
    }
}