html, body {
  background-color: black;
}
canvas {
  display: block;
}

.top-bar{
  background-color: rgba(0, 255, 255, 0.14);
  display: flex;
  justify-content: center;
  align-items: center;
}

.mid-bar{
  background-color: rgba(137, 43, 226, 0.17);
  display: flex;
  width: 60%;
  margin: auto;
  justify-content: space-between;
}

.bottom-bar{
  background-color: rgba(165, 42, 42, 0.164);
  display: flex;
  width: 70%;
  margin: auto;
  justify-content: space-between;
}

.center{
  background-color: rgba(255, 127, 80, 0.23);
  display: flex;
  width: 80%;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}

/* main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
} */

.container{
  max-width: 1200px;
  margin: auto;
}

.circle-container {
  position: relative;
  width: 800px; 
  height: 800px;

  border-radius: 50%; 
  /* border: 1px solid #ccc;  */
  display: flex; 
  justify-content: center;
  align-items: center;
  margin: 50px auto; /
}

.item {
  position: absolute; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}


.item:nth-child(1) {
  transform: rotate(0deg) translate(350px) rotate(0deg);
}
.item:nth-child(2) {
  transform: rotate(30deg) translate(350px) rotate(-30deg);
}
.item:nth-child(3) {
  transform: rotate(60deg) translate(330px) rotate(-60deg);
}
.item:nth-child(4) {
  transform: rotate(90deg) translate(300px) rotate(-90deg);
}
.item:nth-child(5) {
  transform: rotate(120deg) translate(330px) rotate(-120deg);
}
.item:nth-child(6) {
  transform: rotate(150deg) translate(350px) rotate(-150deg);
}
.item:nth-child(7) {
  transform: rotate(180deg) translate(350px) rotate(-180deg);
}
.item:nth-child(8) {
  transform: rotate(210deg) translate(350px) rotate(-210deg);
}
.item:nth-child(9) {
  transform: rotate(240deg) translate(340px) rotate(-240deg);
}
.item:nth-child(10) {
  transform: rotate(270deg) translate(330px) rotate(-270deg);
}
.item:nth-child(11) {
  transform: rotate(300deg) translate(340px) rotate(-300deg);
}
.item:nth-child(12) {
  transform: rotate(330deg) translate(350px) rotate(-330deg);
}

p{
  font-family: "Lucida Console", "Courier New", monospace;
  color: white;
  text-align: center;
}


.links{
  /* background-color: rgba(165, 42, 42, 0.164); */
  display: flex;
  width: 50%;
  margin: auto;
  justify-content: space-between;
}