:root {
    --hue: 0;
/* The formula starts here */
    --tertiary-hue: calc(var(--hue) + 300);
    --accent-hue: calc(var(--hue) + 60);
    --primary-color: hsl(var(--hue), 50%, 20%);
    --pre-primary-color: hsl(var(--hue), 50%, 15%);
    --secondary-color: hsl(var(--hue), 50%, 90%);
    --tertiary-color: hsl(280, 80%, 80%);
    --accent-color: hsl(161, 80%, 80%);
}

body {
     /* BG color should be secondary */
     background-color: var(--secondary-color);
}
h1 {
     color: var(--tertiary-color);
     /* font-size:200%; */
     font-family: "Exile", sans-serif;
     font-size: 40pt;
     position: fixed;
     top: 0;
     left: 0;
     z-index: +1;
     margin-top: 0;
     margin-bottom: 0;
     padding-top: 15px;
     padding-left: 15px;

}
h2 {
     color: var(--primary-color);
     font-size:200%;
     font-family: "Roboto", sans-serif;
     z-index: -1;
     padding-top: 100px;
}
p {
     /* font-size:200%; */
     font-family: "Roboto", sans-serif;
     font-size: 30px;
     z-index: -1;
     /* This should have the primary color */
     color: var(--primary-color);
}
.controls {
     position: fixed;
     top: 0;
     right: 0;
     z-index: +1;
     padding-right: 20px;
     padding-top: 20px;
}
canvas {
     display: block;
     background-color: var(--accent-color);
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 15%;
     z-index: 0;
}
.c1 {
     display: flex;
     position: fixed;
     top: 0;
     left: 0;
     z-index: +1;
     width: auto;
     height: 15%;
}
.c2 {
     display: flex;
     position: fixed;
     top: 0;
     left: 0;
     z-index: +1;
     width: 40%;
     height: 15%;
}