body{
      font-family: "Comic Sans MS", cursive, sans-serif;
      font-style: italic;
      font-weight: bolder;
      text-align:center;
      color: blue;
      font-size: 14px;
}

.h9 {
      color: black;
      font-size: 30px;
      text-align:center;
      background-color: transparent;
}

.grid-container {
  display: grid;
  grid-template-areas:
   'tittle'
   'menu'
   'display'
   'footer';
   gap: 5px;
   position: auto;
   border: 1px solid black;
   background-color: white; 
   background-image: url("background.jpg");
   background-repeat: no-repeat;
   height: 700px;
   background-size: cover;
   background-position: center center; 
}

.grid-container > div {
    padding: 5px 0;
    text-align:center;
}

.div12 >div{
       background-color: yellow;
       border: 1px solid black;
       padding: 5px 0;
}

.grid-containerm {
  display: grid;
  grid-template-areas:
   'tittle'
   'menu'
   'display'
   'footer';
   gap: 20px;
   position: auto;
   padding: 5px;
   border: 1px solid black;
   background-color: white;
   height: 700px;
   background-position: center center;
}

.item1 {
  grid-area: tittle;
  padding: 5px;
  height:30px;
}
.item2 {
  grid-area: menu;
  align: center;
}
.item3{
  grid-area: display;
}
.item4 {
  grid-area: footer;
  padding: 5px;
  height:20px;
}

.show {
  display: block;
}

.btn {
    padding: 0px 5px;
    margin: 1px 0;
    border: 1px solid black;
    border-radius: 3px;
    background: lightyellow;
    color: black;
    cursor: pointer;
}

.btn:hover {
  background-color: red;
}

.button {
  border: 2px solid black;
  color: white;
   border-radius: 5px;
   background-color: green;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
      font-weight: bolder;
  cursor: pointer;
}

/*.button1 {
   border: 2px solid black;
   border-radius: 5px;
   background-color: green;
      font-weight: bolder;
   } *//* Green */

.button:hover {
  background-color: red;
  color: white;
}

.btn.active {
  background-color:red;
  color: white;
}


h1 {
      color: blue;
      font-size: 24px;
      font-weight: bolder;
      text-align:center;
 }
 
.l9 {
      color: black;
      font-size: 12px;
      background-color: transparent;
}

.l10 {
      color: black;
      font-size: 14px;
      text-align:center;
      background-color: transparent;
}

.grid-containerx {
  display: grid;
  gap: 5px;
  background-color: tansparent;
  padding: 5px;
}

.grid-itemx {
  background-color: white;
  text-align: center;
  padding: 5px;
  font-size: 12px;
  border: 1px solid black;
}

.item1x {
  grid-column: 1 / span 1;
  grid-row:1;
}

.item2x {
  grid-column: 2;
  grid-row: 1 / span 1;
}

.item3x {
  grid-column: 1 / span 2;
  grid-row: 3;
}

.inp05 {
         color: #000000;
         background-color: palegreen;
         border: 1px solid black;
         border-radius: 3px;
       }


.lb01 {
        font-size: 14px;
        color: #000000;
      }


.img:hover {
  border: 2px solid red;
}

.video:hover {
  border: 2px solid red;
}

.table1 {
  border-radius:10px;
  border: 1px solid transparent;
}