/* fonts */
 @font-face {
     font-family: BlockysSt;
     src: url(../font/BlockysSt.ttf);
}

/* fonts */
 @font-face {
     font-family: NationalPark;
     src: url(../font/NationalPark-VariableVF.ttf);
}

body {
    background-color:#211e20;
    background-image: url(../img/bg/toybox.png);
    background-attachment: fixed;
    color:#e9efec;
    font-family:"NationalPark", Helvetica, sans-serif;
    text-align:center;
}
.container {
    width:85%;
    max-width:800px;
    margin:auto;
    padding:15px;
    background-color:#555568;
    background-image: url(../img/bg/mag-blue.png);
    border:18px #121a70 ridge;
    border-radius:2px;
    overflow-x: hidden;
}

footer{
    image-rendering: pixelated;
    display: inline-block;
    margin: 5px;
    padding: 5px;
}

footer img:hover{
        transform:none;
}

a {
    color:#f3ffb9;
    text-decoration:none;
}
img:hover{
    transition: .3s;
    transform:scale(1.7);
}

summary {
    padding: 5px;
}

* {
    scrollbar-color:#555568 #a0a08b;
}

h1 {
    font-family: 'BlockysSt';
    color: whitesmoke;
    font-size: 45px;
}

::selection {
    background-color:#211e20;
    color:#e9efec;
}

/* adopt */
.adoptbig, .adoptlil {
    image-rendering: pixelated;
    display: inline-block;
    margin: 5px;
}
.adoptbig img {
    height: 100px;
}
.adoptlil img {
    height: 50px;
}
/* digital */
.button img{
    width: 88px;
    height: 31px;
}
.blinkie img{
    width: 150px;
    height: 20px;
}
.stamp img{
    width: 99px;
    height: 56px;
}
.button, .blinkie{
    image-rendering: pixelated;
}

.button, .blinkie, .stamp{
    display: inline-block;
    margin: 10px;
    padding: 10px;
    max-width: 90%;
}

/* clubs */
.clubton{
    image-rendering: pixelated;
    width: 176px;
    height: 62px;
    margin: auto;
    filter: drop-shadow(0);
}
.clubton:hover{
    transform:none;
}
.cdworld, .library, .bill, .sticker{
    image-rendering: pixelated;
    margin: 10px;
    padding: 10px;
}

.shelf {
    background-image: url(../img/bg/shelf.png);
    line-height: 15px;
    padding: 11px 15px;
    outline: #5d1c27 solid 10px;
    border: #863133 solid 5px;
    position: relative;
    vertical-align: text-bottom;
    margin: 30px auto;
    image-rendering: pixelated;
    width: fit-content;
}


/* BINDER CSS */
.tabcontent {display: none;}

/* Wrapper and background for the whole widget */
.pixelbinder {
  width: fit-content;
  position: relative;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  image-rendering: pixelated;
}

/* Setting the binder section in place */
.pixelbinderbg {
  width: 181px;
  height: 100px;
  position: relative;
  margin: 10px 0 10px 0;
  text-align: left;
}

.pixelbinderbg img:hover{transform: none;}

/* Setting the images in place */
.tabcontent img{position: absolute;}
#binderbackground{z-index:1}
#page1, #page2{z-index:2}
#page1 {left: 17px;top: 9px;} /* For the left pixelbill */
#page2 {left: 110px;top: 9px;} /*For the right pixelbill */

/* Image opacity on hover, you can change this to be whatever you want them to do */
/*.pixelbinder a img:hover{
transition: .5s;
    transform:scale(1.5);
}*/

/* Styling the buttons */
.pixelbinder button{
  background-color: #fff;
  border: none;
  color: #444951;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Garamond', serif;
  font-size: 16px;
}

/* Buttons on hover */
.pixelbinder button:hover{
  background-color: #FFEB3B;
  cursor: pointer;
}
/* BINDER CSS */

.sticker {
    background-color: #fdc2ce;
    border: 5px solid #ffe4ea;
    width: fit-content;
    border-radius: 15px;
    margin: auto;
    rotate: -1deg;
}
.sticker img{
    padding: 10px 10px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}
.sticker img:hover{
    rotate: 1deg;
}
@media only screen and (max-width: 500px) {
    .shelf {
        line-height: 65px;
        padding: 15px 10px;
}
body{   
}
    .container {
        border:10px #121a70 ridge;
        display: inline-block;
}
    h1 {
        font-size: 30px;
}
    .sticker img{
        padding: 5px 5px;
}
}