/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Cute Sparkly Pink Flower - https://www.cursors-4u.com/cursor/cute-pink-flower */
* {
  cursor: url('https://cdn.cursors-4u.net/css-previews/cute-sparkly-pink-flower-baa4f378-css.webp') 0 0, auto !important;
}
/* End www.Cursors-4U.com Code */ 


 body{
background-color: #71966B;
background-image: url('./img/IMG_4091.png');
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
color: #23262e;
font-family: 'Cormorant Garamond', serif;
}
 
#all{
width: 800px;
margin: 0 auto;
}
 
img{
opacity: 0.9;
}
 
#header{
width: 800px;
margin: 15px 0px 7px 0px;
}
 
h1{
font-family: 'Special Elite', serif;
text-align: center;
font-size: 45px;
font-weight: normal;
color: #fff;
margin: 0px;
}
 
#nav{
background-color: #fff;
width: 800px;
margin-bottom: 10px;
}
 
ul{
text-align: center;
padding: 0px;
margin: 0px;
}
 
li{
list-style-type: none;
display: inline;
padding-left: 5px;
}
 
a{
text-decoration: none;
color: #657346;
}
 
a:visited{
color: #657346;
}
 
a:hover{
font-style: italic;
font-weight: bold;
}
 
a:active{
font-style: italic;
font-weight: bold;
}

#smallmainparent{
  display: flex;
}

#smallmain{
background-color: #fff;
padding: 15px;
text-align: justify;
}
 
::-webkit-scrollbar{
width: 6px; 
}
 
::-webkit-scrollbar-track{
background-color: #1a1c16;
}
 
::-webkit-scrollbar-thumb{
background-color: #43473c;
} 
 
#main{
background-color: #fff;
width: 770px;
padding: 15px;
text-align: justify;
}
 
::-webkit-scrollbar{
width: 6px; 
}
 
::-webkit-scrollbar-track{
background-color: #1a1c16;
}
 
::-webkit-scrollbar-thumb{
background-color: #43473c;
}
 
#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
}
 
#credit a{
text-decoration: none;
color: #fff;
}
 
#credit a:visited{
color: #fff;
}
 
#credit a:hover{
font-style: italic;
font-weight: bold;
}
 
#credit a:active{
font-style: italic;
font-weight: bold;
}

#container {
background-color: #fff;
overflow: scroll;
overflow-x: hidden;
padding: 1rem;
border: 3px dotted #000;
}

.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% - 1rem);
  margin: .5rem .5rem 0 .5rem;
  border: 2px rgba(0,0,0,0.55) inset;
  box-sizing: border-box;
}
.photopile figcaption, .popovers figcaption {
  font-family: 'Cormorant Garamond', serif;
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile button { 
  background: none; 
  border: none;
  max-width: 30%;
}
.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;

}
.popovers figure:popover-open {
  display: block;
  background: white;
  max-width: 70vmin;
}
.popovers figure:popover-open figcaption {
  margin: 2.5vmin 1rem 4vmin 1rem;
  font-size: 150%;
  color: black;
}
.popovers figure:popover-open img {
  margin: 2vmin 2vmin 0 2vmin;
  max-width: 64vmin;
  border: 4px rgba(0,0,0,0.55) inset;
  box-sizing: border-box;
}