
/* div{
    border: 1px white dotted;
} */
.divmain{
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 50px;
  

}
.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.3fr 1.7fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "title"
      "base1";
      
  }
  
  .title {
       grid-area: title;
       
      
}
  
  .base1 { grid-area: base1; }
  
  .container2 {
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 20px;
    grid-auto-flow: row;
    grid-template-areas:
      "links base2";
  }
  
  .links { 
      grid-area: links;
    background-color: 1A1A19;
   
  }
  
  .base2 { grid-area: base2; }
  
  .container3 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
  }
  
  .timetable { 
      grid-area: 1 / 1 / 2 / 2; 
      background-color: 1A1A19;

    }
  
  .base3 { grid-area: 2 / 1 / 3 / 2; }
  
  .container4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
      "clock base4";
  }
  
  .clock { 
      grid-area: clock;
      background-color: 1A1A19; }
  
  .base4 { grid-area: base4; }

  .container5 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 40px 20px;
    grid-auto-flow: row;
    
  }
  
  .voice { grid-area: 1 / 1 / 2 / 2;
    background-color: 1A1A19; }
  
  .links2 { grid-area: 2 / 1 / 3 / 2;
    background-color: 1A1A19; }
  
    .container6 {
        display: grid;
        grid-template-rows: 0.1fr 1.9fr;
        grid-auto-columns: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        
      }
      
      .bar { grid-area: 1 / 1 / 2 / 2;
        background-color: 2a2a28;
        
     }
     .bar2 { grid-area: 1 / 1 / 2 / 2;
      background-color: 2a2a28;
      height: 20px;
      
   }
      
      .bod { grid-area: 2 / 1 / 3 / 2;
       
     }
      .containerbar {
        display: grid;
        grid-template-columns: 0.3fr 0.1fr 0.1fr 2.8fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
          "x s o e";
          
      }
      
      .x { grid-area: x; 
      
        background-color: EE9909;}
      
      .s { grid-area: s; 
       }
      
      .o { grid-area: o;
         }
      
      .e { grid-area: e; }
      .containerbar2 {
        display: grid;
        grid-template-columns: 0.1fr 0.2fr 0.1fr 2.8fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
          "x s o e";
      }
      
      .x { grid-area: x; 
      
        background-color: EE9909;}
      
      .s { grid-area: s; 
       }
      
      .o { grid-area: o;
         }
      
      .e { grid-area: e; }
      .containerbar3 {
        display: grid;
        grid-template-columns: 0.2fr 0.2fr 0.1fr 2.8fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
          "x s o e";
         
      }
      
      .x { grid-area: x; 
      
        background-color: EE9909;}
      
      .s { grid-area: s; 
       }
      
      .o { grid-area: o;
         }
      
      .e { grid-area: e; }
     
     