body {
    background: url(/assets/images/bg_clouds-7f72b7d050f842a552cec2b40a41327d14ff7902.svg) no-repeat fixed;
    background-position: center top;
    background-size: cover;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    text-align: center;
}

a {
  color: lightblue;
}

.remark-red {
  color: white;
  background-color: red;
  border-radius: 15px;
}

.remark-blue {
  color: white;
  background-color: blue;
  border-radius: 15px;
}

.remark-yellow {
  color: white;
  background-color: #d6c636;
  border-radius: 15px;
}

hr {
  border-style: solid;
  border-color: white;
}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 50%;
}

.topnav {
  background: radial-gradient(#161616, #242424);
  background-size: contain;
  overflow: hidden;
  image-rendering: crisp-edges;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 240px;
  margin: 0 auto;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 11px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background: radial-gradient(#c9c9c9, #F5F5F5);
  color: #000;
  background-repeat: repeat-x;
  background-size: auto 100%;
}

#content {
  background: rgba(0, 0, 0, 0.445);
  width: max(80%, min(800px, 100%));
  margin: 0 auto;
  border-radius: 30px;
}