body { 
  background-color: #181a1b;
  color: #d1cdc7;
  font-family: monospace;
  max-width: 650px;
  margin: 0 10px;
  margin-bottom: calc(100vh - 200px);
}

.title {
  padding-top: 10px;
}

.title > h1 {
  text-transform: capitalize;
  font-size: 20pt;
  margin-top: 10px;
}

.title > h2 {
  font-size: 10pt;
  font-weight: normal;
  margin: 0;
}

.intro > p {
  text-align: justify;
  text-justify: inter-word;
  font-size: 12pt;
}

.event {
  padding-top: 35px;
}

.event > ul li::before {
  content: '+';
}

.event > ul {
  list-style: none;
  margin-left: 120px;
  padding: 0;
  font-size: 10pt;
}

.event > p {
  font-size: 12pt;
  margin-left: 120px;
  text-align: justify;
  text-justify: inter-word;
}

.region {
  margin-top: 35px;
  padding-top: 10px;
  border-top: 1px #d1cdc7 dashed;
}

.head {
  margin-left: -10px;
  padding-left: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 42px;
  padding-right: 10px;
}

.event > .head {
  background-color: #252829;
}

.event > .head a:visited {
  color: #3d84ff;
}

.event > .head a {
  padding: 5px;
  text-decoration: none;
}

.head > h1 {
  font-size: 16pt;
  margin: 0;
  flex: 1;
}

.head > .date {
  width: 120px;
}

a:link {
  color: #3d84ff;
}

a:visited {
  color: #3d84ff; /* #ae73e5; */
}

a:hover {
  color:#3d84ff;
  background-color: #3d84ff40;
}

a:active {
  color: #3d84ff;
}

.folder > h1 {
  font-size: 20pt;
}

.folder > table tr {
  display: block;
  font-size: 12pt;
}

@media only screen and (max-width: 670px) {
  body {
    margin-right: 0;
  }

  .event > p {
    margin-left: 0;
    margin-right: 10px;
  }

  .event > ul {
    margin-left: 0;
  }

  .head > h1 {
    font-size: 12pt;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    word-break: break-all;
  }

  .control {
    display: none;
  }
}