:root {
    --asp-green: #194541;
    --asp-darkgreen: #0f2b28;
    --asp-brightgreen: #29675a;
    --asp-orange: #ff5747;
    --custom-dark: rgb(59, 59, 59);
    --gray-var: gray;
    --white-var: whitesmoke;
}
html {
    background-color: var(--asp-darkgreen);
}
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    list-style: none;
}
aside {
    float: left;
    position: sticky;
    top: 0;
    height: 100vh;
    width: 10vw;
    min-width: 100px;
    padding-top: .1rem;
}
header, header h1 {
    color: var(--white-var);
}
main {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}
[class*="container"] {
    background-color: var(--white-var);
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
}
[class*="container"] h1 {
    overflow:hidden;
}

svg {
    position: relative;
    z-index: -10;
}
aside a.link {
    color: var(--white-var);
    padding: .2rem;
    margin-bottom: .5rem;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
h1, h2, p, a {
    color: var(--custom-dark);
    padding: 1rem;
    transition: 250ms;
}
h1 {
    padding-left: 0;
}
p {
    color: var(--gray-var);
    padding: .5rem 0;
}


li {
    display: flex;    
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
li:not(:last-child) {
    border-bottom: lightgray 2px solid;
}
.link {
    display: flex;
    align-items: center;
    color: var(--white-var);
    background-color: var(--asp-brightgreen);
    width: max-content;
    font-weight: bold;
}
.desc {
    width: 100%;
}



.link:hover {
    background-color: var(--asp-orange);
}
li:hover .desc {
    color: var(--custom-dark);
}
.ass:before {
    content: "Assignment: ";
}
.desc::before {
    content: "Description: ";
}
li:hover .desc::before {
    color: var(--asp-orange);
}

.white-fill {
    fill: white;
}
.red-fill {
    fill: var(--asp-orange);
}