body {
  background-color: var(--c2);
  color: var(--c4);
  font-family: "myFont";
}

:root {
  --c1: #9e9e9e; /*link + progress bar + selection*/
  --c2: #29335C; /*background*/
  --c3: #F3A712; /*link highlight*/
  --c4: #e3e3e3; /*text*/
}


@font-face {
  font-family: 'myFont';
  src: url('fonts_post_29sep24/LibertinusMono-Regular.ttf') format('truetype');
}

::selection {
  color: var(--c2);
  background-color: var(--c3);
}

a:link, a:visited {
  text-decoration: none;
  /*border: 0;
  border-radius: 5px;
  background-color: var(--c4);*/
  color: var(--c1);
  padding-right: 3px;
  padding-left: 3px;
  font-style: normal;
  border: 2px solid var(--c1);
}

a:hover, a:active {
  text-decoration: none;
  /*background-color: var(--c4);
  border: 0;
  border-radius: 5px;*/
  font-style: normal;
  color: var(--c3);
  border: 2px solid var(--c3);
}

.header {
  position: fixed;
  width: 60vw;
  left: 5vw;
  top: 5vh;
  height: 25vh;
  overflow-y: auto;
  
}

.navbar {
  position: fixed;
  font-size: 1.5em;
  line-height: 1.5em;
  width: 25vw;
  height: 60vh;
  bottom: 5vh;
  left: 5vw;
  overflow-y: auto;
  text-align: justify;
  font-style: italic;
  color: var(--c1);
}

.yap {
  position: fixed;
  font-size: 2em;
  height: 60vh;
  bottom: 5vh;
  width: 28vw;
  right: 38vw;
  overflow-y: auto;
  overflow-x: hidden;
}

.tags {
  color: #9e9e9e;
}

.bandcamp {
  position: fixed;
  font-size: 2em;
  width: 32vw;
  height: 84vh;
  bottom: 5vh;
  right: 2vw;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: hidden;
}

.progressbox {
  display: inline-block;
  width: 300px;
  height: 15px;
  background-color: var(--c1);
}

.progressbar {
  height: 100%;
  background-color: var(--c3);
}

.pgbnum {
  display: inline; 
  color: var(--c3); 
  font-weight: 1000;
}

.fun {
  position: fixed;
  width: 28vw;
  height: 50px;
  bottom: 50px;
  right: 41vw;
  overflow: hidden;
  text-align: right;
  color: var(--c1);
}

h5 {
  font-size: 2em;
  margin-top: 500px;
}