body {
  background: url(/assets/images/bg_clouds-7f72b7d050f842a552cec2b40a41327d14ff7902.svg) no-repeat fixed;
  background-position: center top;
  background-size: cover;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  color: white;
  text-align: center;
}

a {
  color: lightblue;
}

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

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

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

hr {
  width: 95%;
  border-style: solid;
  border-color: white;
}

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

/* CSS doesn't support transitioning between gradients, so
we have to do this instead. */
@property --c0 {
  initial-value: #161616;
  inherits: false;
  syntax: "<color>";
}

@property --c1 {
  initial-value: #242424;
  inherits: false;
  syntax: "<color>";
}

.topnav {
  background: #161616; /* placeholder */
  background-size: contain;
  overflow: hidden;
  image-rendering: crisp-edges;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 240px;
  margin: 0 auto;
}

.topnav a {
  background: radial-gradient(var(--c0), var(--c1));
  float: left;
  color: #c9c9c9;
  text-align: center;
  padding: 11px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: --c0 0.3s, --c1 0.3s, color 0.3s;
}

.topnav a:hover {
  --c0: #2b2b2b;
  --c1: #383838;
  color: #f2f2f2;
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.light-on-hover {
  transition: filter 0.3s;
  image-rendering: high-quality;
}

.light-on-hover:hover {
  filter: brightness(135%) contrast(90%); 
}

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

.alertclosebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.alertclosebtn:hover {
  color: #FF9999;
}

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

.project-listing {
  display: inline-block;
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 800px;
  margin: auto;
  padding: 20px;
  transition: background-color 0.3s, border-radius 0.3s;
}

.project-listing:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}