html,
body {
  margin: 0px;
  padding: 0px;
  height: 95vh;
  width: 100vw;
  max-width:1024px;
  margin-left:auto;
  margin-right:auto;
  background-color:#757575;
  font-family:'Comic Sans MS', 'VERDANA', 'ARIAL', 'HELVETICA';
}

nav {
  border-color:#cccccc; 
 padding:0px;  
 border-radius:0px; 
 border-style:inset; 
 font-weight:normal; 
 border-width:3px;  
  background-color:#2d2d2d;
  color:white;
  height:30px;
  }


nav a:link, a:visited, a:active{
  text-decoration: none;
  color:white;
}
  
nav a:hover {
  color:gray;
  }
  
.debug{
  background-color:red;
  }

.maincontainer{
  display: grid;
  grid-template-columns: auto auto;
  margin-top:10px;
  
  }

.maincontainer a:link, a:visited, a:active{
  color:Black;
}

.maincontainer a:hover {
  color:white;
  }

.sidebar{
  width:250px;
  float:left;
  border-color:#cccccc; 
 padding:0px;  
 border-radius:0px; 
 border-style:inset; 
 font-weight:normal; 
 border-width:3px;  
 margin-right:10px;
 background-color:#c5c5c5;
  }  
  
  
.listing{
  border-color:#cccccc; 
 padding:0px;  
 border-radius:0px; 
 border-style:inset; 
 font-weight:normal; 
 border-width:3px;  
 background-color:#c5c5c5;
  }
  
  .listing img{
  Width:240px;
 height:240px
  }
  
  
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap:10px;
  
}
.container > div {
  
text-align:center;
}
  
.viewport{
  border-color:#cccccc; 
 padding:0px;  
 border-radius:0px; 
 border-style:inset; 
 font-weight:normal; 
 border-width:3px;  
 background-color:#c5c5c5;
 Width:752px;
 height:752px
 }
 
 .viewport img{
 Width:752px;
 height:752px
 }

.Viewercontainer {
  display: grid;
  grid-template-columns: 75% 25%;
  grid-gap:10px;
  
}

.ViewerSidebar {
  width:250px;
  float:right;
  border-color:#cccccc; 
 padding:0px;  
 border-radius:0px; 
 border-style:inset; 
 font-weight:normal; 
 border-width:3px;  
 margin-right:10px;
 background-color:#c5c5c5;
  }