html {
    height: 100%;
}

.box {
  width: 90%;
  max-width: 800px;
  height: auto;
  overflow: visible;
  overflow-wrap: break-word;
  padding: 1rem;
}

.center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2rem;
  min-height: 100vh;
}

.dotted {
 border-top: 2px dotted;
 border-bottom: none;
 width: 50%;
}

.center-text{
        text-align: center;
    }

@font-face { font-family: "Snell"; src: url("/Fonts/snellroundhand_bold.otf") format("opentype");
}

h1 {
  font-family: "Snell";
  font-weight: normal;
  color:#FF87C8;
  mix-blend-mode: multiply;
  padding-left: 1.3rem;
}

body {
  background: #e2f875;
    background: radial-gradient(circle, rgba(226, 248, 117, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background-attachment: fixed;
  color: dimgrey;
  font-family: Courier New, monospace	;  
}

.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 {
  font-family: Courier New, monospace;
  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;
}

::selection {
  background-color: #FFD9E9;
  color: #000000;
}