html,
body {
  margin: 0;
  height: 100%;
  background-color: #000066;
  color: white;
}

#main {
  background-image: url("bg.webp");
  aspect-ratio: 2780/2100;
  max-height: 100vh;
  container-type: inline-size;
  margin-inline: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#logo {
  margin-top: 4cqw;
  margin-left: 4cqw;
  width: 90cqw;
}

#circlelogo {
  height: 11cqw;
  margin-left: 2cqw;
  animation: hueRotate 17s linear infinite;
}

#chatlog {
  float: right;
  width: 27cqw;
}

h1,
h2 {
  font-family: "Times New Roman";
  font-size: 4.2cqw;
  margin-top: -3cqw;
  margin-left: 8cqw;
  margin-bottom: 1cqw;
}

body {
  margin: 0;
}
.container {
  background: tomato;
  aspect-ratio: 4/3;
  max-height: 100vh;
  container-type: inline-size;
  margin-inline: auto;
}

.column {
  float: left;
}

.column ul {
  margin: 0;
  font-size: 5cqw;
  padding-left: 8cqw;
  font-family: Arial;
  list-style-image: url("bullet.gif");
}

.column ul li a {
  color: yellow;
}

.column ul li a:visited {
  color: white;
}

.column ul a:visted {
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

#contact-us {
  position: absolute;
  left: 3cqw;
  bottom: 3cqw;
  height: 19cqw;
  animation: hueRotate 30s linear infinite;
}

.bullet {
  height: 2cqw;
  padding-right: 1cqw;
  bottom: 0.5cqw;
  position: relative;
  animation: hueRotate 5s linear infinite;
}

rss-feed {
  font-size: 2cqw;
  position: absolute;
  width: 24cqw;
  max-width: 100%;
  right: 1cqw;
  height: 43.5cqw;
  overflow-y: scroll;
  top: 22cqw;
  color: black;
  background-color: rgba(255, 255, 255, 0.73);
  padding-left: 1cqw;
  img {
    max-width: 100%;
  }
}

midi-player {
  margin-bottom: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 33cqw;
  height: 6cqw;
  font-size: 2cqw;
}
midi-player::part(control-panel) {
  background: #9c9c9c;
  border: none;
  border-radius: 0;
}
midi-player::part(play-button) {
  color: #2d2d2d;
  border: 2px solid currentColor;
  border-radius: 0;
  transition: all 0.2s;
  content: "hello";
}
midi-player::part(play-button):hover {
  color: #9c9c9c;
  background-color: #2d2d2d;
}
midi-player::part(time) {
  font-family: "Times New Roman", serif;
}

marquee {
  position: absolute;
  left: 0;
  width: 100cqw;
}

@keyframes hueRotate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

.hue-rotate-animation {
  animation: hueRotate 20s linear infinite;
}

.show-reduce-motion {
  display: none;
}

@media (prefers-reduced-motion) {
  .hide-reduce-motion {
    display: none;
  }

  .show-reduce-motion {
    display: block;
  }
}