@font-face {
     font-family:'capone';
     src: url("../font/CaponeLightRegular.ttf");
}

img {
    image-rendering: pixelated;
}

section {
    margin: 2em;
    display: inline-block;
}

 .clubton {
     image-rendering: pixelated;
     width: 176px;
     height: 62px;
     margin: auto;
}

/* adopt */
 .adopt {
     image-rendering: pixelated;
     margin: 5px;
     background-image: url(../img/bg/hall-ghosts-light-transparent.png);
     background-color: #312714;
     border-radius: 20px;
     rotate: 0.5deg;
     padding: 20px;
}
 .adopt img:hover {
     rotate: -0.5deg;
}
 .adoptbig img {
     mix-height: 100px;
     max-height: 130px;
}
 .adoptlil img {
     min-height: 30px;
     max-height: 60px;
}

/* vinyl records pixel club css START */
.pixelrecords {
    background-color: #3e2308;
    padding: 1em;
    border-radius: 4em;
    border: 0.5em solid #516146;
    filter: drop-shadow(4px#516146);
    display: inline-block;
}

.pixrecord {
    display: inline-flex;
    align-items: center;
    margin: 10px;
    padding: 25px;
    image-rendering: pixelated;
    width: fit-content;
  }

  .vinyl {
    margin-left: -60px;
    padding: 10px;
    position: relative;
  }

    .vinyl:hover {
    right: -75px;
     transform: scale(1); 
  }
  
/* alt spin (optional): animation: spin 2.5s infinite; */

  .cover {
    position: relative;
    z-index: 1;
  }

.cover:hover{
    transform: scale(1);
}
  
/* vinyl records pixel club css END */

/* CLUBS */
 .cdworld {
     background-color: #8c9bae;
     text-align: center;
     padding: 15px;
     border: 5pt #ffffff outset;
}
 .cdworld img{
     padding: 5px;
}
 .pizzaparty {
     text-align: center;
     background-color: black;
     border-radius: 20px;
     border: 5px solid #ffab91;
     box-shadow: 0 0 0 10px #E64919;
     padding: 10px;
}
 .pizzaparty a {
     color: white;
}
/* Wrapping the whole thing */
 .pizzaplate {
     margin-left: auto;
     margin-right: auto;
     width: 90px;
     height: 94px;
     position: relative;
     image-rendering: pixelated;
}
/* Setting the plate in place */
 .plateimage {
     width: 90px;
     height: 94px;
     z-index:1;
     position: absolute;
     left: 0px;
     top: 0px;
     pointer-events: none;
}
/* Making the pizas in the right place */
 .pizza {
     z-index:2;
     position: absolute;
     transition: ease 0.5s;
}
 #pizza1 {
     left: 5px;
     top: 0px;
}
/* For the top left slice */
 #pizza2 {
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
     left: 44px;
     top: 0px;
}
/* For the top right slice */
 #pizza3 {
     -webkit-transform: scaleY(-1);
     transform: scaleY(-1);
     left: 5px;
     top: 15px;
}
/* For the bottom left slice */
 #pizza4 {
     rotate: 180deg;
     left: 44px;
     top: 15px;
}
/* For the bottom right slice */
/* Pizzas grown on hover */
 #pizza1:hover, #pizza4:hover {
     transform: scale(2);
     z-index:3 
}
/* Top left and bottom right */
 #pizza2:hover {
     -webkit-transform: scaleX(-2) scaleY(2);
     transform: scaleX(-2) scaleY(2);
     z-index:3 
}
/* For the top right slice */
 #pizza3:hover {
     -webkit-transform: scaleY(-2) scaleX(2);
     transform: scaleY(-2) scaleX(2);
     z-index:3 
}

 .partyhat img{
     margin:.5em;
     scale: 1.5;
     filter: drop-shadow(0px 0px 4px rgba(109, 109, 109, 0.65));

}
/* For the bottom left slice */
 .library {
     text-align: center;
     padding:20px;
     background-color: #5d1c27;
}
 .shelf {
     background:url(../img/bg/shelf.png);
     outline: #5d1c27 solid 15px;
     border: #863133 solid 5px;
     position: relative;
     vertical-align: text-bottom;
     image-rendering: pixelated;
     line-height: 70px;
     padding: 20px 20px;
     margin: 10px 0;
}

 .shelf img {
     margin:.04em;
}

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

.bill {
    color: black;
    background-image: url(../img/bg/brownwoodenboard_FWStudio.png);
    width: fit-content;
    padding: 1em;
}

/* 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;
}
/* Setting the images in place */
 .tabcontent img {
     position: absolute;
}
 #binderbackground {
     z-index: 1;
     transform: none;
     pointer-events: none;
}
 #page1, #page2 {
     z-index: 2;
}
 #page1 {
     left: 17px;
     top: 9px;
}
/* For the left pixelbill */
 #page2 {
     left: 110px;
     top: 9px;
}
/*For the right pixelbill */
/* Styling the buttons */
 .pixelbinder button {
     background-color: #fff;
     border: none;
     color: #444951;
     text-align: center;
     text-decoration: none;
     font-family: "Garamond", serif;
     font-size: 16px;
}
/* Buttons on hover */
 .pixelbinder button:hover {
     background-color: #ffeb3b;
     cursor: pointer;
}
/* BINDER CSS */

/* Sticker Sheet Club Styling http://www.stickersheetclub.neocities.org */
/* Table Styling */
 .stickersheet {
     width: fit-content;
     padding: 10px;
}
 table {
     background-color: #fdc2ce;
     border: 1px solid #fdc2ce;
     width: 250px;
}
/* Space between the stickers */
 td img {
     padding:0px 10px;
}
/* Black shadow around stickers You can change or remove this if you want */
 .stickersimg img {
     padding: 4px;
     filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}
/* To customize mulitple sets of tables: Each sticker sheet has 3 tables: ssclubheader_#, ssclubstickers_#, and #ssclubfooter_#. Give each set of tables a different number. */
 #ssclubheader_1 {
background-image:url('https://stickersheetclub.neocities.org/images/stickersheetheader.png'); 
background-repeat: no-repeat; 
background-position: top center;
height: 80px;
color: #e55a76;
}
 #ssclubstickers_1 {
    /* You can add a different background color or image here too! */
}
 #ssclubfooter_1 {
    /* Here too! */
    background-color: #fff; 
    border: 1px solid #fdc2ce;
}


/* START OF CSS Sylvanian Critters Pixel Club Box - PUT THIS BETWEEN YOUR <head></head> TAGS */
 .sillyvanianbox {
         display: inline-block;
         font-family: 'capone';
         color: #aa0b21;
}

 #sillyvanianheader {
     width: 351px;
     background-color: #4ca7b7;
     border: 1px solid white;
     border-bottom: 0;
     background-image:url('../img/club/sylvanian/sc_header.png'); 
     background-position: top center;
     height: 68px;
}
 #sillyvanianbody {
     width: 351px;
     height: fit-content;
     background-color: #4ca7b7;
     border: 1px solid white;
     border-bottom: 0;
     border-top: 0;

}
 #sillyvanianfooter {
     width: 351px;
     background-color: #4ca7b7;
     border: 1px solid white;
     border-top: 0;
     background-image:url('../img/club/sylvanian/sc_footer.png'); 
     background-position: top center;
     height: 53px;
}
/* END OF CSS Sylvanian Critters Pixel Club Box */
 @media (max-width: 70rem) {
     body {
         width: 100vw;
         height: 100vh;
    }
}

/* END OF CSS Sylvanian Critters Pixel Club Box */
 @media (max-width: 50rem) {

     .cdworld, .library {
width: fit-content;
    }

     #sillyvanianheader {
     width: 260px;
    }
    #sillyvanianbody {
        max-width: 260px;
    }
    #sillyvanianfooter {
        max-width: 260px;
    }

}