* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --blue: #3A7DFF;
    --purple: #9966CC;
    --pink: #FF2492;
    --side-padding: 128px;

    @media screen and (max-width: 1100px) { --side-padding: 64px; }
    @media screen and (max-width: 900px) { --side-padding: 32px; }
    @media screen and (max-width: 500px) { --side-padding: 16px; }
}

html {
    scroll-behavior: smooth;
}

body {
    color: #fff;
    background-color: #090809;
    font-family: "Inria Sans", sans-serif;
}

body.lock-scroll {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6, .logo {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    line-height: 1.2;
    font-weight: bold;
}

a {
     text-decoration: none;
}

.logo {
    background-image: linear-gradient(to right, var(--blue), var(--purple), var(--pink));
    background-clip: text;
    color: transparent;
    user-select: none;
}

.slanted {
    position: relative;
    margin-top: var(--height);
    margin-bottom: var(--height);
    --skew: 2deg;
    --height: calc(100vw * tan(var(--skew)));
}

.slanted::before, .slanted::after {
    content: "";
    background-color: var(--slant-bg);
    height: var(--height);
    width: 100%;
    transform: skewY(var(--skew));
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.slanted::before { top: calc(-0.5 * var(--height)); }
.slanted::after  { top: calc(100% - 0.5 * var(--height)); }

.corner-dots {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    svg {
        width: 9px;
        height: 9px;
        border-radius: 1px;
    }
}