/*OKAY SO-MAIN AREA- MIGHT CHANGE BACKGROUND TO BE DIF FOR EACH PAGE LATER WHO KNOWS LOL*/
.container {
  display: grid;
  grid-template-columns: 200px 1fr; 
  grid-template-rows: 100px 1fr;
  grid-template-areas: 
    "header header"
    "sidebar content";
  height: 100vh; 

}

.top-bar {
  grid-area: header;
  background-color: #274239; 
  border-style: groove;
   border-color: #172d26;
     color: #ffffff;
       display: flex;
       gap: 20px;
}
.top-bar a{
  color:white;
  text-decoration:none;
}

.side-bar {
  grid-area: sidebar;
  background-color: #1d382f;
  overflow-y: auto; 
  border-style: groove;
  border-top:none;
  border-color: #172d26;
       color: #ffffff;
       justify-content: center; 
  align-items: center;
}
.side-bar h1 {
  text-align: center;
  margin-top: 20px;
}
.side-bar p {
  text-align: center;
  margin-top: 20px;
}
/*!everything for the main general content area- might need to make a secound one for diffrent pageas*/
.content {
  grid-area: content;
  background-image:url('images/background.gif');
  overflow-y: auto;
}
 .content h1{
 color: #170d0d;
   text-align: center;
  margin-top: 20px;
  font-size:30px;
}
.content p{
 color: #1d0f0f;
   text-align: center;
  margin-top: 20px;
  font-size:20px;
}




body {
  background-color:  #172d26;
}
img {
  display: block;
  margin: auto;

}