@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

:root {
    --background-color: #181A1B;
    --text-color: #E8E6E3;
    /* no. */
    --not-today-color: black;
    /* bloody mondays */
    --monday-color: crimson;
    /* gotta cool down */
    --tuesday-color: steelblue;
    /* funny or annoying, you choose the orange */
    --wednesday-color: darkorange;
    /* gold day */
    --thursday-color: goldenrod;
    /* ghostly 13th */
    --friday-color: ghostwhite;
    /* looked cool */
    --saturday-color: slateblue;
    /* silence, monday's coming */
    --sunday-color: dimgray;
    /* pf, haha, some other time */
    --vacationday-color: transparent;
}

* {
    box-sizing: border-box;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    font-family: 'Montserrat', sans-serif;
}

html,
body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    color: var(--text-color);
    background-color: var(--background-color);
}

.container {
    min-height: 100%;
    display: flex;
    margin: 0 auto;
}

.content {
    padding: 16px;
    margin: auto;
}

.day-container {
    font-size: 32px;
    text-align: right;
    text-decoration: line-through;
}

.day-container.current {
    text-decoration: initial;
}

.prefix {
    opacity: .5;
}

.prefix.not-to {
    color: transparent;
}

.prefix.not-to+.day::after {
    background-color: var(--not-today-color);
}

.prefix.mon+.day::after {
    background-color: var(--monday-color);
}

.prefix.tues+.day::after {
    background-color: var(--tuesday-color);
}

.prefix.wednes+.day::after {
    background-color: var(--wednesday-color);
}

.prefix.thurs+.day::after {
    background-color: var(--thursday-color);
}

.prefix.fri+.day::after {
    background-color: var(--friday-color);
}

.prefix.satur+.day::after {
    background-color: var(--saturday-color);
}

.prefix.sun+.day::after {
    background-color: var(--sunday-color);
}

.prefix.vacation+.day::after {
    background-color: var(--vacationday-color);
}

.day {
    position: relative;
    text-transform: uppercase;
    opacity: .1;
}

.day-container.current .prefix,
.day-container.current .day {
    opacity: 1;
}

.day-container.current .day::after {
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 2px;
    right: 0;
}

.day-container.current .prefix.not-to {
    color: var(--not-today-color);
}

.day-container.current .prefix.not-to {
    color: var(--not-today-color);
}

.day-container.current .prefix.mon {
    color: var(--monday-color);
}

.day-container.current .prefix.tues {
    color: var(--tuesday-color);
}

.day-container.current .prefix.wednes {
    color: var(--wednesday-color);
}

.day-container.current .prefix.thurs {
    color: var(--thursday-color);
}

.day-container.current .prefix.fri {
    color: var(--friday-color)ite;
}

.day-container.current .prefix.satur {
    color: var(--saturday-color);
}

.day-container.current .prefix.sun {
    color: var(--sunday-color);
}

/* never happening, is it? */
.prefix.vacation {
    color: var(--vacationday-color) !important;
}

@media screen and (max-width: 576px) {
    .container {
        max-width: 100%;
    }
}

@media screen and (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media screen and (min-width: 768px) {

    .container {
        max-width: 720px;
    }
}

@media screen and (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}