.pages{
    display: grid;
    width:100%;
    
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    grid-auto-columns:minmax(0,1fr);
    grid-template-rows: 10vh minmax(0,1fr);
    grid-template-areas: 
    'header1 header1 header1 header1 header1 header1 header1 header1 header1 header1 header1'
    'sidebar sidebar main1  main1  main1   main1   main1   main1   main1   main1   main1 ';
    
    
}
.pages_header{
    grid-area: header1;
    border-bottom:3px solid var(--primary-color);
}

.pages_sidebar{
  grid-area: sidebar;
  padding-top:2rem;
  height:auto;
  
  width:16vw;
  border-radius:5px;
  border-right:3px solid var(--primary-color);
  }

 
 .sidebar__heading {
    padding: 0.2rem 0;
    font-size: 1rem;
    font-weight: bold;
    
}
.sidebar__components{
    font-size:0.8rem;
}

.sidebar__items{
    font-size:0.4rem;
    text-align: center;
    width:100%;
    padding:0.3rem 0.5rem;
    /* margin-top: 1rem; */
    
}
.sidebar__items > *{
    padding:0.3rem;
    width:90%;
    font-size:1rem;
} 


.sidebar__items li:hover{
    width: 100%;
    background-color: var(--primary-color);
    border-radius:5px;
}
.pages_container{
    width:90%;
    grid-area:main1;
    margin-top:25px ;
    
}

.pages_container h1{
    padding: 0.9rem 0 1.5rem 0;
}
.sub_heading{
    margin:2.5rem 0;
    font-weight: bold;
    color:  var(--primary-color);
    
}
.component_heading{
    margin-bottom:2.5rem;
    font-size:2rem;
}
.next_forward{
    width: 98%;
    display: flex;
    justify-content: space-between;
    
}
.next_forward h2{
   margin-bottom: 4rem;
   cursor: pointer;
}
.container{
    width:100%;
    height:fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding: 3rem 3rem;
    background-color: #e5ecee;
}
.container1{
    width:100%;
    height:fit-content;
    display: flex;
    background-color: #e5ecee;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    padding: 3rem 3rem;
 }
 .codebar{
     overflow-x: auto;
     overflow-y: auto;
     width:100%;
     display: block;
 
     font-size: 0.9rem;
    
 }
 .pages_container{
    padding:0 0 0 2rem
  }

    

@media screen and (max-width:1091px) {
    .pages_sidebar{
        display: none;
       }
    .pages{
        grid-template-columns: minmax(0,1fr);
        grid-template-areas: 'header1'
        'main1';}
    .pages_header{
        grid-area: header1;
    }
    .pages_container{
        width:98%;
        padding:0 0 0 1rem
      }
    
}