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

body, html, style {
  height: 97%;
  background: #4d0000;
  font-size: 20px;
  text-align: center;
}

body {
    margin-bottom: 20px;
    background-image: url('bg-room-2185942_960_720.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 6px groove tomato;
    border-radius: 0.25%;
}

main {
  padding-top: 5px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 60px;
}

footer {
  padding-top: 5px;
  margin-right: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5%;
  background-color: rgba(26,0,0,0.8);
}

footer p {
  color: black;
  font-size: 10px;
  font-weight: bold;
}

footer a {
  font-size: 15px;
  text-align: center;
}


 /*  background {
     background-image: url('bg-room-2133173_960_720.png');
     background-position: center;
     background-size: 100%;
     background-repeat: no-repeat;
     padding: 40px;
     border: 3px solid tomato;
     /* Add the blur effect */
  /*   filter: blur(3px);
     -webkit-filter: blur(2x);
      /* Full height */
/*      height: 100%; 
     } 
     */


/* GENERAL */

    p {
          font-family: verdana;
          color: maroon;
      }

    a {
          background-color: green;
          font-variant: small-caps;
          text-decoration: underline overline; 
      }
      
    h1 {
          color: #006767;
          font-variant: small-caps;
          font-family: Imprint MT Shadow, Old English Text MT, baskerville old face;
          background-color: rgba(26,0,0,0.8);
          padding: 10px;
          border: 20px;
          margin: 10px;
      }
       
    h2 {
          color: navy;
          font-weight: bold;
          background-color: #555555;
          padding: 20px;
          border: 30px;
          margin: 40px;
          float: left;
      }
    
    img {
         /* border-style: groove;
          border-width: 3px;
          border-left-width: 10px;
          border-right-width: 10px;
          border-color: #116611; */
          -webkit-filter: drop-shadow(3px 2px 1px black)
          drop-shadow(-2px -2px -1px black);
          filter: drop-shadow(2px 2px 1px black) 
          drop-shadow(-2px -2px 1px black);
      }

      
    ol, ul, dl {
          color: maroon;
          text-align: left;
      }
  
    bdo {
          font-variant: small-caps;
          font-family: old english text mt;
    }


/* LIGHTSWITCH */

.button {
    left: 50%;
    top: 50%;
}
  
#dirt {
         position: fixed;
         left: 65%;
         bottom: 5%;
      }
      
#seating {
         position: fixed;
         left: 13%;
         bottom: 8%;
}


/* Popup box BEGIN */
.hover_bkgr_fricc{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    left: 0;
    width: 100%;
    margin: auto;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width: auto;
}
/* CONTENT BOX  */
.hover_bkgr_fricc > div {
    background-color: #A26969;
    box-shadow: 10px 10px 60px #5E1A1A;
    display: inline-block;
    height: auto;
  /*  max-width: 551px; */
    max-width: fit-content;
    min-width: 400px;
    min-height: 100px;
    vertical-align: middle;
    width: 60%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    font-size: 20px;
    margin: 20px;
    display: inline-block;
    font-weight: bold;
}
/* Popup box END */






/* GAMES */

      #games {
          background-color: #ccc;
          padding: 1em
      }
      
      #games h1 {
          color: #ff0;
      }
      
      #games p {
          color: red;
          font-weight: bold;
      }