body {
  background-color: #a8a8a8;
  color: black;
  font-family: 'NDStruebios', sans-serif;
}

@font-face {
font-family: 'NDStruebios';
src: url('https://wildatheart.neocities.org/NDStruebios.woff');
}
  
  .black-bar {
      width: 508px;
      height: 50px;
      color: #cddc53;
      border: 2px solid white;
      border-radius: 12px;
      background: black;
      position: relative;
      padding: 4px 12px;
    }

  .white-bar {
      width: 508px;
      height: 50px;
      border: 2px solid black;
      border-radius: 12px;
      background: white;
      position: relative;
      padding: 4px 12px;
    }
    
  .chat-box {
      width: 500px;
      min-height: 125px;
      border: 2px solid #04c305;
      border-radius: 12px;
      background: #fff;
      position: relative;
      padding: 40px 15px 15px 15px; /* space for label */
    }

    .chat-label {
      position: absolute;
      top: -3px;
      left: -3px;
      background: #9f9;
      color: #04c305;
      padding: 4px 12px;
      border: 2px solid #04c305;         /* outer green border */ 
      border-right: 2px solid #04c305;   /* inner edge dark green */
      border-bottom: 2px solid #04c305;  /* inner edge dark green */
      border-top-left-radius: 10px;
      border-bottom-right-radius: 6px;

    }
    
     .chat-box2 {
      width: 500px;
      min-height: 125px;
      border: 2px solid #de1178;
      border-radius: 12px;
      background: #fff;
      position: relative;
      padding: 40px 15px 15px 15px; /* space for label */
    }

    .chat-label2 {
      position: absolute;
      top: -3px;
      left: -3px;
      background: #ffdcf6;
      color: #de1178;
      padding: 4px 12px;
      border: 2px solid #de1178;         /* outer green border */ 
      border-right: 2px solid #de1178;   /* inner edge dark green */
      border-bottom: 2px solid #de1178;  /* inner edge dark green */
      border-top-left-radius: 10px;
      border-bottom-right-radius: 6px;

    }
    
     .chat-box3 {
      
      width: 500px;
      min-height: 125px;
      border: 2px solid #1a1586;
      border-radius: 12px;
      background: #fff;
      position: relative;
      padding: 40px 15px 15px 15px; /* space for label */
    }

    .chat-label3 {
      position: absolute;
      top: -3px;
      left: -3px;
      background: #b9b8f1;
      color: #1a1586;
      padding: 4px 12px;
      border: 2px solid #1a1586;;         /* outer green border */ 
      border-right: 2px solid #1a1586;;   /* inner edge dark green */
      border-bottom: 2px solid #1a1586;;  /* inner edge dark green */
      border-top-left-radius: 10px;
      border-bottom-right-radius: 6px;

    }