/* body */

    html,
    body {
    width: 100%;
    height: 100%;
    margin: 0;
    }

    body {
    background: #191919; 
    background-image: url("/images/shrine/mr-shrine-bg1.webp");
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-image 3s ease;

    font-family: "IBM Plex Mono", monospace;
    color: #f5f3f0;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 1px;
    text-align: left;
    }
    
    .background-fade {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("/images/shrine/mr-shrine-bg2.webp") center / cover no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 3s ease;
    }

   .background-fade.show {
    opacity: 1;
    }

   .mobile-message {
   display: none;
   }

   .desktop-content {
   display: block;
   }
    
/* global typography */

    .astloch {
    font-family: "Astloch";
    }
    
    
/* intro */   
    
   .shrine-intro {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
    }

   .shrine-box {
   position: relative;
   width: 500px; 
   cursor: pointer;
   }
   
   .shrine-box:not(.shrine-final) {
    cursor: pointer;
    }

   .shrine-box img {
   display: block;
   width: 100%;
   height: auto;
   }

   #shrine-text {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

   width: 75%;

   font-family: "Astloch", cursive;
   font-size: 30px;
   line-height: 1;
   color: #f3f5f0;
   text-align: center;
   }
   
   .shrine-box.initial-appear {
   animation: appear 3s ease forwards;
   }

   @keyframes appear {
   from {
   opacity: 0;
   }

   to {
   opacity: 1;
   }
   }

   @keyframes pulse {
   0% {
   opacity: 1;
   }

   50% {
   opacity: 0;
   }

   100% {
   opacity: 1;
   }
   }

   .shrine-box.pulse {
   animation: pulse 3s ease;
   }

     
/* patrons */
   
   .shrine-patron {
   width: 260px;
   opacity: 0;
   transition: opacity 3s ease;
   cursor: pointer;
   }

  .shrine-patron img {
   display: block;
   width: 100%;
   height: auto;
   }
  
/* the shrine */ 

   .shrine-main {
   width: 900px;
   animation: appear 3s ease forwards;
   }

   .shrine-main img {
   display: block;
   width: 100%;
   height: auto;
   }
  
   .shrine-final {
   width: 700px;
   }

   .shrine-surroundings {
   position: relative;
   width: 700px;
   min-height: 700px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: default;
   }

   .shrine-final-image {
   width: 350px;
   height: auto;
   position: relative;
   z-index: 1;
   cursor: default;
   }

/* candles */

   .candle {
   position: absolute;
   z-index: 3;
   width: 250px;
   cursor: pointer;
   }

   .candle img {
   display: block;
   width: 250px;
   }

   .candle img + img {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   transition: opacity 0.8s ease;
   }

   .candle-left {
   left: -200px;
   }

   .candle-right {
   right: -200px;
   }

/* boxes */

   .shrine-boxes-note,
   .shrine-boxes-button {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   }

   .shrine-box-item {
   position: absolute;
   width: 150px;
   height: 150px;
   cursor: pointer;
   }

   .shrine-box-item img {
   display: block;
   width: 100%;
   height: auto;
   }

   .shrine-box-item span {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   box-sizing: border-box;

   font-family: "IBM Plex Mono", monospace;
   font-style: italic;
   color: #191919;
   text-align: center;
   font-size: 10px;
   line-height: 1;
   }
   
   .shrine-boxes-note {
   z-index: 2;
   }
   
   .shrine-boxes-button {
   z-index: 4;
   }
   
   .box-1 {
   left: -235px;
   top: 65%;
   transform: translateY(-50%);
   }

   .box-2 {
   right: -235px;
   top: 65%;
   transform: translateY(-50%);
   }
   
   .box-3 {
   z-index: 4;
   left: 30px;
   top: 10%;
   transform: translateY(-50%);
   }

   .box-4 {
   z-index: 4;
   right: 30px;
   top: 10%;
   transform: translateY(-50%);
   }

   .box-5 {
   z-index: 4;
   left: 30px;
   bottom: 0%;
   }

   .box-6 {
   z-index: 4;
   right: 30px;
   bottom: 0%;
   }
   
/* messages */
   
   .message-overlay {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 100;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   }

   .message-overlay.show {
   display: flex;
   }

   .message-box {
   position: relative;
   width: 600px;
   filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.6));
   }

   .message-box img {
   display: block;
   width: 100%;
   height: auto;
   }

   #message-text {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;

   display: flex;
   align-items: center;
   justify-content: center;

   padding: 50px 120px;
   box-sizing: border-box;

   font-family: "IBM Plex Mono", monospace;
   font-style: italic;
   font-size: 12px;
   line-height: 1.3;
   text-align: center;
   color: #f3f5f0;
   }
   
/* ask the angels */
   
   .angel-overlay {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 100;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   }

   .angel-overlay.show {
   display: flex;
   }

   .angel-overlay img {
   display: block;
   width: 250px;
   height: auto;
   filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.6));
   }
   
/* offerings */

   .guestbook-overlay {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 100;
   background: rgba(25, 25, 25, 0.8);
   align-items: center;
   justify-content: center;
   cursor: pointer;
   }

   .guestbook-overlay.show {
   display: flex;
   }

   .guestbook-window {
   position: relative;
   width: 700px;
   height: 600px;
   background: #f3f5f0;
   border: 1px solid #f3f5f0;
   }

   .guestbook-window iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: none;
   }

   #guestbook-close {
   position: absolute;
   top: -35px;
   right: 0;
   width: 30px;
   height: 30px;
   border: 1px solid #f3f5f0;
   background: #191919;
   color: #f3f5f0;
   font-family: "IBM Plex Mono", monospace;
   font-size: 18px;
   cursor: pointer;
   }

/* go home */

   .go-home {
   position: fixed;
   top: 20px;
   left: 20px;
   z-index: 10;

   padding: 8px 12px;

   font-family: "IBM Plex Mono", monospace;
   font-size: 12px;
   color: #f3f5f0;
   background: #191919;

   border: 1px solid #f3f5f0;
   text-decoration: none;
   cursor: pointer;
   }

   .go-home:hover {
   background: #776044;
   color: #f3f5f0;
   }
   
   
   /* skip intro */    
 
   #skip-intro {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none; 
   box-sizing: border-box;

   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 100;

   padding: 8px 12px;

   font-family: "IBM Plex Mono", monospace;
   font-size: 12px;
   line-height: 1.8;

   color: #f3f5f0;
   background: #191919;
   border: 1px solid #f3f5f0;

   cursor: pointer;
   }

   #skip-intro:hover {
   background: #776044;
   }

/* !!!MOBILE!!! */

   @media (max-width: 700px) {
     
   .desktop-content {
   display: block;
   position: relative;
   z-index: 5;
   }

   .mobile-message {
   display: flex;
   width: 100%;
   min-height: 100vh;
   justify-content: center;
   align-items: center;
   background: transparent;
   }

   .mobile-box {
   position: relative;
   width: 85%;
   max-width: 400px;
   padding-top: 70px;
   box-sizing: border-box;
   }

   .mobile-box img {
   display: block;
   width: 100%;
   height: auto;
   }

   .mobile-text {
   position: absolute;
   top: 50%;
   left: 50%;
   padding-top: 50px;
   transform: translate(-50%, -50%);

   width: 80%;

   font-family: "Astloch", cursive;
   font-size: 20px;
   line-height: 1;
   color: #f3f5f0;
   text-align: center;
   }
  
   .go-home {
   display: block;
   position: fixed;
   top: 30px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 100;
   }

   
   .desktop-content {
   display: none;
   }
   }