#arch {
  text-align: center;
  width: 100%;
  height: 30px;
  float: left;
  /* margin: 75px auto 0px auto; */
  margin-top: 20px;
  clear: both;
  color: #ccc !important;
  font-size: 1.2em;
}

#arch a {
  text-decoration: none;
  color: #ccc;
}

#arch a:hover {
  text-decoration: none;
  color: orange;
}

@media only screen and (min-width: 800px) {
  #listArchive {
    width: calc(100% - 264px);
    height: 100%;
    text-align: center;
    float: right;
    margin-top: 15px;
    overflow: hidden;
  }

  .dateArch {
    color: orange;
    font-family: Lato, sans-serif;
  }
  .motArch {
    color: #cfcfcf;
    font-size: 1.25em;
    font-family: Lato, sans-serif;
  }
  .phraseArch {
    color: #acacac;
    font-size: 0.85em;
    font-family: Comfortaa, sans-serif;
  }

  .archLink {
    display: block;
    text-decoration: none;
    max-width: 300px;
    margin: auto;
  }
}

@media only screen and (max-width: 800px) {
  #listArchive {
    width: calc(100%);
    /* height: 100%; */
    text-align: center;
    float: left;
    margin-top: 30px;
    overflow: hidden;
  }

  .dateArch {
    color: orange;
    font-family: Lato, sans-serif;
  }
  .motArch {
    color: #cfcfcf;
    font-size: 1.25em;
    font-family: Lato, sans-serif;
  }
  .phraseArch {
    color: #acacac;
    font-size: 0.85em;
    font-family: Comfortaa, sans-serif;
  }

  .archLink {
    display: block;
    text-decoration: none;
    /* max-width: 300px; */
    margin: auto;
  }

  #weekList {
    height: unset !important;
  }
}