@font-face {
	font-family: "Funnel Sans";
	src: url(fonts/FunnelSans-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url(fonts/IBMPlexMono-Regular.ttf);
}
* {
    font-family: 'Funnel Sans';
}
body {
    background: linear-gradient(to bottom, #e9643a, #000000);
    background-color: #000000;
    background-repeat: no-repeat;
    height: 600px;
}

h1 {
    margin-top: -24px;
    margin-bottom: -4px;
    font-size: 100px;
    color: #FFFFFF;
}
h2 {
    margin-top: -8px;
    margin-bottom: 0px;
    font-size: 64px;
    color: #FFFFFF;
}
h3 {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 48px;
    color: #FFFFFF;
}
h4 {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 32px;
    color: #FFFFFF;
}

p, ul, li {
    font-size: 24px;
    color: #FFFFFF;
    margin-top: 2px;
    margin-bottom: 2px;
}
sup, sub {
    font-size: 16px;
}

hr {
    background: linear-gradient(to right, #e9643a, #e9643a, #00000000, #00000000);
    background-image: linear-gradient(to right, #e9643a, #e9643a, #00000000, #00000000);
    border-image: linear-gradient(to right, #e9643a, #e9643a, #00000000, #00000000);
    height: 4px;
    border: 0;
    border-style: solid;
}

a {
    color: #e9643a;
}
code {
    font-family: 'IBM Plex Mono';
    background-color: #000000;
    border-top: 0px;
    border-bottom: 0px;
    border-radius: 4px;
    border-color: #000000;
    border-style: solid;
}
summary {
    cursor: pointer;
    list-style: none;
}

h2:hover, h3:hover, h4:hover {
    background: linear-gradient(to right, #e9643a4F, #e9643a4F, #00000000, #00000000);
}
a:hover {
    background: #e9643a;
    color: #000000;
}
a#CODE:hover, code#LINK:hover {
    background: #e9643a;
    color: #000000;
}
#NOHOV {
    background: #00000000
}
#WIP:hover {
    background: linear-gradient(to right, #ff00ff4F, #ff00ff4F, #00000000, #00000000)
}
#DONE:hover {
    background: linear-gradient(to right, #1793D14F, #1793D14F, #00000000, #00000000)
}
li {
    margin-left: -8px;
}