body, div, main, section, article {
  box-sizing: border-box; 
}

/* universal background color */
body {background-color: #000000;
	background-image: url("stars.gif");
	background-repeat: repeat;
	
}  

.container {  display: grid;
  grid-template-columns: .7fr 0.8fr 1.5fr 1.5fr 0.8fr 0.7fr;
  grid-template-rows: 0.2fr 0.5fr 3.9fr .1fr;
  gap: 5px 6px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". . Header Header . ."
    ". Left-Bar Nav Nav Right-Bar ."
    ". . . . . .";
}


.Header { grid-area: Header; 
		  border-radius: 100%;
			position: center;
			text-align: center;			
}

.Nav { 
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.7fr 0.3fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "."
    "Note";
  grid-area: Nav;
  background-color:  #000000;
  color: #fff9d2;
  border:3px inset #C70039;
  justify-content: center;
  text-align: center;}
  
.Note { grid-area: Note;
  background-color:  #FF5C5C;
  color: #fff9d2;
  border: inset #C70039;
  justify-content: center;
  text-align: center;
   border-width: 5px;
}

.Right-Bar {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "R1"
    "RM"
    "R2";
  grid-area: Right-Bar;
}

.RM { grid-area: RM; 
text-align: center;
}

.R2 { grid-area: R2; }

.R1 { grid-area: R1; }

.Left-Bar {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "L1"
    "LM"
    "L2";
  grid-area: Left-Bar;
}

.L1 { grid-area: L1; }

.LM { grid-area: LM; 
  text-align: center;
  
}

.L2 { grid-area: L2; }

html, body , .container {
  height: 100%;
  margin: 0;
}

img.cover{
    max-width: 700px;
    max-height: auto];
    width: auto;
    height: auto;}
img.Icon{
    width: 40px;
    height: auto;}
	
/* For presentation only, no need to copy the code below */