:root {
    --color-red: rgba(196, 4, 20, 1);
    --color-blue: rgba(48, 78, 237, 1);
    --color-green: rgba(43, 88, 45, 1);
    --color-orange: rgba(165, 67, 0, 1);
    --color-grey: rgba(74, 74, 74, 1);
    --black-transparent: rgba(0, 0, 0, 0.8);
}

body {
    background: black;
    color: white;
}

hr {
    background-color: #4a4a4a;
}

aside {
    nav {
        background-color: var(--black-transparent);
        a.graduate {
            &:hover {
                background: none;
            }
        }
        a, form {
            &:hover {
                background-color: #363636;
            }
        }
        a {
            &[aria-current="page"] {
                background-color: var(--color-blue);
            }
        }
    }
}

header {
    nav {
        span.graduate {
            &:hover {
                background: black;
            }
        }
    }
}

article {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #181717;
}

.notification {
    background-color: var(--color-blue);
}

[aria-description="logo"] {
    span {
        color: var(--color-red);
    }
}

video {
    background-color: black;
}

.red {
    background-color: var(--color-red);
    border-color: var(--color-red);
}

.blue {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.green {
    background-color: var(--color-green);
    border-color: var(--color-green);
}

.orange {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.grey {
    background-color: var(--color-grey);
    border-color: var(--color-grey);
}