@use 'media';
@use 'theme';

body {
    background-color: var(--theme-background);
    color: var(--theme-text);
}

a#skip-navigation {
    position: fixed;
    top: -100%;
    right: 0;
    padding: 10px;
    &:focus {
        top: 0;
    }
}

.site {
    display: flex;
    flex-direction: column;
}

.contentarea {
    display: flex;
    flex-direction: column;

    main {
        width: 100%;
    }

    @include media.breakpoint(medium) {
        flex-direction: row-reverse;
    }
}

ul#updates {
    time {
        color: rgb(110, 110, 110); // Muted color
    }
}