body {
  background-color: rgba(176, 196, 222, 0.2);
}

.header {
  background-color: #9CB0D7;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  z-index: 100;
}

.headerTitle {
  font-size: 20px;
}

.header a {

  &,
  &:hover,
  &:visited {
    color: #F7F7F5;
    text-decoration: none;
  }
}

.headerBlock {
  height: 70px;
}

main>.container {
  margin: 40px auto;

  & a:link {
    color: #4169e1;
    text-decoration: none;
  }

  & a:visited {
    color: #800080;
    text-decoration: none;
  }

  & a:active {
    color: #c0c0ff;
  }

  & a:hover {
    text-decoration: underline;
  }
}

.unread {
  color: #0c63e4;
  background-color: #e7f1ff;
}

@media screen and (max-width: 768px) {
  .header {
    height: 60px;
  }

  .headerBlock {
    height: 60px;
  }

  main>.container {
    margin: 24px auto;
  }

  .container {
    padding: 0 24px;
  }
}