
body {
  margin: 0;
  padding: 0;
}

.logo {
  display: block;
  width:75%;
  max-width: 200px;

  margin-left: auto;
  margin-right: auto;
}

.sidebar {
  width: 20%;
  background-color: #333333;
  color: #f2f2f2;
  position: fixed;
  top: 0;
  bottom: 0;
  border-right: #267dfe;
  border-right-width: .5em;
  border-right-style: solid;
  font-family: 'Righteous', cursive;
}

.sidebar-header {
  padding: .5vw;
}

.sidebar-header h1 {
    text-align: center;
    font-family: 'Staatliches', display;
    color: #f4ab21;
}

.sidebar-navigation {
    padding-top: 3vw;
}

.sidebar-navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-navigation ul li {
  margin-bottom: 10px;
}

.sidebar-navigation ul li:hover {
  margin-bottom: 10px;
  background-color: #444444;
}

.sidebar-navigation ul li a {
  color: #f4ab21;
  text-decoration: none;
  font-size: 1.5em;
  display: block;
  width: 100%;
  height: 100%;
  padding-top: .5vw;
  padding-bottom: .5vw;
  padding-left: .25vw;
  padding-right: .25vw;
}

.main-content {
  margin-left: 20%; /* Same as sidebar width */
  padding: 5px 50px 15px 50px;
   
  background-color: #56144D;
  min-height: 100vh;
  box-sizing: border-box;

  font-family: 'Ubuntu Mono', monospace;
  color: #f2f2f2;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-content p {
  font-size: 1.5em;
}

.main-content img {
  object-fit: cover;
  border-radius: 15%;
  padding: 5%;

  max-width: 100%;
  max-height: 500px;
  
}

.main-content h1 {
  color: #f4ab21;
}

.sheets {
  width: 100%;
  min-height: 95vh;
}

.class-container {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;
}

.class-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 1%;

  width: 100%;
  min-height: 150px;

  background: rgba(51, 51, 51, .55);
}

.class-item-title {
  font-family: 'Righteous', cursive;
  color: #f4ab21;
}

.class-item-content {
  margin: 0 0 0 0;
  padding-bottom: 5%;
  
  width: 90%;
  height: 100%;

  font-family: 'Ubuntu Mono', monospace;
}

