* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body {
    font-family: Verdana, Arial, sans-serif;
    background-color: navy;
  }
  a:link {
    color: rgb(0, 201, 0);
    background-color: transparent;
    text-decoration: underline;
    font-weight: bold;
  }
  
  a:visited {
    color: rgb(104, 2, 162);
    background-color: transparent;
    text-decoration: underline;
    font-weight: bold;
  }
  
  a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
    font-weight: bold;
  }
  
  a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
  }
  #title {
    text-align: center;
    color: rgb(144, 0, 0);
    font-weight: bold;
  }
  
  .header { grid-area: header; }
  .menu { grid-area: menu;}
  .main { grid-area: main; }
  .footer { grid-area: footer; }
  
  .maingrid {
      display: grid;
      align-content: center;
      grid-template-areas:
          'header'
          'menu'
          'main'
          'footer';
      Grid-template-columns: auto;
      gap: 3px;
      background-color: navy;
      padding: 3px;
      margin: 10px 30px;
  }
  
  .maingrid > div {
      background-color: navy;
      color: white;
      text-align: center;
      padding: 3px;
      font-size: 18px;
      margin: 10px 30px;
  }


  .p1 {
    color: #00FF00;
    font-size: 20px;
    margin-bottom: 20px;
  }