@font-face {
  font-family: 'BarecastRegular';
  src: url(fonts/Barecast-Regular.otf);
}

@font-face {                  
  font-family: 'Illusion-Italic';
  src: url(https://humantooth.neocities.org/fonts/IllusionSerif-Italic.woff2);
  font-weight: normal;
  font-style: normal;
} 

html {
  background-color: bisque;
  color: black;
  font-family: consolas;
  letter-spacing: -0.05em;
}

body {
  margin: 0;
}

#boatop { 
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: calc(55vh - 100px);
  margin-top: 40px;
  height: 48px;
  width: 350px;
  gap: 10px;
  background-color:darkblue;
  font-weight: 400;
}

#boapara {
  border:inset;
  margin-top: 60px;
  display: flex;
  justify-content: left;
  align-items: center;
  text-align: left;
  width: 800px;
  margin-left: calc(55vh - 100px);
    gap: 60px;
  min-height: 50px; 
}

.septop {
  margin-top: 20px;
  margin-left: calc(55vh - 100px);
}

#sepbot {
  margin-left: calc(55vh - 100px);
}

#facts {
  display: block;  
  margin-top: 60px;
  margin-left: calc(55vh - 100px);
  color: darkred;
}

details {
  margin-bottom: 12px; 
}

#title {
  margin-top: -30px;
  margin-left: calc(55vh - 100px);
}


summary {
  cursor: pointer;
  font-weight: bold;
  list-style: none; 
}
summary::-webkit-details-marker {
  display: none;
}

#boa {
  font-family: monospace;
}

.boacontainer {
    margin-top: 40px;
    margin-left: calc(15vh - 100px);
  justify-content: left;
  align-items: left;
  min-height: 300px; 
  text-align: left;
  gap: 15px;
width: 800px;
}

.tracklist {
  gap: 20px; 
  margin-top: 30px;
  margin-left: calc(55vh - 100px);
  font-weight: lighter;
  color:darkblue
}

#bottom {
  margin-top: 50px;
  
  display: flex;
      justify-content: center;
      align-items: center;
    gap: 15px;
}