.grid-container {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 0.8fr 47px 0.7fr 2.8fr;
          grid-template-areas: ". . ." ". . ." ". . ." ". . .";
        }
        .buttons-container {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 1fr;
          grid-template-areas: ". . ." ". . ." ". . ." ". . .";
        }
        #title{
            font-family: "Lucida Grande", Verdana, Arial, sans-serif;
            text-align: center;
            color: #ddd;
            font-size: 3.3ex;
        }
        #text{
            font-family: "Lucida Grande", Verdana, Arial, sans-serif;
            text-align: center;
            color: #ccc;
            font-size: 2ex;
        }
        #smalltext{
            font-family: "Lucida Grande", Verdana, Arial, sans-serif;
            text-align: center;
            color: #ccc;
            font-size: 1.6ex;
        }
        .encoders{
            margin: 0 auto;

        }
        .mainGrid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr;
            gap: 1px 1px;
            grid-template-areas: ". . . . . . . .";
        }

        .encodersGrid {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
            gap: 1px 1px;
            grid-template-areas: "." "." "." "." ".";
            }
        .content{
            width : 880px;
            padding : 10px 20px;
            margin : 15px auto;
            background-color: #000000;
            background-image: linear-gradient(174deg,  #222,#111);
            border-radius: 20px; 
            border : #0b0b0b 2px solid;
            -webkit-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);
            -moz-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);
            box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);
            }
        .contentB{
            width : 880px;
            padding : 10px 20px;
            margin : 15px auto;
            background-color: #000000;
            background-image: linear-gradient(340deg, #000000 0%, #434343 374%);
            border-radius: 20px; 
            border : #333 1px solid;
            }
        .content-title {
            color : #ddd;
            border : none;
            margin-top : 15px;
            padding-bottom : 0;
            margin-bottom : 0;
            background-color : inherit;
            }
            
        .content-names {
            padding : 10px;
            padding-top : 0;
            border : none;
            box-shadow : none;
            background-color : inherit;
            }
        .TopRackGrid {
          display: grid;
          grid-template-columns: 120px 600px 80px 80px;
          grid-template-rows: 1fr;
          gap: 1px 1px;
          grid-template-areas: ". . . .";
          }
        .webaudiobut{
          border-radius: 5px; 
          border : #222222 2px solid;
          -webkit-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);
          -moz-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);
          box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);
          }

        h2 {
        position: relative;
        line-height: 3ex;
        color: #666;
        text-align: middle;
        font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
        font-size: 1.7ex;
        margin-top : 1px;
        text-shadow: 2px 3px #000;
        }
        @font-face {
  
          font-family: "Bus Led Display Small";
          src: url("7f37946c45abf5482c243bf326f82628.eot"); /* IE9*/
          src: url("7f37946c45abf5482c243bf326f82628.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
          url("7f37946c45abf5482c243bf326f82628.woff2") format("woff2"), /* chrome、firefox */
          url("7f37946c45abf5482c243bf326f82628.woff") format("woff"), /* chrome、firefox */
          url("7f37946c45abf5482c243bf326f82628.ttf") format("truetype"), /* chrome、firefox、opera、Safari,   Android,      iOS 4.2+*/
          url("7f37946c45abf5482c243bf326f82628.svg#Bus Led Display Small") format("svg"); /* iOS 4.1- */
        }
  
        .busled{
          color: #ddd;
          background: #090909;
          font-family:"Bus Led Display Small" !important;
          font-size:2em;font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.7px;
          -moz-osx-font-smoothing: grayscale;}
        .info {
            background: #000;
            width: 200px;
            text-align: center;
            vertical-align: middle;
            height: 30px;
            border: 2px solid #445;
            font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
            color: #aaa;
            font-size: 2ex;
            }
        .shade {
            position: relative;
            margin: -21px 0 0;
            padding: 0;
            display: block;
            background: #00538F;
            width: 100%;
            height: 24px;
            opacity: 0.25;
            text-align: center;
            } 
        .shadow {
            -webkit-box-shadow: 4px 6px 14px -1px rgba(0,0,0,0.82);
            -moz-box-shadow: 4px 6px 14px -1px rgba(0,0,0,0.82);
            box-shadow: 4px 6px 14px -1px rgba(0,0,0,0.82);
              }
        a:link {
            color: #bbb;
            }
        a:visited {
            color: #999;
            }