.container {  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows:20% 10% 20% 20% 20%;
  gap: 0px 8px;
  justify-items: center;
  grid-auto-flow: row;
  grid-template-areas:
    "SillySquare1 Logo Logo Logo SillySquare2"
    "SillySquare1 NavBar NavBar NavBar SillySquare2"
    "Sidebar Heart Heart Heart Sidebar2"
    "Sidebar Heart Heart Heart Sidebar2"
    "Sidebar Heart Heart Heart Sidebar2";
}
body {
    background: url("https://shortcakesketches.neocities.org/SparkleStars.gif") repeat;

}
img {
  max-width: 100%;
  height: auto; /* Maintains the aspect ratio */
}

.Logo { grid-area: Logo; 
background-color: #FAE8FF;
margin-left: auto;
margin-right: auto;
justify-self: center;
}

h4{
  color:saddlebrown;
}

.Sidebar { grid-area: Sidebar; }

.NavBar {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-area: NavBar;
}

.Sidebar2 { grid-area: Sidebar2; }

.SillySquare1 { grid-area: SillySquare1; }

.SillySquare2 { grid-area: SillySquare2; }

.Heart { grid-area: Heart; }

#OnionPage {
  background: url("https://shortcakesketches.neocities.org/Untitled%20design%20(2).png") repeat;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-style: double;
  border-color: blueviolet;
  border-radius: 8%;
  border-width: 10px;
}

#OnionThoughts {
  margin-left: auto;
  margin-right: auto;
  place-items: center;
  padding: 5%;
  width: 60%;
  background-color: cornsilk;
  font-family:'Lucida Sans', 'Lucida Sans Regular';
  text-align: center;

}
.photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.photopile figure { 
  display: inline-block;
  background: white;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 1rem 1rem 0 1rem;
  border: 2px rgb(0,0,0,0.55) inset;
}
.photopile figcaption, .popovers figcaption {

  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile button { 
  background: none; 
  border: none;
  max-width: 40%;
}
.photopile button:hover, .photopile button:focus { 
  z-index: 3;
  cursor:pointer;
}
.photopile button:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile button:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile button:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile button:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile button:nth-child(6n) {
  transform: rotate(-7deg);
}
:popover-open {
  border: none;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
}
.popovers figure:popover-open {
  display: block;
  background: white;
  width: 88vmin;
}
.popovers figure:popover-open figcaption {
  margin: 2.5vmin 1rem 4vmin 1rem;
  font-size: 175%;
  color: black;
}
.popovers figure:popover-open img {
  margin: 4vmin 4vmin 0 4vmin;
  width: 80vmin;
  border: 4px rgb(0,0,0,0.55) inset;
}