.box {
  border: 10px solid black;
  margin: 8px;
  height: 800px;
}

.grid-container {
  display: grid;
  grid-template-areas: "col1 col2 col2 col2 col2 col2 col2 col2";
}

.button {
  margin: 10px;
  
}

.sidebar {
  display: block;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15%;
  
}

.buttons {
  display: block;
  margin-top: 10%;
  margin-left: 50%;
  margin-right: auto;
  margin-bottom: 15%;

  
}

.img {
  opacity: 0;

  
}

#g1 {
  padding: 70px;
  grid-area: col1;
  
}

#g2 {
  padding: 70px;
  grid-area: col2;
}

#sidebar {
   height: 729px;
   width: 254px;
   
}

#images {
   background-image: url('Imagesnor-100.jpg');
   position: absolute;
   left: 50px;
   top: 455px;
   height: 47px;
   width: 121px;
}

#images:hover {
   background-image: url('ImagesActive-100.jpg');
   height: 32px;
   width: 130px;
}

#sm {
   background-image: url('SMnor-100.jpg');
   position: absolute;
   left: 50px;
   top: 505px;
   height: 47px;
   width: 136px;
}

#sm:hover {
   background-image: url('SMActive-100.jpg');
   height: 32px;
   width: 140px;
}
#about {
   background-image: url('Aboutnor-100.jpg');
   position: absolute;
   left: 50px;
   top: 555px;
   height: 47px;
   width: 142px;
}

#about:hover {
   background-image: url('AboutActive-100.jpg');
   height: 32px;
   width: 145px;
}