/****** fonts ******/

/****** scrollbar ******/
::-webkit-scrollbar{
    display:none;
}

/****** select hightlight ******/
::selection{
    background:#fed6e8;
    color:white;
}

::-moz-selection{
    background:#000;
    color:white;
}

/****** body ******/
body{
    background-color:#fed6e8;
    background-image:url();
    background-repeat:repeat;
    background-position:0 0;
    background-attachment:fixed;
    color:#000; /* default font color */
    font-family:"Calibri"; /* default font */
    font-size:14px; /* default font size */
    padding:15px;
}

/****** links ******/
a{
    text-decoration:none;
    color:#000;
    transition:0.3s;
    text-shadow: 0px 0 #d9bbba, 0 1px #d9bbba, 1px 0 #d9bbba, 0 -1px #d9bbba;
}

a:hover{
    cursor:url("/Cursors/Unavailable%20.cur"), auto ;
    transition:0.3s;
    color:#000;
    text-shadow: 0px 0 #7f6a68, 0 1px #7f6a68, 1px 0 #7f6a68, 0 -1px #7f6a68;
}

/****** wrappers ******/
#wrapper{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    animation:fadeEffect 1s;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

@keyframes fadeEffect{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/****** containers ******/
.container{
    width:500px;
    height:550px;
    border:5px solid #fff;
    background-color:#fed6e8;
    padding:20px;
    overflow:auto;
}

.inner{
    border:5px solid #fed6e8;
    background-color:white;
    padding:10px;
}

.icon{
    border:5px solid #fff;
    margin-right:50px;
    padding:10px;
    background-color:#fed6e8;
}

.icon img{
    width:250px;
    height:auto;
    display:block;
}

.links{
    display:flex;
    flex-direction:column;
    width:120px;
}

.links a{
    border:5px solid #fff;
    background-color:#fed6e8;
    border-left:none;
    margin:20px 0;
    padding:10px;
    width:100px;
    transition:all .3s ease-in-out;
    text-align:center;
}

.one:hover, .two:hover, .three:hover, .four:hover, .five:hover{
    width:120px;
    transition:all .3s ease-in-out;
}

.title{
    font-size:70px;
    position:absolute;
    color:#000;
    margin-top:-75px; /* change this if the title is too low */
    text-shadow:3px 0 #fff, 0 px #fff, 0px 0 #fff, 0 px #fff;
}
.photopile { 
  display: flex; 
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  max-width: 90%;
}
.photopile figure { 
  display: inline-block;
  background: white;
  box-shadow: 0 0 0.4rem rgb(0,0,0,0.75);
  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: /* set this to have it match the rest of the page */;
  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: 0 0 0.4rem rgb(0,0,0,0.75);
  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;
}