* {
      box-sizing: border-box;
    }

    @font-face {
    font-family: 'HallowenInline';
    src: url('../fonts/HallowenInline.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
} 

    @font-face {
    font-family: 'Rocky';
    src: url('../fonts/rocky.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 

    @font-face {
    font-family: 'Groovy Ghosts';
    src: url('../fonts/GROOVYGH.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
} 

  h1, h2, span {
    font-family: 'HallowenInline';
    letter-spacing: 3px;
  }

  h3, p, a, li, .marquee, details {
    font-family: 'Grenze Gotisch';
    font-size: 18px;
  }

  #lab h1, .color h1 {
    font-family: 'Rocky';
    font-size: 60px;
    color: white;
    -webkit-filter: drop-shadow(0 0 5px #000000);
    filter: drop-shadow(0 0 5px #000000);
    position: relative;
    z-index: 999;
  }

  h3 {
    text-decoration: underline;
    text-decoration-style: double;
    font-size: 25px;
  }

  .credits h4 {
    text-decoration: underline;
    text-decoration-style: double;
  }

  .library li {
    color: white;
  }

  .foyer a, .library a, #lab a, .kitchen a, .icecream a {
    color: #edc4ed;
    text-decoration: none;
    display: inline-block;
    transition: .2s;
  }

  .foyer a:hover, .library a:hover, .icecream a:hover, .credits a:hover {
    color: white;
    text-decoration: none;
    -webkit-filter: drop-shadow(0 0 5px #871dff);
    filter: drop-shadow(0 0 5px #871dff);
    transform: translateY(-4px);
    transition: .2s;
  }

  .credits a {
    color: darkorchid;
    text-decoration: none;
    display: inline-block;
    transition: .2s;
  }

  .credits a:hover {
    color: black;
    text-decoration: none;
    -webkit-filter: drop-shadow(0 0 5px #871dff);
    filter: drop-shadow(0 0 5px #871dff);
    transform: translateY(-4px);
    transition: .2s;
  }

  #lab a:hover {
    color: white;
    text-decoration: none;
    -webkit-filter: drop-shadow(0 0 5px #ff561d);
    filter: drop-shadow(0 0 5px #ff561d);
    transform: translateY(-4px);
    transition: .2s;
  }

  .kitchen a {
    color: darkorange;
    text-decoration: none;
    display: inline-block;
    transition: .2s;
  }

  .kitchen ul, .credits ul {
    list-style-image: url('/img/halloween/bat6.gif');
    color: black;
  }

  .kitchen a:hover {
    color: black;
    text-decoration: none;
    -webkit-filter: drop-shadow(0 0 5px orange);
    filter: drop-shadow(0 0 5px orange);
    transform: translateY(-4px);
    transition: .2s;
  }

   .notfound a {
    color: white;
    text-decoration: none;
   }

   .notfound a:hover {
    color: orange;
   }

  ::-moz-selection { /* Code for Firefox */
    color: white;
    background: black;
  }

  ::selection {
    color: white;
    background: black;
  } 

  button {
    background-color: transparent;
    border: none;
    padding: 0;
  }
  
  html {
  cursor: url("/img/halloween/cursor.png"), auto;  
  }
     body {
       margin: 0;
     }








     /* INDEX */

     .benjerrys {
       background-color: darkorange;
       background-image: url(/img/halloween/halloween1.jpg);
       background-size: 300px;
     }

     .header {
      padding-left: 20%;
      font-size: 30px;
      -webkit-filter: drop-shadow(0 0 5px #ffffff);
      filter: drop-shadow(0 0 5px #ffffff);
      margin-bottom: -10%;
      margin-top: -30px;
      position: relative;
      z-index: 99;
     }


     .lace {
       --borderwidth: 60px;
       border: var(--borderwidth) solid transparent;
       border-image-source: url(/img/lace-white.png);
       border-image-slice: 84;
       border-image-repeat: round;
       border-image-outset: 1;
       border-radius: 0px;
       outline: none;
       margin: var(--borderwidth);
       margin: auto;
       margin-top: 12vh;
       height: 35vw;
       width: 61.5vw;
       -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
     }

     .lace>.bjwrapper, .lace>.cryptbody {
       margin: calc(0px - var(--borderwidth))
     }

     .bjwrapper {
       overflow-y: hidden;
       overflow-x: auto;
       perspective: 25px;
       background-image: url("/img/halloween/moon.gif"), linear-gradient(#1f1f1f, #8e8e8e);
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-position: 18% 12%;
       background-size: 12vh, 100%;
       height: inherit;
       min-height: inherit;
     }

     .parallax {
       position: relative;
       height: 100%;
       transform-style: preserve-3d;
       pointer-events: none;
     }

     .noclicky {
       pointer-events: none;
       user-select: none;
     }

     .yesclicky {
       pointer-events: auto !important;
       user-select: auto !important;
     }

     .frontlayer {
       position: absolute;
       width: 123vw;
       bottom: -5px;
       left: 16%;
     }

     .cemetery {
       transform: translateZ(-10px) scale(1.4);
       position: absolute;
       height: 31vw;
       bottom: -3%;
       left: -3.6%;
     }

     .backhill {
       transform: translateZ(-15px) scale(1.4);
       position: absolute;
       height: 21vw;
       bottom: 18%;
       left: 88%;
       -webkit-filter: drop-shadow(0 0 70px #b7b7b7b7);
      filter: drop-shadow(0 0 70px #b7b7b7b7);
     }

     .manor {
       transform: translateZ(-30px) scale(1.4);
       position: absolute;
       height: 23vw;
       bottom: 30%;
       left: 67%;
       -webkit-filter: drop-shadow(0 0 70px #b7b7b7b7);
      filter: drop-shadow(0 0 70px #b7b7b7b7);
     }

     .hills {
       transform: translateZ(-70px) scale(1.4);
       position: absolute;
       z-index: -1 ;
       height: 23.7vw;
       bottom: 30%;
       left: -71.7%;
       -webkit-filter: drop-shadow(0 0 70px #b7b7b7b7);
        filter: drop-shadow(0 0 70px #b7b7b7b7);
        margin: 0;
        padding: 0;
     }

     .halloweenbar {
      display: flex;
      position: fixed;
      height: 15%;
      width: 110%;
      text-align: center;
      margin-bottom: -60px;
      bottom: 0px;
      z-index: 9;
      left: -4%;
     }

     .halloweenbar a, .tombstone {
      margin: 0 2px 0 2px;
      height: 100%;
      display: block;
     }

     .dedburied {
      height: 91%;
      margin: 5px 5px 0 5px;
      -webkit-filter: drop-shadow(0 0 5px #33e90a);
      filter: drop-shadow(0 0 5px #33e90a);
     }









     /* FOYER */

     .foyer {
       background-image: linear-gradient(#ff000000, #00000080), url(/img/halloween/wallpaper2.jpg);
       background-size: 100px;
       image-rendering: pixelated;
     }

     .fwrapper {
       height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        perspective: 10px;
     }

     .fheader {
      text-align: center;
      font-size: 30px;
      color: white;
      position: relative;
      width: 100%;
      height: 15%;
      left: 50%;
      transform: translate(-50%, 0%);
      z-index: 9;
      -webkit-filter: drop-shadow(0 0 5px #000000);
      filter: drop-shadow(0 0 5px #000000);
     }

     .fheader h1 {
      -webkit-filter: drop-shadow(0 0 5px #e65e04);
      filter: drop-shadow(0 0 5px #e65e04);
     }

     .headertext {
      width: 50%;
      margin: auto;
     }

     .chandie {
      width: 32%;
      z-index: -1;
      margin-top: -160px;
      position: relative;
      -webkit-filter: drop-shadow(0 -20px 15px #cc8630c3);
      filter: drop-shadow(0 -20px 15px #cc8630c3);
     }

    .container {
      transform: translateZ(-10px) scale(2);
       position: absolute;
       left: 0; 
      right: 0; 
      margin-inline: auto; 
      width: 63%;
      top: 170vh;
    }

     .foyermain {
      border: 3px #4f3161 dashed;
      background-image: url(/img/halloween/floor2.png);
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: #00000072;
     }

     .foyermain p {
      -webkit-filter: drop-shadow(0 0 5px darkorchid);
        filter: drop-shadow(0 0 5px darkorchid);
      font-size: 20px !important;
     }

     /* Custom player style */
      #section3 midi-player {
        width: 100%;
        justify-content: center;
        align-items: center;
      }
      #section3 midi-player::part(control-panel) {
        background: transparent;
        border-radius: 0;
      }
      #section3 midi-player::part(play-button) {
        color: #f12900;
        border: 2px solid currentColor;
        background-color: orange;
        border-radius: 20px;
        transition: all 0.2s;
        content: 'hello';
      }
      #section3 midi-player::part(play-button):hover {
        color: orange;
        background-color: #f12900;
      }
      #section3 midi-player::part(time) {
        font-family: 'Grenze Gotisch';
      }

     .deco {
      transform: translateZ(-20px) scale(3);
      position: absolute;
     }

     .mainwrapper {
      display: flex;
      margin: 30px -130px 0px -130px;
     }

     .sidecolumn {
      width: 20%;
      position: relative;
      color: white;
     }

     .centercolumn {
      width: 60%;
      margin: 0 30px 0 30px;
      color: white;
      text-align: center;
     }

     .stairs {
      margin: auto;
      left: 50%;
      transform: translate(-50%, 0%);
      top: -200px;
      width: 80%;
      position: relative;
      margin-bottom: -200px;
     }

     .ghosties {
      position: absolute;
      width: 80px;
     }

     .left1 {
      background-image: url(/img/halloween/pumpkincandycorn.jpg);
      border: 2px white dashed;
      background-size: cover;
      height: 410px;
      color: white;
      position: relative;
      text-align: center;
     }

     .door1 {
      transform: skew(0deg, -30deg);
      height: 300px;
      margin-top: 30px;
     }

     .door2 {
      transform: skew(0deg, 30deg);
      height: 300px;
      margin-top: 30px;
     }

     .door3 {
      transform: skew(0deg, 20deg);
      height: 300px;
     }

     .door4 {
      margin: 30px 50px;
      transform: perspective(100px) rotateX(-20deg);
      width: 300px;
      transform-origin: bottom center;
      height: 150px;
     }

     .center {
      text-align: center;
      justify-content: center;
      align-items: center;
     }

     .flex {
      display: flex;
     }

     .flexwrap {
      flex-wrap: wrap;
     }

     .drag {
      position: absolute;
      width: 50%;
      z-index: 99;
     }

    .imgtxt {
      width: fit-content;
      height: fit-content;
      display: inline-block;
      position: relative;
    }

    .imgtxt span {
      opacity: 0;
      position: absolute;
      text-align: center;
      left: 50%;
      top: 55%;
      transform: translate(-50%, -50%);
      z-index: 99;
      font-size: 2.5rem;
      color: #FFF;
      filter: drop-shadow(1px 1px 0 black) 
        drop-shadow(-1px 1px 0 black)
        drop-shadow(1px -1px 0 black)
        drop-shadow(-1px -1px 0 black);
    }

    .imgtxt:hover span, .imgtxt:focus span {
      opacity: 1;
    }

    .benjerrys .imgtxt span {
      left: 55% !important;
      top: 60% !important;
    }

    .phantomz {
      width: 300px;
      position: absolute;
      z-index: -1;
      margin: auto;
      transform: translate(-120%, 0%);
      top: 80px;
    }
    
    .footer {
      text-align: center;
      margin-bottom: 30px;
      color: white;
    }

    .footer img {
      transition: 0.3s;
    }

    .footer img:hover {
      -webkit-filter: drop-shadow(0 0 10px #c2ff1ac3);
      filter: drop-shadow(0 0 10px #c2ff1ac3);
      transition: 0.3s;
    }







    /* NOT FOUND */

    .notfound {
      background-image: url(/img/halloween/ecba7577322860c5cb5975c1e487d05d.jpg);
      background-size: 300px;
    }

    .nfbody {
      background-color: #000000e3;
      border-radius: 20px;
      border: 2px dashed orangered;
      text-align: center;
      margin: auto;
      width: 40%;
      margin-top: 7%;
      padding: 30px;
      color: orangered;
    }

    .nfbody h1 {
      font-size: 50px;
    }








    /* LIBRARY */

    .library {
      background-image: url(/img/halloween/streamer1.png), url(/img/halloween/34.jpg);
      background-size: 300px;
      background-repeat: repeat-x, repeat;
      position: relative;
      background-attachment: fixed;
    }

    .lwrapper {
      width: 60%;
      max-width:860px;
      margin: 0 auto 30px auto;
    }

    .top {
      margin-top: 7%;
    }

    .lcontainer {
      display: flex;
      position: relative;
      margin-top: 30px;
    }

    .movies {
      overflow-y: hidden;
      overflow-x: auto;
      border: #fc4fa5 2px dashed;
      padding: 15px;
      display: flex;
      background-color: #0000008d;
    }

    .movies img {
      width: 140px;
      margin: 0 10px 0 10px;
    }

    .movietitle {
      position:absolute;
      font-size:40px;
      left:15%;
      margin-top:-20px;
      color:white;
      filter: drop-shadow(1px 1px 0 black) 
        drop-shadow(-1px 1px 0 black)
        drop-shadow(1px -1px 0 black)
        drop-shadow(-1px -1px 0 black);
    }

    .gamestitle {
      position:absolute;
      font-size:40px;
      right:15%;
      margin-top:10px;
      z-index: 9;
      color:white;
      filter: drop-shadow(1px 1px 0 black) 
        drop-shadow(-1px 1px 0 black)
        drop-shadow(1px -1px 0 black)
        drop-shadow(-1px -1px 0 black);
    }

    .mediacont {
      width: 65%;
      border: lawngreen 2px dashed;
      background-color: #0000008d;
      padding: 15px;
      height: 500px;
      margin: 0 -50px 0 20px;
      overflow: auto;
      color: white;
    }

    .viddygames {
      width: 73%;
      border: orchid 2px dashed;
      background-color: #0000008d;
      padding: 15px;
      height: 500px;
      margin-top:-15px;
      overflow: auto;
      color: white;
    }

    .greatpumpkin {
      border: 40px solid transparent;
      border-image: url(/img/halloween/2020-halloween-bats-jack-o-lanterns-spiders.png) 15% round;
      border-image-outset: 15px 15px; 
      width: 500px;
      background-color: black;
    }

    .gp {
      margin: -20px 0px -20px 0px !important;
      width: 100% !important;
      padding: 0% 0% 66% 0% !important;
      width: 100% !important;
    }

    .column {
      width: 27%;
      height: 500px;
      margin-right: 20px;
    }

    .column img {
      margin-bottom: 10px;
    }

    .indent {
      margin-left: 45px;
    }
 
    .tv {
      position: relative;
      display: inline-block;
      margin-right: 20px;
    }

    .screen {
      background-image: url(/img/halloween/1.jpg);
      background-size: cover;
      width: 180px;
      height: 155px;
      position: absolute;
      top: 190px;
      left:55px;
      z-index:8;
    }

  .ytvid {
    position: relative;
    display: block;
    width: 80%; /* width of iframe wrapper */
    height: 0;
    margin: auto;
    padding: 0% 0% 46% 0% ; /* 16:9 ratio */
  }

  .ytvid iframe {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

    .lfooter {
     height: 200px;
     position: absolute;
    transition: .3s;
    z-index: 99;
    }

    .trinkets {
    transition: .3s;
    }

  .lfooter:hover, .trinkets:hover { 
    rotate: -10deg; 
    transition: .3s;
  }









  /* LAB */

  #lab {
      filter: grayscale(100%);
      position: relative;
      background-color: #b2b2b2;
      image-rendering: pixelated;
    }

  #lab::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    margin: -10% 0 -10% 0;
    width: 100%; 
    height: 111%;
    background-image: linear-gradient(#f26704bf, #6f00c497), url(/img/halloween/crop_concrete-018.jpg);
    background-attachment: fixed, scroll;
    background-size: 550px;
    z-index: -2;
}

  .labcontainer {
    display: flex;
    width: 75%;
    margin: 5% auto 5% auto;
    max-width: 1200px;
  }

  .lazers {
    position: absolute;
    width: 550px;
    top: 0;
    transform: translate(-50%, 0%);
    z-index: 99;
    margin-top: -50px;
  }

  .labcentercolumn {
    width: 65%;
    position: relative;
    z-index: 9;
  }

  .labside {
    position: relative;
    z-index: 9;
  }

  .lightning {
    border: 110px solid transparent;
    border-image: url(/img/halloween/lightning.png) 20% round;
    border-image-outset: 60px 60px; 
    -webkit-filter: drop-shadow(0 0 10px #00bae4);
    filter: drop-shadow(0 0 10px #00bae4);
  }

  .labbody {
    margin: -70px -65px -65px -75px;
    outline: 2px white dashed;
    outline-offset: 5px;
    border: solid 2px white;
    background-color: #000000d2;
    height: 100%;
    color: white;
    padding: 20px;
    position: relative;
  }

  .labmain2 {
    transform: translate(40%, 10%);
    outline-offset: 30px !important;
  }

  .labmain2 span {
      color: dodgerblue;
      font-family: 'Grenze Gotisch';
      letter-spacing: 0px;
    }

  .labmain3 {
    transform: translate(-50%, -110%);
    outline-offset: 30px !important;
    padding: 0% 0% 46% 0% !important;
    position: relative; 
    z-index: 99;
  }

  .labmain {
    outline: 2px white dashed;
    outline-offset: 10px;
    border: solid 2px white;
    background-color: #141924;
    background-image: url(/img/halloween/spiderwebflipedit.gif);
    background-position: top right;
    background-repeat: no-repeat;
    height: 100%;
    color: white;
    padding: 20px;
    margin-bottom: 30px;
    position: relative;
    z-index: 9;
  }

  #cd {
    width: 150%;
    position: absolute;
    top: 5%;
    left: -30%;
    z-index: -1;
    -webkit-animation:spin 5s linear infinite;
    -moz-animation:spin 5s linear infinite;
    animation:spin 5s linear infinite;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused; 
    animation-play-state: paused;
  }

  #switch {
    cursor: pointer;
    -webkit-filter: drop-shadow(0 0 5px black);
    filter: drop-shadow(0 0 5px black);
    position: relative;
    margin-left: 50px;
    margin-top: 40%;
    z-index: 99;
  }

  @-moz-keyframes spin { 
      100% { -moz-transform: rotate(360deg); } 
  }
  @-webkit-keyframes spin { 
      100% { -webkit-transform: rotate(360deg); } 
  }
  @keyframes spin { 
      100% { 
          -webkit-transform: rotate(360deg); 
          transform:rotate(360deg); 
      } 
  }

  .movieswrapper {
    position: absolute;
    width: 63%;
    margin-left: -34%;
    text-align: right;
  }

  .movieswrapper3 {
    transform: translate(122%, 0%);
  }

  .movieswrapper2 {
    width: 180%;
    margin: 20px 0 20px 0;
    transform: translate(-22%, 0%);
  }

  .movieswrapper4 {
    width: 155%;
    margin: 20px 0 20px 0;
    transform: translate(-27%, 0%);
  }
/*
  .lit {
    position:relative;
    z-index:99;
    padding-right:
  }

  .initial {
    position: absolute;
    right: 0;
    margin-top: 20px;
    opacity: 0.5;
    top: 0;
  }
*/
  .initial a {
    display: initial !important;
    width: 50%;
  }

  .labmovies {
    outline: dashed 2px lawngreen;
    outline-offset: 5px;
    border: solid 2px lawngreen;
    margin: 10px;
    width: 40%;
    background-color: #000000d2;
    color: white;
    -webkit-filter: drop-shadow(0 0 20px #62c003c3);
    filter: drop-shadow(0 0 20px #62c003c3);
    position: relative;
    z-index: 99 !important;
  }

  .small {
    width: 15%;
    border: 1px orangered solid;
    margin: 7px;
  }

  .smaller{
    width: 15%;
  }

  .labmovietitle {
      position: absolute;
      font-size:40px;
      left:-40%;
      width: 150%;
      margin-bottom:-20px;
      margin-top: -20px;
      color:white;
      filter: drop-shadow(1px 1px 0 black) 
        drop-shadow(-1px 1px 0 black)
        drop-shadow(1px -1px 0 black)
        drop-shadow(-1px -1px 0 black);
    }


#s-m-t-tooltip {
    /* basic */
    max-width:200px;
    text-align: center;
    z-index:10;
    margin:-54px 14px 7px 12px;
    /* style and design */
    padding: 8px;
    border: 1px solid orangered;
    background:black; /* fallback if rgba not supported */
    /* font */
    font-family: 'Grenze Gotisch';
    font-size:18px;
    line-height:16px;
    color: white;
  }

/* music player container START */
/* please note, depending on your line spacing and font-size, you may need to adjust things slightly, but this will get the player styled in a basic way */
/* you're free to adjust anything!! if you do something really cool with it, please let me know!! i would love to see */

.player {
    width: 100%; /* player container size, change it to whatever works for you but i don't recommend it being too short */
    color: white;
    margin-bottom: 10px;
    display: flex;
  }
        
  .playerinner {
    border: none; /* player container text area, i recommend no border */
    width: 100%; /* player container text area width, make sure it's not as wide as the main container so the playbutton can work */
    background-color: transparent; /* player container text area background, you can play with this if you wish */
    overflow: hidden;
  }
        
  .playerbutton {
    float: right; /* makes the play button float right */
    margin-top: 3px; /* additional margin */
  }
        
  .ico {
    color: white; /* play/pause button colour */
  }
        
  .marquee {
   display: flex;
   overflow-x: scroll;
   margin: 2px;
  }
  
  .marqueecont {
   animation: marquee 7s 0s linear normal infinite; /* control the speed of your marquee here if needed */
   position: relative;
   display: inline-block; 
  }
  
  @keyframes marquee {
   0% {
      right: 20rem;
      transform: translate(100%, 0%);
   }
   100% {
      right: calc(100% + 7rem);
      transform: translate(0%, 0%);
   }
  }
  /* music player container FINISH */

    @media only screen and (max-width: 1000px) {
      .lcontainer, .kflex {
      flex-direction: column;
      }

      .mediacont, .viddygames, .column, .kside, .greatpumpkin, .kcenter, .kright, .kleft, .guestbook, .half, .kgbook, .neighbors {
        width: 100% !important;
      }
      .column {
        height: auto;
      }

      .column img {
        width: 30%;
      }

      .hide {
        display: none;
      }
    }








    


    /* KITCHEN */

    .kitchen {
      background-image: url(/img/halloween/monsterhigh.png);
      background-size: 300px;
      padding: 30px;
      image-rendering: pixelated;
    }

    hr {
      border-top: 2px dashed orangered;
      border-bottom: none;
      margin: 15px;
    }

    .kwrapper {
      position: relative;
      width: 90%;
      margin: auto;
      background-image: url(/img/halloween/4.png);
      background-size: 150px;
      padding: 30px;
      border: 2px white solid;
      outline: 2px white dashed;
      outline-offset: 20px;
    }

    .kflex {
      max-width: 1300px;
      margin: auto;
    }

    .kmain {
      border: solid 2px orangered;
      background-color: #fefaf8f4;
      color: black;
      padding: 20px;
      height: inherit;
      margin: 20px;
      outline: 2px orangered dashed;
      outline-offset: 25px;
    }

    .trickortreat {
      width: 80%;
      outline: 2px orchid dashed;
      outline-offset: 7px;
      padding: 15px;
      text-align: center;
    }

    .ttfoyer {
      outline: 2px #4f3161 dashed;
    }

    .right {
      margin: auto 0 auto auto;
    }

    .full {
      width: 90% !important;
      margin: auto;
    }

    .kgbook {
      position: relative;
      top: -4%;
      width: 115%;
      z-index: 1 !important;
    }

    .neighbors {
      width: 70%;
      margin: 50px 0px auto auto;
    }

    .half {
      width: 50%;
    }

    .inlineimg {
      float: right;
      position: relative;
      width: 50%;
      top: -30px;
      z-index: 2;
    }

    .apples {
      margin-top: -30%;
      position: relative;
      z-index: 99;
    }

    .apples img {
      width: 16%;
    }

    .pumpkins {
      margin-top: -15%;
      position: relative;
      z-index: 99;
      width: 100%
    }

    .pumpkins img {
      width: 15%;
    }

    .guestbook {
      border: solid 2px orangered;
      outline: 2px orangered dashed;
      outline-offset: 25px;
      background-color: #fefaf8f4;
      color: black;
      padding: 20px;
      margin: 30px 0 0 auto;
      width: 50%;
      height: 780px;
      overflow: auto;
    }

    .kside {
      width: 25%;
      position: relative;
      z-index: 2;
      margin: 120px 20px 20px 20px;
      height: 100%;
    }

    .kcenter {
      width: 75%;
    }

    .kimg {
      max-width: 200px;
    }

    .kimg img {
      width: 100%;
    }

    .stamps {
      margin-top: 50px;
      text-align: center;
    }

    .stamps img {
      outline: 5px solid #00000078;
    }


  .mybuttoncopy {
    color: orangered;
    border: 2px orange double;
    height: 50px;
    width: 130px;
    margin-left: 20px;
  }

  #c_widget {
      width: 100% !important;
      height: auto !important;
      font-family: 'Grenze Gotisch' !important;
      color: black !important;
  }

  #c_widget button, #c_widget input[type=submit] {
      font-family: 'Grenze Gotisch' !important;
      color: orange !important;
      border: 1px solid orangered !important;
  }
  #c_widget button:hover, #c_widget input[type=submit]:hover {
      border: 1px solid mediumorchid !important;
  }
  #c_widget button:disabled, #c_widget input[type=submit]:disabled {opacity: 60%;}
  #c_widget button:disabled:hover, #c_widget input[type=submit]:disabled:hover {
      color: orange !important;
      border: 1px solid orange !important;
  }

  /* Input section */
#c_inputDiv {
    margin-top: -10px !important;
}

.c-input {
    margin-bottom: 5px; 
}

#c_replyingText {
    color: black !important;
}

/* Comment section */
.c-comment {
    border: 1px solid mediumorchid !important;
    background-color: white !important; 
    font-family: 'Grenze Gotisch' !important;
}
.c-reply {
    border: 1px solid mediumorchid !important;
    background-color: white !important; 
    font-family: 'Grenze Gotisch' !important;
}
.c-replyContainer {
    background-color: white !important;
}

.c-timestamp {
  font-family: 'Grenze Gotisch' !important;
}

.c-name {
    font-family: 'Grenze Gotisch' !important;
    text-decoration: none !important;
}

.c-site {
    font-family: 'Grenze Gotisch' !important;
}

.c-site:hover {
  color: orange !important;
}

.c-text {
    font-family: 'Grenze Gotisch' !important;
    color: black !important;
    background-color: white !important;
    font-size: 18px !important;
    word-wrap: break-word !important;
}








    


  /* CRYPT */

  .crypt {
    background-image: url(/img/halloween/19.jpg);
    image-rendering: pixelated;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cryptbody {
    margin: auto;
    background-image: url("/img/halloween/crypt.gif");
    background-position: fixed;
    background-size: cover;
    height: inherit;
    min-height: inherit;
    height: 35vw;
    width: 61.5vw;
  }

  .icecream {
    background-color: #3e595c;
    width: 18.5vw;
    height: 16vw;
    position: relative;
    top: 9.5vw;
    left: 16vw;
    overflow: auto;
    color: white;
    padding: 5px;
    font-size: 12px !important;
  }

  .halloweenbar2 {
    position: absolute;
    height: 4vw;
    width: 100%;
    text-align: center;
    bottom: -60px;
    z-index: 9;
    left: 0px;
  }








    


  /* CREDITS */

  .credits {
    background-image: url(/img/halloween/halloween3.jpg);
    background-size: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .credits h1, .credits h2 {
    font-family: 'Groovy Ghosts';
    letter-spacing: 3px;
  }

  .credits h1 {
    font-size: 55px;
  }

  .credits h4 {
    margin: 0px;
  }

  .creditsmain {
    background-color: #ffffffb5;
    border: solid orangered 3px;
    outline: 3px dashed black;
    border-radius: 100px 0px 100px 0px;
    outline-offset: 30px;
    width: 50%;
    height: 80%;
    margin: auto;
    padding: 30px;
    overflow: auto;
  }