#content, html, body {
    height: 100%;
    margin: 0px;
font-family: 'Norma', sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: black;
    background-color: #f5f5f5;
}

mark {
  background-color: yellow;
  color: black;
}

a {
  color: black;
  text-decoration: none;
  border-bottom: 1px solid #f00;
}

ol {
  margin-left: 5px;
}

.alexandria {
  width: 100%;
  border: solid red .25px;
}

.textcontent {
  font-size: 14px;
}

.redhr{
  background-color: red;
  border: 0 none;
  color: red;
  height: 1px;
}

.button {
  border: 1px solid black;
  border-radius: 40px;
  padding: 5px;
  padding-left: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}
.button:hover {
  background-color: yellow;
  color: black;
}
.students {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.glossary {
  margin-left: 25px;
}


#left {
    float: left;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom:0px;
    margin-bottom: 0px;
    width: calc(53.2vw - 41px);
    height: calc(100vh - 40px);
    background-image: #fff;
}

#right {
    float: left;
    padding: 40px;
    width: calc(45vw - 40px);
    height: calc(100vh - 40px);
    overflow: scroll;
}


/* ---------------------------- MOBILE ---------------------------- */

@media only screen and (max-width:800px) {

  #content, html, body {
      font-size: 18px;
  }

  small {
    font-size: 14px;
  }

  #left {
      float: none;
      border-right: none;
      border-bottom: 1px solid #f00;
      padding: 20px;
      width: calc(100vw - 40px);
      height: auto;
      overflow: auto;
  }
  #right {
      float: none;
      padding: 20px;
      width: calc(100vw - 40px);
      height: auto;
      overflow: auto;
  }
}
@media only screen and (max-width:550px) {
  .planning {
    font-size: 15px;
    display: grid;
    grid-template-columns: 2fr 5fr;
  }
}