:root {
  --color-1: #fbbbad;
  --color-2: #ee8695;
  --color-3: #4a7a96;
  --color-4: #333f58;
  --color-5: #292831;
}

:root {
  --color-bg: var(--color-5);
  --color-text: var(--color-1);
  --color-header: var(--color-1);
}

html {
   height: 100%;
   margin: 0;
}
body {
  color: var(--color-text);
  font-family: Verdana;
  height: 100%;
  margin: 0;
}

#secretbg {
  background-color: var(--color-5);
  background-image: linear-gradient(to bottom, var(--color-5), var(--color-5) 15%, var(--color-4) 85%, var(--color-4) );
  z-index: -2;
  height: 100%;
  width: 100%;
  position: fixed;
}

canvas#threejs-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Ensures canvas is behind other content */
    display: block;
}

strong {
  color: var(--color-3); 
}

a {
  color: var(--color-2); 
}

h1 {
  width: 1000px;
  margin: auto;
  border-bottom: 4px dashed var(--color-header);
  padding-bottom: 4px;
  color: var(--color-header);
  text-align:center;
}

main {
  width: 860px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

article {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 15px;
  border: 2px dotted var(--color-1);
  border-radius: 10px;
  background-color: var(--color-bg);
}

h2 {
  margin: 0px;
  margin-bottom: 10px;
  padding: 0px;
}

article > footer {
  margin-top: 5px;
  text-shadow: 2px 2px 2px;
  text-align: right;
}

aside {
    position: fixed;
    right: 10px;
    top: 10px;
    background-color: rgb(from var(--color-bg) r g b / 0.8);
    padding: 10px;
    border-radius: 10px;
}

aside > ul {
  list-style:none;
  margin: 0;
  padding: 0;
}

aside > ul > li + li {
  border-top: 2px dotted var(--color-1);
  padding-top: 10px;
  margin-top: 10px;
}