@font-face {
    font-family: "Aileron";
    font-weight: 400 500;
    src: url("../fonts/Aileron.ecf66f2e4c18.otf") format("opentype");
}

@font-face {
    font-family: "Aileron-thin";
    font-weight: 100 300;
    src: url("../fonts/Aileron-thin.df8803f64e71.otf") format("opentype");
}

@font-face {
    font-family: "Aileron-bold";
    font-weight: 500 800;
    src: url("../fonts/Aileron-bold.0d1787667a5c.otf") format("opentype");
}

:root {
    --color-border: #d8d9dc;
    --color-text: #f9fafd;
    --color-accent: #ff4081;
    --color-bg-alt: #aaaaaa;

    --black: #484848;
    --white: #fff;
    --grey: #aaa;
    --light-grey: #ddd;


    --space-lg: 16px;
    --space-md: 12px;
    --space-sm: 8px;

}

body {
    font-family: 'Aileron', sans-serif;
}

a {
    text-decoration: none;
    color: var(--color-bg-alt)
}

.main-content {
    width: calc(100% - 32px);
    margin: 0 auto;
}

.main-content.main-content--full-screen {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}


@media print,
screen and (min-width: 768px) {
    .main-content {
        width: 80%;
    }
}

.hidden {
    display: none;
}