.button1 {
font-family:system-ui;
align-items: center;
border: 0;
border-radius: 8px;
box-shadow: -5px -5px 10px 0 #fff,5px px 20px 0;
box-sizing: border-box;
color: #2a1f62;
font-size: 3vh;
font-weight: 500;
line-height: 3vh;
padding: 15px;
text-align: left;
margin-top: 6px;
}

.b23 {background: #cb931e; }
.b24 {background: #af4162; }
.b25 {background: #869238; }
.b26 {background: #aaa; }
.b27 {background: #a48caa; }
.b28 {background: #8e65d3; }
.b29 {background: #ab1a1a; color:white; }
.b31 {background: #79fbaf; color: black}
.b32 {background: #0c00be;  color:#fff4c7;}
.b33 {background: #fbaf79; }

.container {
    display: flex;
    align-items: flex-end;
    font-size: 24px;
    font-family: Arial, sans-serif;
}
.word {
   text-align: left;
}
.raised {
    position: relative;
    top: -5px; /* Verhoog de woorden iets */
}
.c1 {color: #c97a2b;}
.c2 {color: #531818;}
.c3 {color: #bd871b;}
.c4 {color: #100798;}
.c5 {color: #8c1616;}
.c6 {color: #100798;}



.c11 {color: #bd891b;}
.c12 {color: #8b1410;}
.c13 {color: #0800c5;}
a:link {
color: #6e2112;
background-color: transparent;
text-decoration: none;
}



@media (orientation: landscape) {
.b11{font-size: 3vw;};

  .b1 {
     height: 6vw; position: fixed; font-size: 3vw;
    
  };
  .b2{height: 8vh; position: fixed; font-size: 5vh;};
.b3{height: 8vh; position: fixed; font-size: 5vw;};
.b4{height: 8vh; position: fixed; font-size: 5vw;};
.m1 {padding-left:20px; font-size:3v; }

}

@media (orientation: portrait) {
.b11{font-size: 6vw; };

  .b1 {
     height: 7vh; position: fixed; font-size: 5vw;
    
  };
  
  .b2{height: 8vw; position: fixed; font-size: 5vw;};
  .b3{height: 8vh; position: fixed; font-size: 5vw;};
  .b4{height: 8vh; position: fixed; font-size: 5vw;};
  
   
}

.go a{color:#1552a3;font-weight: bold;}
.no a{color:#b1b1b1;font-weight:300;}
.mo a{color:#000000;font-weight:500;}
.so a{color:#c97a2b;font-weight:500;}
.so {color:#c97a2b;font-weight:500;}
.lo {color:#654a2b;font-weight:800; font-size:3vw}


.m1 {padding-left:20px; font-size:6vw; }

.flexbox-container {
    width:97%;
    position:fixed;
    display: flex;
    justify-content: space-around;
    
}

.fbox-c {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
}

.flexbox-item {
    width: 100px;
    margin: 2px;
}

.flexbox-item-1 {
    flex: 2 0 0;
    min-height: 112px;
 }

.flexbox-item-2 {
    min-height: 112px;
flex: 4.8 0 0;
}

.flexbox-item-3 {
  min-height: 112px;
  flex: 2 0 0;
}

<!--
@media (min-width: 700px) { 
    // your desktop css version
.b11{font-size: 666vw;};
}
-->