* {
  padding: 0;
  margin: 0;
}

body {
  background: black;
  color: white;
  font-family: monospace;
}

h1 {
  padding: 20px;
  background: linear-gradient(55deg, #12C2E9 0%, #c471ed 50%, #f64f59 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 300%;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

p {
  font-size: 120%;
  margin-left: 60px;
  padding: 5px;
  margin-bottom: 10px;
}



.segment0 {
  color: black;
  background: #663d2c
}

.segment1 {
  color: black;
  background: #ea905d
}

.segment2 {
  color: black;
  background: #5f2787
}

.segment3 {
  color: black;
  background: #d55ce0
}

.segment4 {
  color: black;
  background: #1b8477
}

.segment5 {
  color: black;
  background: #3cfff1
}

.segment6 {
  color: black;
  background: #1f58a2
}

.segment7 {
  color: black;
  background: #1e97ff
}

.segment8 {
  color: black;
  background: #4a633d
}

.segment9 {
  color: black;
  background: #a5da76
}

.container {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 0px 0px;
  grid-auto-flow: row;
}

.info {
  padding: 20px;
  font-size: 120%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  z-index: 100;
}

.info p {
  margin-bottom: 10px;
}



@media screen and (max-width: 600px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    order: 1;
  }



}