html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  color: #031017;
  font-family: Verdana;
  height: 100vh;
}

hr {
  border: none; 
  border-top: 4px dotted #031017;
}

iframe{
  border: none; 
}

.grid {
  
  display: grid;
  
  /* 1. Define 3 columns: side columns take 1 fraction, center takes 2 fractions */
  grid-template-columns: 1fr 5fr; 
  
  /* 2. Map areas: each row string must have exactly 3 names to match the 3 columns */
  grid-template-areas:
    "sidebar main    .";
  height: 100%;
  
}

.main-sidebar { 
  grid-area: sidebar; 
  
  }

  
.main-content { 
  grid-area: main;
  margin: 10%;
  
  }
  
.sidebar{
  background-color: #B3DEF5;
  height: 100%;
  padding: 2%;
  text-align: center;
  position: fixed;
  border-right: 4px dotted white;

}
.main{
  height: 100%;
  padding: 30px;
  margin: 5%;
  margin-left: 210px;
  margin-top: 2%;
}