:root {
  --clr-bg: #0d1212; 
  --clr-text: #aecccd;
  --clr-heading: #45a1a2;
  --clr-link: #ffc825;
  --font-normal: Segoe ui;
}
  /* text */
h1, h2, h3, a, p{
  font-family: 'segoe ui';
  color: var(--clr-heading);
}
h1{
  font-weight: bolder;
  text-align: center;
  margin: 0 auto;
}
h2{
  font-weight: bolder;
  font-size: 28px;
  padding-left: 3vh;
}
h3{
  font-weight: bold;
  font-size: large;
  padding-left: 3vh;
}
pre {
  text-align: center;
  margin: 0 auto;
  font-weight: bold;
  font-family: default;
  color: var(--clr-text);
}

p {
  /* max-width: 75ch; */
  font-family: var(--font-normal);
  color: var(--clr-text);
  padding-left: 3vh;
}

  /* body */
body{
  background-color: var(--clr-bg);
}

  /* list */
ul{
  list-style: none;
  padding: 20px;
}
li{
  margin-bottom: 20px;
  border: 1px solid #cccccc83;
  border-radius: 5px;
  padding: 10px;
  transition: all 0.3s;
}
li:hover{
  border-color: #a0dcdc82;
  box-shadow: 0 0 15px #61acac98;
}

  /* link */
.e{
  padding-left: 3vh;
}
a, .e{
  color: var(--clr-link);
  text-decoration: none;
  transition: all 0.3s;
}
a:hover{
  color: rgb(255, 227, 85);
  text-decoration: underline;
  text-shadow: 0px 0px 10px rgba(255, 213, 0, 0.2);
}