
body, div, main, section, article {
  box-sizing: border-box; 
}

/* universal background color */
body {background-color: #000000;
	background-image: url("giggle.png");
	cursor: url("cursor.png"), auto;
}  

.container {  display: grid;
  grid-template-columns: 0.3fr 2.4fr 0.3fr;
  grid-template-rows: 0.4fr 2.3fr 0.3fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    ". Header ."
    ". Body ."
    ". Footer .";
}

.Header { grid-area: Header; 
  position: center;
  align-items: center;
  background-color: #ffffaa;
  border: 5px solid orange;
  padding: 10px;
  text-align: center;
  justify-content: center;
}

.Body {  display: grid;
  grid-template-columns: 0.6fr 1.8fr 0.6fr;
  grid-template-rows: 0.6fr 1.8fr 0.6fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "Bug Bug Bug"
    ". Note ."
    ". . .";
  grid-area: Body;
  align-items: center;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.Bug {  grid-area: Bug;
  align-items: center;
  text-align: center;
  justify-content: center;
  align-items: center;

	
}

.Note { grid-area: Note; 
  align-items: center;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.Footer { grid-area: Footer; }


html, body , .container {
  height: 100%;
  margin: 0;
}






img.animated-gif{
  width: 400px;
  height: auto;
}

img.Bughead{
  width: 500px;
  height: auto;
}

img.animated-gif1{
  width: 50px;
  height: auto;
}
 
 
 /* (C) 2D SPINNING ANIMATION */
@keyframes spin {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}
.spin { animation: spin 3s linear infinite; }
/* (X) DEMO IMAGES */
.demo {
  width: 300px; height:300px;
  object-fit: cover;
  border-radius: 50%;
}

 

#bitmap {

  background-color: #ffffaa;
  border: 15px solid orange;
  padding: 10px;
  align-items: center;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-image: url("border.png")  30 /
  30px round;
}


html, body , .container {
  height: 100%;
  margin: 0;
}

/* For presentation only, no need to copy the code below */






