body {
  background: #000;
  font-family: sans-serif;
}
.trapezoid { 
  background-color: #cccccc40;
  /* height:80%;*/
  width: 80%; 
  min-height:300px;
  min-width:50vw;
  max-width:50vw;
  margin:0 auto;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  align-items: center;
  gap:2px;
  padding-top:10px;
  padding-bottom:15px;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%, 0% 10%);
}
.hexagon {
  background-color: #000000;
  height:45%;
  width: 45%;
  margin:0 auto;
  min-height:60px;
  min-width:180px;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  /* gap:10px; */
  clip-path: polygon(50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%, 0% 15%);
}
.label-header {
  /* background: tan; */
  /* display:flex;*/
  color:tan; 
  display:inline-block;
  margin-top:15px;
  text-align: center;
  /* flex-direction:column;
  flex-basis:100%;
  flex-wrap: wrap;
  height:20px;
  justify-content: center;
  align-items: center; */
}
.box-content {
  display:flex;
  display:inline-block;
  margin-top:0px;
  min-height:10px;
  /* flex-wrap: wrap;
  flex-direction:row;
  text-align: center;
  justify-content: center;
  align-items: flex-start;
  gap:0; */
  color:#ddd;
}
.box-content p {
  margin: 5px 0 25px 0;
  text-align: left;
}
.box-content a {
  color:#ccc;
}

.h80 {
   min-height:150px;
}
.row {
  /* border:1px solid orange; */
  display:flex;
  flex-direction:row;
  margin-top:0px;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap:3px;
  color:#ddd;
}

/*********** MOBILE-MODE ******/
.mobile-mode .trapezoid { 
  background-color: #cccccc40;
  height:80%;
  width: 100%;
  min-height:300px;
  min-width:80vw;
  max-width:90vw;
  margin:0 auto;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  align-items: center;
  gap:2px;
  padding-top:10px;
  padding-bottom:15px;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%, 0% 10%);
}
.mobile-mode .hexagon {
  background-color: #000000;
  height:45%;
  width: 60%;
  margin:0 auto;
  min-height:60px;
  min-width:60vw;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  /* gap:10px; */
  clip-path: polygon(50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%, 0% 15%);
}
.mobile-mode .label-header {
  /* background: tan; */
  /* display:flex;*/
  color:tan; 
  display:inline-block;
  margin-top:15px;
  text-align: center;
  font-size: 1.75rem;
  /* flex-direction:column;
  flex-basis:100%;
  flex-wrap: wrap;
  height:20px;
  justify-content: center;
  align-items: center; */
}
.mobile-mode .box-content {
  display:flex;
  display:inline-block;
  margin-top:0px;
  min-height:10px;
  font-size: 2.25rem;
  /* flex-wrap: wrap;
  flex-direction:row;
  text-align: center;
  justify-content: center;
  align-items: flex-start;
  gap:0; */
  color:#ddd;
}
.mobile-mode .box-content p {
  margin: 5px 0 25px 0;
  text-align: left;
}
.mobile-mode .box-content a {
  color:#ccc;
}

.mobile-mode .h80 {
   min-height:150px;
}
.mobile-mode .row {
  /* border:1px solid orange; */
  display:flex;
  flex-direction:row;
  margin-top:0px;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap:3px;
  color:#ddd;
}