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

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

.container {  display: grid;
  grid-template-columns: 0.7fr 1.2fr 1.4fr 1.2fr 0.8fr 0.7fr;
  grid-template-rows: 0.2fr 0.7fr 1.7fr 1.3fr 1.6fr .1fr;
  gap: 5px 6px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". Header Header Header Header ."
    ". Nav Nav Nav Side-Bar ."
    ". Nav Nav Nav Side-Bar ."
    ". Nav Nav Nav . ."
    ". . . . . .";
}

.Header { grid-area: Header; 
		  border-radius: 100%;
		    width: 100%;}

.Side-Bar { text-align: center;
  position: relative; 
  grid-template-columns:  1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Click"
    "."
    ".";
  grid-area: Side-Bar;
  background-color:  #000000;
  color: #fff9d2;
  border:3px solid #C70039;
  height: 300px
}

.Click { grid-area:Click;
  align-items: center;
	
}



img.animated-navgif{
  width: 20px;
  height: auto;
}
.Nav { 
  text-align: center;
  justify-content: center;
  height: 1000px;
  width: 100%;
  align-items: center;
  grid-area: Nav;
  padding:5px;
  background-color:  #000000;
  color: #fff9d2;
  border:3px inset #C70039;
  
}


img.animated-gif{
  width: 1000px;
  height: auto;
}
img.animated-gif1{
  width: 50px;
  height: auto;
}

img.cover{
    max-width: 800px;
    max-height: auto];
    width: auto;
    height: auto;}

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

/* For presentation only, no need to copy the code below */