@font-face {
    font-family: 'Roboto Mono';

    src: url('/assets/fonts/RobotoMono-Regular.eot');
    src: url('/assets/fonts/RobotoMono-Regular.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/RobotoMono-Regular.woff2') format('woff2'),
    url('/assets/fonts/RobotoMono-Regular.woff') format('woff'),
    url('/assets/fonts/RobotoMono-Regular.ttf') format('truetype'),
    url('/assets/fonts/RobotoMono-Regular.svg#RobotoMono-Regular') format('svg');
}

:root {
    --primary-colour: #d33682;
    --secondary-colour: #6c71c4;
    --background-colour: light-dark(#eee8d5, #073642);

    color-scheme: light dark;
}

html, body {
    height: 100%;
    margin: 0;

    background-color: light-dark(#fdf6e3, #002b36);
    color: light-dark(#586e75, #93a1a1);

    font-family: 'Roboto Mono', monospace;
}

ul {
    list-style-type: "- ";
}

a {
    color: var(--primary-colour);
}

a:visited {
    color: var(--secondary-colour);
}

a:hover {
    filter: brightness(150%);
}

a:visited:hover {
    filter: brightness(150%);
}

main {
    width: 100%;

    @media screen and (min-width: 850px) {
        width: 850px;
    }

    margin-left: auto;
    margin-right: auto;

    flex-grow: 1;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

dt:before {
  content: '- ';
}