@font-face {
  font-family: IMFell Great Primer;
  src: url(./IMFellGreatPrimer-Regular.ttf);
}
@font-face {
  font-family: Averia Serif Libre;
  src: url(./AveriaSerifLibre-Regular.ttf);
}

button {
font-family: 'IMFell Great Primer';
}


  .sidebar {
    position: fixed;
    background-color: gray;
    height: 100vh;
    width: 140px;
    top: 0;
    left: 0;

    font-family:'IMFell Great Primer';
    font-size: 1.25rem;
    filter: blur(.015rem);
    overflow-y: auto;
    z-index: 1;
    
}
.content {
  font-family: 'Averia Serif Libre';
  font-size: 1rem; 
  text-align: center;
  color: white;
  filter: blur(.02rem);
  margin: 50px 0px 0px 170px;
  background-color: gray;
  background-image: url(./hexagon.png);
}
  .header{ 
    height: 10px;
    margin: 0px 0px 0px 160px;
    font-family: 'Averia Serif Libre';
    text-align: center;
  }


#clear-button {
  color: rgb(12, 11, 11);
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: lightblue;
}

#reverse-button {
  background-color: rgb(171, 171, 215);
  position: fixed;
  top: 10px;
  left: 20px;
  margin-left: 160px;
}