:root {
    --selection-background: #151515;
    --color-foreground-primary: #ffffff;
    --color-foreground-secondary: #ffffff80;
    --color-background: #000000;
}

@font-face {
    font-family: 'Montserrat';
    src:
        /* IE9 Compat Modes */
        url('../assets/Montserrat-Thin.eot');
    src:
        /* IE6-IE8 */
        url('../assets/Montserrat-Thin.eot?#iefix') format('embedded-opentype'),
        /* Super Modern Browsers */
        url('../assets/Montserrat-Thin.woff2') format('woff2'),
        /* Pretty Modern Browsers */
        url('../assets/Montserrat-Thin.woff') format('woff'),
        /* Safari, Android, iOS */
        url('../assets/Montserrat-Thin.ttf') format('truetype'),
        /* Legacy iOS */
        url('../assets/Montserrat-Thin.svg#Montserrat-Thin') format('svg');
    /* font-display: swap; */
}

* {
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    color: var(--color-foreground-primary);
}

/* IE9  - Also picked up by most modern browsers */
::selection {
    background: var(--selection-background);
    color: var(--color-foreground-primary);
    text-shadow: none;
}

/* Safari & Chrome - Webkit Rendering */
::-webkit-selection {
    background: var(--selection-background);
    color: var(--color-foreground-primary);
    text-shadow: none;
}

/* Mozilla based - Gecko Rendering */
::-moz-selection {
    background: var(--selection-background);
    color: var(--color-foreground-primary);
    text-shadow: none;
}

a {
    text-decoration-style: dotted;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
    color: var(--color-foreground-secondary);
    transition: color 0.25s;
}

a:hover {
    color: var(--color-foreground-primary);
}

/* Background nebula */

html {
    background-color: var(--color-background);
}

body {
    background-size: cover;

    display: flex;
    justify-content: center;
    height: 100vh;
    width: 100vw;

    position: fixed;
}

#content {
    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    /* left: 50%; */
    /* transform: translateY(-50%) translateX(-50%); */

    padding-left: calc(0.1 * min(100vw, 100vh));
    padding-right: calc(0.1 * min(100vw, 100vh));

    text-align: center;
}

/* Text */

h1 {
    font-size: 40pt;
    margin: 0pt 0pt 20pt 0pt;
}