body {
 background-color:#24273a;
}
.FlexTop {
display: flex;
}
.topLeft {
height: 15vw;
width: 20vw;
/* border-radius: 5px; */
flex-grow: 1;
container-type: size;
}
.topLeft h2, .topRight h2, .topRight a{
  font-size: 7cqw;
}
.topLeft h1,.topRight h1 {
  font-size: 10cqw;
}
.topMid {
  display: flex;
  justify-content: center;
  background-color: #24273a;
  width: 50vw; 
  border: solid;
  border-width: 1px;
  border-color: #1e2030;
/* border-radius: 5px; */
  flex-grow: 1;
  container-type: size;
}
.hitlerbussy420{
 width: 72%
}
.topRight {
  height: 15vw;
  width: 20vw;

  flex-grow: 1;
  container-type: size;
  
}
h1 {
  font-family: arial;
  text-align: center;
  color: #c6d0f5;
}
h2 {
  font-family: arial;
  text-align: center;
  color: #a5adce;
}
a {
  font-family: arial;
  font-weight: bold;
  text-align: center;
  color: #a5adce;
  text-decoration: inherit;
  display: block;
}
.topMid div {
 font-family: sans-serif; 
 font-size: 1.5cqw;
 color: #c6d0f5;
 display: block;
}
.midFlex {
  display: flex;
  min-height: 600px;
}
.THEHORDEleft {
  display: flex;
  gap: .24em;
}
.a {
background-color:#f0c6c6
}
.b{
background-color:#f5bde6
}
.c{
background-color:#c6a0f6
}
.e{
background-color:#f5a97f
}
.f{
background-color:#eed49f
}
.g{
background-color:#a6da95
}
.h{
background-color: #8bd5ca
}
.i{
background-color:#91d7e3
}
.j{
background-color:#7dc4e4
}
.k{
background-color:#8aadf4
}
.d{
background-color:  #ed8796
}
.buttonDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 53vw;
  height: 1px;
  container-type: inline-size;
  flex-shrink: 0;
}
.THEHORDEright {
  display: flex;
  gap: .24em;
}
.midDiv .THEHORDEleft {
  display: flex;
  gap: 0.1em;
}
.midDiv .THEHORDEright {
  display: flex;
  gap: 0.1em;
}
.midDiv .THEHORDEleft .a {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.midDiv .THEHORDEleft .b {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.midDiv .THEHORDEleft .c {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.midDiv .THEHORDEleft .d {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.midDiv .THEHORDEleft .e {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.midDiv .THEHORDEleft .f {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.midDiv .THEHORDEleft .g {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.midDiv .THEHORDEleft .h {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.midDiv .THEHORDEleft .i {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.midDiv .THEHORDEleft .j {
  width: 20px;
  background: hsl(var(--hue), 100%, 80%);
}
.buttonDiv {
  display: flex;
  gap: .1em;
  flex: 1;
}