html {
    background: black;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

*{
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
  }
  html, body {
      font-size: 24px;
      text-transform: uppercase;
      font-weight: 100;
      background: #000;
      width: 100%;
      height: 100%;
      color: #10d210; 
      color: #fefe00 !important;
      overflow: hidden;
  }
  body .content {
      position: absolute !important;
      top: 50%;
      left: 50%;
      text-align: center;
      transform: translateX(-50%) translateY(-50%);
      max-width: 21rem !important;
  }
  .random {
   /*   min-width: 16rem; 
      max-width: 30rem;*/
      background: black !important;
      margin: auto;
      border: 2px solid;
      padding: 15px; 
      display: grid;
  }
  .random > span {
      width: 30px;
      display: inline-block;
  }
  
  .mask {
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .mask > img {
      filter: opacity(0.6) brightness(0.1);
      width: 100%;
      max-width: 680px;
      margin: auto;
  }


   
   
   /* Grid styles -------------------------------------------------*/
   .panel {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     grid-gap: 30px;
   }

   
@media (min-width: 700px) {
  .leading-bigtext {
    font-size: 140px;
  }
}

.leading-text {
  max-width: 900px;
  font-size: 1.2em;
  line-height: 1.4em;
}

.random{
  max-width: 960px;
  margin: 0 auto 30px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}