body {
  background-image: url('');
  background-color:  #CCCCFF;
  font-family: ;
  
  font-size: 18px;

}


    
.container > * {
  margin-bottom: 10px;
  margin-left: 0px;
  
}

/* Now let's apply grid for wider viewports. */
@media screen and (min-width: 40em) {
  .container > * {
    margin-bottom: 0;
    
  }
  /* Define the grid */
  .container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-gap: 10px 20px;
    
  }
  /* Place items on the grid */
  .header,
  .footer {
    grid-column:  1/ -1;
  }
  .content {
    grid-column: 2/ 3;
  }
}

@media only screen and (max-width: 767px) {
  
  .container {
    margin-left: 12px !important;
    margin-right: 12px !important;
    
}

.header {
    font-size: 17px !important;
}

}






h1 {
 font-family: ;
 font-size: 40;
 color: black;
 
}

h2 {
 font-family: ;
 font-size: 30;
 color: black;
 background-color:  	#d2afff;
 margin-top: 0px;
 text-align: center;
  
 
 
 
}

h3 {
 font-family: ;
 font-size: 20;
 color: yellow;
}

 p {
 font-family: ;
 font-size: 18;
 

   

}

/* Generic styles
---------------*/
.container {
  font-family: ;
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  
 
    

  

}

.container > * {
  background-color: white;
  color: black;
  padding: 1em;
  margin-top: 30px;
    border-bottom-style: dotted;
    border-left-style: dotted;
    border-right-style: dotted;
    border-top-style: dotted;
    border-color: black;
    margin-left: 0px;
  
    
}

.header {
  min-height: 60px;
  background-color: brown;
  color: black;
}
.content {
  min-height: 350px;
  background-color: brown;
  color: black;
    border-bottom-style: dotted;
    border-left-style: dotted;
    border-right-style: dotted;
    border-top-style: dotted;
  
 position: relative;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
         
    
}





.sidebar1 {
  min-height: 350px;
  background-color: transparent;
  color: black;

    border-bottom-style: none;
    border-left-style: none;
    border-right-style: none;
    border-top-style: none;
    
    padding-top: 0px;
    padding-left: 0px;
  padding-right: 0px;
  text-align: center;
   
  font-size: 18px;
  
  

}


.sidebar2 {
  min-height: 350px;
  background-color: #9FE2BF;
  color: black;
  max-height: 450px;
  
    border-bottom-style: none;
    border-left-style: none;
    border-right-style: none;
    border-top-style: none;
    padding: unset;
  text-align: center;
   
  font-size: 18px;
}


.scroll {
    overflow: auto;
    
    max-height: 520px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    padding: 0% 0% 0% 0%;
    margin-bottom: 30px;

    background-color: #9FE2BF;    
  
    border-bottom-style: dotted;
    border-left-style: dotted;
    border-right-style: dotted;
    border-top-style: dotted;
    border-color: purple;
  text-align: center;
  font-size: 18px;
 
}
.menu-custom{overflow: auto;
   
   
    margin-bottom: 30px;
    background-color: #9FE2BF;
    margin-left: 0px;
    border-bottom-style: dotted;
    border-left-style: dotted;
    border-right-style: dotted;
    border-top-style: dotted;
    border-color: purple;
text-align: center;
font-size: 18px;
  
}
  
/* Hiding scrollbar for Chrome, Safari and Opera */
.scroll::-webkit-scrollbar {
    display: none;
  
}

.footer {
  background-color: brown;
  color: black;

    border-bottom-style: dotted;
    border-left-style: dotted;
    border-right-style: dotted;
    border-top-style: dotted;
}

html,body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}



 /* unvisited link */
a:link {
  color: brown;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: orange;
}