* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
body {
    min-height:100vh;
    width:100vw;
    background-color:#ffffff;
    overflow-x: hidden;
}
   
div.mycontainer {
    width: 100%;
    overflow: auto;
    background-color:#ffffff;
    
}

    div.mycontainer div {
        width: 33%;
        float: left;
                
    }
ul.mycontainer {
  display: block;
  list-style-type:  circle;
  lighting-color:aqua ;
  font: 100;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 10px;
}

.grid-head {
  display: grid;
  grid-template-columns: auto auto 5%;
  background-color: #000033;
  padding: 4px;
}
.grid-item1 {
  background-color: rgb(0, 0, 51);

  padding: 1px;
  font-size: 30px;
  text-align: left;
}
/*.grid-myhead {
    display: grid;
  grid-template-columns: auto auto 5%;
  background:rgb(0, 0, 51);
  background-color: rgb(0, 0, 51);
  padding: 10px;
 
}
.grid-myhead-item {
   background-color: rgb(0, 0, 51);
   padding: 1px;
   text-align: left;
        }*/
.grid-container {
   /*grid-template:"auto auto";*/
  display: grid;
  grid-column-gap: 3px;
  grid-template-columns: auto auto ;
  background:rgba(255, 255, 255, 0.8);
  background-color: rgb(1, 33, 122);
  padding: 3px;
 
}
.grid-item {
  font-family: Arial, Helvetica, sans-serif;

  background-color: rgba(255, 255, 255, 0.8);
  border: 0px solid rgba(0, 0, 0, 0);
  padding: 10px;
  font-size: large;
  text-align: right;
    }
 .grid-index {
   /*grid-template:"auto auto";*/
  display: grid;
  grid-column-gap: 3px;
  grid-template-columns: auto auto auto;
  background:rgba(255, 255, 255, 0.8);
  background-color: rgb(1, 33, 122);
  padding: 3px;
 
}
.grid-index-item {
  font-family: Arial, Helvetica, sans-serif;

  background-color: rgba(255, 255, 255, 0.8);
  border: 0px solid rgba(0, 0, 0, 0);
  padding: 20px;
  font-size: large;
  text-align: right;
    }
.grid-test {
   /*grid-template:"auto auto";*/
  display: grid;
  grid-column-gap: 3px;
  grid-template-columns: repeat(5,1fr);
  width:50%;
  margin:0 auto;
  background:rgba(255, 255, 255, 0.8);
  background-color: rgb(1, 33, 122);
  padding: 3px;
 
}
.image.test{
    grid-column:1 / 3;
}
.grid-test-item {
  font-family: Arial, Helvetica, sans-serif;

  background-color: rgba(255, 255, 255, 0.8);
  border: 0px solid rgba(0, 0, 0, 0);
  padding: 20px;
  font-size: large;
  text-align: right;
    }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

.sidebar {
  grid-area: sidebar;
background-color: #297985;
}

.content {
  grid-area: content;
  background-color: #3BAFBF;
 
}

.wrapper {
  display: grid;
  grid-gap:1px;
  grid-template-columns: auto;
  grid-template-areas: "sidebar sidebar content content";
 width: 90%;
  color: #444;
  margin:auto;
}
.box {
  /*background-color: #444;*/
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  direction:rtl;
  margin-top: 40px  ;
      
      /*margin-right:10px;*/
}
.header {
  background-color: #999;
}

@media (max-width: 768px) {
  .wrapper {
     grid-template-rows: repeat(auto, 1fr);
      grid-template-areas:
    "content"
    "sidebar";
  }
}
/* program index*/
.sidebar1 {
  grid-area: sidebar1;
   
}

.content2 {
  grid-area: content2;
   
}
.content3 {
  grid-area: content3;
  font:  black;
}
.wrapper3 {
  display: grid;
  grid-gap:0px;
  grid-template-columns: auto;
  grid-template-areas: "sidebar1 sidebar1 content2 content2 content3 content3";
  width: 95%;
  background-color: white;
  color: #fff;
}
.box3 {
  background-color: #fff;
  color:  black;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
.header {
  background-color: #999;
}

@media (max-width: 768px) {
  .wrapper3 {
     grid-template-rows: repeat(auto, 1fr);
      grid-template-areas:
    "content3"
     "content2"
    "sidebar1";
  }
}