/* 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." */

/* Star Wars Lightsaber - https://www.cursors-4u.com/cursor/oth26 */
* {
  cursor: url('https://cdn.cursors-4u.net/css-previews/star-wars-lightsaber-87822fec-css.webp') 0 0, auto !important;
}
/* End www.Cursors-4U.com Code */

body{
background-color: #353c4c;
background-image: url("./img/luke_skywalker/star_bg.png");
background-blend-mode: exclusion;
color: #bad8f9;
font-family: 'Cormorant Garamond', serif;
}
 
#all{
width: 800px;
margin: 0 auto;
}
 
img {
opacity: 0.9;
vertical-align: middle;
}
 
header{
width: 800px;
margin: 15px 0 7px 0;
}
 
h1{
font-family: 'Special Elite', serif;
text-align: center;
font-size: 45px;
font-weight: normal;
color: #0b0b0b;
margin: 0;
}

.quote{
  width: 800px;
  background-color: #462f24;
  padding: 15px;
  box-sizing: border-box;
}

h2{
text-align: center;
}
 
#nav{
background-color: #0b0b0b;
width: 800px;
margin-bottom: 10px;
}
 
ul{
text-align: center;
padding: 0;
margin: 0;
}
 
li{
list-style-type: none;
display: inline;
padding-left: 5px;
}
 
a{
text-decoration: none;
color: #ba7f6d;
}
 
a:visited{
color: #9e8376;
}
 
a:hover{
font-style: italic;
font-weight: bold;
}
 
a:active{
font-style: italic;
font-weight: bold;
}

::-webkit-scrollbar{
width: 6px; 
}
 
::-webkit-scrollbar-track{
background-color: #1a2634;
}
 
::-webkit-scrollbar-thumb{
background-color: #353c4c;
} 
 
.container{
background-color: #0b0b0b;
box-sizing: border-box;
max-width: 800px;
padding: 15px;
text-align: justify;
}
 
::-webkit-scrollbar{
width: 6px; 
}
 
::-webkit-scrollbar-track{
background-color: #0b0b0b;
}
 
::-webkit-scrollbar-thumb{
background-color: #353c4c;
}

.containertable {
  flex-wrap: wrap;
  overflow-x: hidden;
  display: table;
  flex: 1;
  flex-grow: 1;
  max-width: 800px;
  align-content: center;
  justify-content: center;
}

.containertable div {
  background-color: #462f24;
  border: 3px dotted #9e8376;
  box-sizing: border-box;
  display: table-cell;
  text-align: center;
  padding: 15px;
  justify-content: center;
  vertical-align: top;
}

.containergrid {
  display: grid;
  grid-template:
    "div div"
    "div div"
    / 1fr 1fr;
  gap: 10px;
}

.containergrid div{
  background-color: #0b0b0b;
  border: 5px dashed #9e8376;
  box-sizing: border-box;
  text-align: center;
  align-content: center;
  overflow: hidden;
}

.containergrid2 {
  display: grid;
  grid-template:
    "sidebar topbar"
    "sidebar centerbar"
    "sidebar footer"
    / 1fr 2fr;
  grid-gap: 10px;
  text-align: center;
  align-content: center;
  overflow: hidden;

}

aside {
  grid-area: sidebar;
  background-color: #304a66;
  border: 5px dashed #bad8f9;
  box-sizing: border-box;
}

img.aside {
  max-width: 100%;
  height: auto;
}

topbar {
  grid-area: topbar;
  background-color: #1e3752;
  border: 5px dashed #bad8f9;
  box-sizing: border-box;
  padding: 5px;
}

centerbar {
  grid-area: centerbar;
  background-color: #304a66;
  border: 5px dashed #bad8f9;
  box-sizing: border-box;
  padding: 5px;
}

footer {
  grid-area: footer;
  background-color: #1e3752;
  border: 5px dashed #bad8f9;
  box-sizing: border-box;
  padding: 5px;
}

.photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.photopile figure { 
  display: inline-block;
  background: #bfddff;
  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;
  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: #bfddff;
  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;
  max-width: 64vmin;
  border: 4px rgba(0,0,0,0.55) inset;
  box-sizing: border-box;
}