:root {
    --main-font-color: black;
    --main-footer-bgcolor: #a5a7aa;
    --main-footer-color: white;
    --main-splashscreen-color: white;
    --main-max-width: 800px;
    --main-footer-height: 15svh;
    --main-infoheight: .85; /* (1 - main-footer-height) */
    --main-info-color: white;
    --main-hand-font-family: 'Dancing Script';

    --envelope-width: min(350px, 50svw);
    --envelope-height: calc(var(--envelope-width)*.8);

    --candle-background: #2d3d50;
    --candlewrapper-background: #ededed;
    --candle-flame: #ffad00;
    --candle-flame-shadow: #ffad00;
    --candle-wax: #ffffff;
    --candle-wax-shadow: #d8deed;
    --candle-wick: #ad87a9;
    --candle-stand: #1c233e;

    --circlewidth: 800px;
    --circleheight: var(--circlewidth);
    --dotsize: 34px;
    --largebeadsize: 52px;
  
}


/* General settings */
body {
    font-family: sans-serif;
    /* margin: auto; */
    padding: 0;
    max-width: var(--main-max-width);
    /*border: 1px solid #ccc; */
    margin: 0 auto;
    color: var(--main-font-color);
    overscroll-behavior: contain;
}



#cssportal-grid {
  /*
	display: grid;
	grid-template-rows: repeat(5, minmax(auto, 1fr));
	grid-template-columns: repeat(3, 1fr);
  justify-items: center;
	gap: 10px;
	width: 100%;
	height: 85svh;  
  align-items: start;
  */

    display: grid;
    /* grid-template-rows: repeat(5, minmax(auto, 1fr)); */
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    /*gap: 5px;*/
    width: 100%;
    height: 85svh;
    overflow-x: auto;
    align-content: stretch;
    align-items: center;


  
}
#header {
	grid-area: 1 / 1 / 2 / 4;

	/*background-color: rgba(166,57,103, 0.5);*/
  align-self: center;
  text-align: center;
  padding: 10px;
}


#footer {
    position: fixed;
    bottom: 0;
    height: var(--main-footer-height);
    text-align: center;
    /*background-color: #f1f1f1;*/
    padding: 0;
    max-width: 800px;
    width: 100%;
    margin: 0;
    border-radius: 0 0 35px 35px;
    background-color: var(--main-footer-bgcolor);
    color: var(--main-footer-color);

}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}

.flex-items:nth-child(1) {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(2) {
  display: block;
  flex-grow: 3;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(3) {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}


.fancyfont {
    font-family: var(--main-hand-font-family), serif;
    /*font-size: 10vmin;*/
    font-weight: bold;
    font-size: max(1.5svh, min(9vmin, 5svh));
}

.reg {
    font-size: .5em;
    position: fixed;
}

/* Buttons */
.btn {
  border: none;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  color: var(--main-font-color);
  font-size: 2svh;
}

.btn img {
  width: 60px;
  /*margin-bottom: 5px;*/

}

.btnfooter {
  background-color: transparent;
  color: var(--main-footer-color);
}

.startbutton img {
  width: 125px;
  margin: 5px;
}

/* Website buttons */
.hpcbutton > a, input[type="submit"], button[type="makebutton"] {
    box-shadow: 0px 10px 14px -7px #000000;
    background-color: var(--main-footer-bgcolor);
    border-radius: 8px;
    border: 1px solid #000000;
    display: inline-block;
    cursor: pointer;
    color: var(--main-footer-color);
    font-weight: bold;
    padding: 6px 15px;
    text-decoration: none;
    margin: 3px 0px 7px 0px;  
}

.hpcbutton:hover a {
	background-color: var(--main-footer-bgcolor);
}
.hpcbutton:active a {
	position:relative;
	top:1px;
}


.footerhealing {
    font-family: var(--main-hand-font-family), serif;
    font-size: 4.5vmin;
    font-size: clamp(.7rem, 4.5vmin, 1.5rem);
    font-weight: bolder;
}


.cnfooter {
    font-size: 6.5vmin;
    font-size: clamp(1rem, 6.5vmin, 1.75rem);
}

.splashscreenhealing {
    font-family: var(--main-hand-font-family), serif;
    font-size: 8vmin;
    font-weight: bolder;
    color: var(--main-splashscreen-color);
}


.copyright {
    position: absolute;
    float: left;
    bottom: 5px;
    right: 15%;
    font-size: 2.5vmin;
    font-weight: bolder;
  }


.splashscreen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; /* Ensure it's on top of other elements */
  width: 100vw; /* Take up the entire viewport width */
  max-width: 800px; /* Up to 800px wide */
  height: 100vh; /* Take up the entire viewport height */
  height: 100svh; /* Take up the entire smallest viewport height */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  background-color: var(--main-footer-bgcolor);
  opacity: 1;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 35px 35px 35px 35px; /* Bottom border radius */
  transition: transform 2.5s cubic-bezier(0.55, 0.09, 0.68, 0.53) 2s, opacity 4s ease-in-out 2s;
  /*transition: transform 2s ease-in-out, opacity 2s ease-in-out; /* Updated transition properties with 2s duration */

}

.companyinfo {
  z-index: -100;
  position: fixed;
  top: 0;
  background-color: black;
  max-width: 800px;
  width: 100vw;
  height: calc(100svh*(var(--main-infoheight)));
  opacity: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background-color: var(--main-info-color);
  gap: 10px;
  overflow: auto;

}

.cnlogo {
  max-width: calc(min(var(--main-max-width), 80svw) - 40px);
  max-height: 20svh;
}

.linkbutton {
    box-shadow: 0px 10px 14px -7px #000000;
    border: 2px solid black;
    padding: 5px;
    border-radius: 10px;
}

.showjsinfo {
  display: block;  
}

.hidejsinfo {
  display: none;  
}

.headerpadding {
  height: 5svh;
}


.takepicture {
  z-index: -100;
  position: fixed;
  top: 0;
  background-color: black;
  max-width: 800px;
  width: 100vw;
  height: calc(100svh*(var(--main-infoheight)));
  opacity: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background-color: var(--main-info-color);
  opacity: 0;
  overflow: auto;

}

/*
.camerasvg {
  width: 50px;
}

.candlesvg {
  width: 50px;
}
*/

#previewImage {
  /* sets this to what we think is going to be close - use jquery to resize max-height */ 
  max-height: 74svh;
  max-width: 95svw;
}

.cameraoptions {
  display: flex;
  /*flex-wrap: wrap;*/
  flex-direction: row;
  column-gap: 10px;
}

.send {
  z-index: 100;
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 1;
}

#sendletter  {
  top: 20px;
  right: 20px;
}

#sendletter img {
  width: 35px;
  margin: -5px;
}


/* CSS for Camera */

  .imagePreview {
    position: relative;
    display: grid;
  }

  #sticker {
    width: 0px; 
    position: absolute; 
    background-color: #ffffff; 
    /*padding: 10px;*/ 
    /*right: 0px;*/ 
    left: 0px;
    bottom: 0px;
    cursor:  pointer;
  }

  #camerainstuctions {
    text-align: center;
    padding: 20px;

  }

/* CSS for the envelope */

        .envelope-container {
          /*
          width: 160px;
          height: 180px;
          padding-top: 60px;
          */
          width: var(--envelope-width);
          height: calc(var(--envelope-height)*3/2);
          padding-top: calc(var(--envelope-height)*1/3);
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .envelope {
          position: relative;
          /*
          width: 160px;
          height: 120px;
          */
          width: var(--envelope-width);
          height: var(--envelope-height);
          background: #76777a8c;
          border-radius: 0 0 6px 6px;
          box-shadow: 0 0 10px #616265 inset;
          transition: opacity 5s ease-in-out; /* Added transition property for fade-out */
        }
        
        .envelope::before {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border: 0 solid transparent;
          /*border-width: 60px 80px;*/
          border-width: calc(var(--envelope-height)*1/2) calc(var(--envelope-width)*.5);
          border-bottom-color: #dae2fb;
          /*top: -100%;*/
          top: calc(var(--envelope-height)*-1);
          left: 0px;
          transition: transform 2s ease-in-out; /* Added transition property */
          transform-origin: center bottom; /* Adjusted transform-origin value */
        }

        
        .envelope:hover::before {
          /*transform: rotateX(180deg); /* Adjusted rotateX value */
        }
        

        /* Add this style to handle the hover effect after moving down */
        .envelope.envelope-hover::before {
            transition: transform 6s ease-in-out; /* Added transition property */
            transform: rotateX(180deg);
        }

        
        .envelope:hover {
          /*opacity: 0; /* Apply fade-out on hover */
        }
      
        .envelope::after {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border: 0 solid transparent;
          /*border-width: 60px 80px;*/
          border-width: calc(var(--envelope-height)*1/2) calc(var(--envelope-width)*.5);
          border-right-color: #e8eaf2;
          border-left-color: #e8eaf2;
          border-bottom-color: #d9deee;
          top: 0;
          border-radius: 0 0 6px 6px;
          transform: rotate(360deg);
        }


/* End of CSS for the envelope */


  .letterstoheaven {
    z-index: -100;
    position: fixed;
    top: 0;
    background-color: black;
    max-width: 800px;
    width: 100vw;
    height: calc(100svh*(var(--main-infoheight)));
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background-color: var(--main-info-color);
    opacity: 0;
    overflow: auto;
  
  }

  .letterinstructions {
    padding: 5svh 5svw 5svw 5svw;
  }

/* Start of CSS for the paper */


  .paper {

    font-family: 'Indie Flower', serif;
    position: relative;
    max-width: 750px;
    width: 95svw;
    height: calc(95svh*(var(--main-infoheight)));
    background: rgba(255,255,255,0.9);
    margin: -275px -225px;
    box-shadow: 0px 0px 5px 0px #888;
    transition: transform 4s ease-in-out ;
    z-index: 10;
    
  }
  .paper::before {
    content: '';
    position: absolute;
    left: 45px;
    height: 100%;
    width: 2px;
    background: rgba(255,0,0,0.4);
    
  }

  .paperlines {
    margin-top: 40px;
    height: calc(100% - 40px);
    width: 100%;
    background-image: repeating-linear-gradient(white 0px, white 24px, steelblue 25px);
  }
  .papertext {
    position: absolute;
    top: 65px;
    left: 55px;
    bottom: 10px;
    right: 10px;
    line-height: 25px;
    font-family: 'Indie Flower';
    overflow-x: auto;
    outline: none;
  }
  .paperholes {
    position: absolute;
    left: 10px;
    height: 25px;
    width: 25px;
    background: #f4f4f3;
    border-radius: 50%;
    box-shadow: inset 0px 0px 2px 0px #453c3c;
  }
  .paperhole-top {
    top: 10%;
  }
  .paperhole-middle {
    top: 50%;
  }
  .paperhole-bottom {
    bottom: 10%;
  }

/* End of CSS for the paper */


/* move the paper up and into the envelope */
  /* Add this style to handle z-index change when the paper is inside the envelope */
    .envelope.paper-inside::after {
        z-index: 100;
    }

  /* Add this style to handle z-index change when the paper is inside the envelope */
    .envelope-container.full {
        z-index: 100;
    }

  /* Add this style to handle the second part of the animation */
    .paper.move-down {
      transform: translate(0, -70%);
      transition: transform 1s ease-in-out;
  }




/* Letterinfo explain screen */
  .letterintro {
    z-index: -100;
    position: fixed;
    top: 0;
    background-color: black;
    max-width: 800px;
    width: 100vw;
    height: calc(100svh*(var(--main-infoheight)));
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--main-info-color);
    gap: 15px;
    overflow: auto;
  
  }

  .lettersent {
    z-index: -100;
    position: fixed;
    top: 0;
    background-color: black;
    max-width: 800px;
    width: 100vw;
    height: calc(100svh*(var(--main-infoheight)));
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--main-info-color);
    gap: 15px;
    overflow: auto;
  
  }


/* Candle */

  .lightacandle {
    z-index: -100;
    position: fixed;
    top: 0;
    background-color: black;
    max-width: 800px;
    width: 100vw;
    height: calc(100svh*(var(--main-infoheight)));
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--main-info-color);
    background-color: var(--candlewrapper-background);
    opacity: 0;
    overflow: auto;
  
  }

.dname {
  padding: 5px;
  font-family: var(--main-hand-font-family), serif;
  font-size: 8vmin;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  }

.ftext {
  padding: 5px;
  font-family: var(--main-hand-font-family), serif;
  font-size: 7vmin;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  display: none;
  }


.submitname {
  text-align: center;
  }

/* Start of CSS for the Candle */

  .candleheader {
    padding: 10px;
    font-family: var(--main-hand-font-family), serif;
    font-size: 8vmin;
  }


  .candlewrapper {
    padding: 20px;
    background: var(--candlewrapper-background);
  }
  
  .candle {
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  
  .candle-flame {
      width: 15px;
      height: 40px;
      background: var(--candle-flame);
      border-radius: 8px 8px 8px 8px / 20px 20px 8px 8px;
      box-shadow: 0px 0px 20px 0 var(--candle-flame-shadow);
      animation: flame-twirl 15s ease infinite, glow 2s ease infinite;
      opacity: 0;
  }
  
  .candle-wick {
      height: 10px;
      width: 3px;
      background: var(--candle-wick);
  }
  
  .candle-wax {
      width: 40px;
      max-height: 35svh;
      height: 120px;
      background: var(--candle-wax);
      border-radius: 6px;
      box-shadow: inset -15px 0px 0px -10px var(--candle-wax-shadow);
  }
  
  .candle-stand {
      width: 100px;
      height: 8px;
      background: var(--candle-stand);
      border-radius: 3px;
  }
  
  @keyframes flame-twirl {
      0%, 22%, 49%, 62%, 81%, 100% {
          border-radius: 2px 14px 8px 8px / 20px 20px 8px 8px;
      }
      14%, 32%, 56%, 70%, 89% {
          border-radius: 14px 2px 8px 8px / 20px 20px 8px 8px;
      }
  }
  
  @keyframes glow {
      0%, 30%, 60%, 80%, 100% {
          box-shadow: 0 0 20px 0 var(--candle-flame);
      }
      20%, 50%, 70% {
          box-shadow: 0 0 22px 0 var(--candle-flame);
      }
  }


  #shareCandle {
    opacity: 0;
    }

/* End of CSS for the Candle */


/* Grief Calculator */


/* calculatorintro explain screen */
  .calculatorintro {
    z-index: -100;
    position: fixed;
    top: 0;
    background-color: black;
    max-width: 800px;
    width: 100vw;
    height: calc(100svh*(var(--main-infoheight)));
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--main-info-color);
    gap: 15px;
    overflow: auto;
  }


  .calculatorinstructions {
    padding: 5svh 5svw 5svw 5svw;
  }


  .griefcalculator {
    z-index: -100;
    position: fixed;
    top: 0;
    background-color: black;
    max-width: 800px;
    width: 100svw;
    height: calc(100svh*(var(--main-infoheight)));
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--main-info-color);
    opacity: 0;
    overflow: auto;
  
  }

        .griefheader {
          padding: 5px;
          font-family: var(--main-hand-font-family), serif;
          font-size: 7.5vmin;
          text-align: center;
        }

        .griefinputdate {
          max-width: 75svw;
          width: 500px;
          display: flex;
          flex-direction: column;
          opacity: 0;
          z-index: -100;
        }

        .grieflabel {
            display: block;
            margin-bottom: 5px;
        }

        .griefinput {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;

        }

        .resultswrapper {
            align-self: center;
            text-align: center;
          }

        .griefbutton {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        .griefbuttongroup {
            align-self: flex-end; 
        }

        #griefresults {
            margin-top: 20px;
        }

        .griefp {
            margin: 0;
            margin-bottom: 10px;
        }

        .grieferror {
            color: red;
            font-weight: bold;
        }

        .griefcalculation-response {
            font-weight: bold;
            color: #1E90FF; /* Change color as needed */
            font-size: 1.2em; /* Change font size as needed */
        }




/* End of CSS for Grief Calculator */



/* Remembrance Board */

    #startboard {
      opacity: 0;
      visibility: hidden;
    }


    .boardsvg img {
      width: 35px;
    }


    /* Define an animation for the list items within the animated list */
    .boardanimated-list li {
      animation: addItemAnimation 1.5s ease;
    }
    
    /* Define the keyframes for the animation */
    @keyframes addItemAnimation {
      0% {
        transform: scale(1) translateY(-200%);
        background-color: initial;
      }
      50% {
        transform: scale(1.75) translateY(+50%);
        /* background-color: #ffcc00; /* Change the color as per your preference */
        background-color: #3d9fffcf;
      }
      100% {
        transform: scale(1) translateY(0%);
        background-color: initial;
      }
    }


  .boardinstructions {
    padding: 5svh 5svw 5svw 5svw;
  }

/* Remembrance Info explain screen */
/* boardintro explain screen */

    .boardintro {
      z-index: 100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      gap: 15px;
      overflow: auto;
    }    
    
    #board {
      /*
      display: flex;
      justify-content: center;
      */
      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100svw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      opacity: 0;
      overflow: auto;
    }


    #boardcontainer {
      display: flex;
      flex-direction: row;
      gap: 5px;
      max-width: 800px; /* Set max-width */
      width: 99vw; /* Set width as 90vw */
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
    }

    #boardleft-column {
      flex-shrink: 0; /* Ensure the left column doesn't shrink */
      overflow-y: auto; /* Add overflow-y for the left column */
    }

    #boardleft-list {
      list-style: none;
      padding: 0 5px 0 5px;
      display: flex;
      flex-direction: column;
      font-size: small;
      align-items: center;
      
    }

    #boardright-column {
      flex: 1;
      overflow-y: auto; /* Add overflow-y for the right column */
      border: 1px solid;
    }

    #boardright-list {
      /*
      list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
      */
      list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      /*top: 50px;*/
      position: relative;
      margin: 10px;
    }

    .boardword-magnet {
      display: block;
      margin-bottom: 3px;
      padding: 5px;
      border: 1px solid #ddd;
      cursor: pointer;
      user-select: none;
      background-color: #f4feff85;
      border-radius: 10px;
    }
    
     .boardgroupheader {
        text-align: center;
      }

      .boardtitle {
        display: flex;
        text-align: center;
        font-family: var(--main-hand-font-family), serif;
        font-size: 5vmin;
        flex-direction: column;
        margin-top: 25px;
      }



/* End of Remembrance Board */



/* Start of Hear a Blessing */


    .hearablessing {
      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      opacity: 0;
      overflow: auto;
      
      }

    .outer-container {
      max-width: 100%;
      height: calc(100svh*(var(--main-infoheight)));
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #player-container {
      width: 100%;
      max-width: 800px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    #player-box {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
      text-align: center;
    }

/* Remove default list styles and center the list */
    #player-box ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
    }


/* Optional: Add some spacing between list items */
    #player-box li {
      margin: 0 10px;
      /*background-color: var(--main-footer-bgcolor);*/
      border-radius: 20px;
      padding: 5px;
    }


    .mp3-player {
      margin-bottom: 20px;
      list-style-type: none;
      display: flex;
      align-items: center;
      flex-direction: column-reverse;
    }

    .mp3-player audio {
      /*margin-right: 10px;*/
    }

    .mp3-player .player-column {
      flex: 1;
    }

    .mp3-player .text-column {
      flex: 2;
    }

    .hearablessingfont{
      /*font-family: 'Tangerine', serif;*/
      /*font-size: 4vmin;*/
      /*font-weight: bold;*/
      text-align: center;
      padding: 10px;
      /*padding: 5px 0 5px 0;*/
    }

/* End of Hear a Blessing */



/* Start of Gratitude Reminder */

    .gratitudereminder {
      /*
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80svh;
      max-height: 80svh;
      max-width: 800px;
      margin: 0 auto;
      */

      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      opacity: 0;

      

      
    }

    .groutercontainer {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #grcontainer {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
    }

    #grcontainer img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    #randomButton {
      margin: 5px;
    }

    .loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
      }

/* End of Gratitude Reminder */


/* Start of the Buy Flowers */

    .buyflowers {
      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      gap: 15px;
      overflow: auto;
    
    }

    /* national flower logo */
    .nflogo {
      max-width: min(var(--main-max-width),80svw);
      max-height: 20svh;
    }

    .buyflowersheader {
      
      /*font-family: 'Tangerine';*/
      /*font-size: 4vmin;*/
    }

    .centertext {
      text-align: center;
      padding: 20px;
    }


/* End of the Buy Flowers */



/* Start of Find a Grave */

    .findagrave {
      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      gap: 15px;
      overflow: auto;
      text-align: center;
    
    }


/* END of Find a Grave */


/* Start of Beautiful Options */


    .beautifuloptions {
      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      /*gap: 15px;*/
      overflow: auto;
      justify-content: center;
    
    }

    .carousel-container {
      max-width: 800px;
      /*height: 80svh;*/
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
    
    .carousel {
      display: flex;
      transition: transform 0.5s ease;
      height: 100%;
    }
    
    .carousel-slide {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .carousel-slide img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    
    .video-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .video-container video {
      max-width: 100%;
      max-height: 100%;
    }
    
    .control {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 10px;
      background-color: rgba(127, 127, 127, 0.25);
      color: white;
      cursor: pointer;
      z-index: 100; /* Significantly higher z-index */
      /* Add for potential rendering layer fix (see below) */
      -webkit-transform: translateY(-50%) translateZ(0);  /* For iOS Safari */
      transform: translateY(-50%) translateZ(0);
      /* Prevent iOS tap highlight interfering */
      -webkit-tap-highlight-color: transparent;
    }
    
    .control.prev {
      left: 5px;
      height: 20svh;
      width: min(10svw,50px);
      border-radius: 20px;
      font-size: x-large;
    }
    
    .control.next {
      right: 5px;
      height: 20svh;
      width: min(10svw,50px);
      border-radius: 20px;
      font-size: x-large;
    }
    
    .carousel-container ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

/* End of Beautiful Options */


/* Start of Grief Support */


    .griefsupport {
      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      gap: 15px;
      overflow: auto;
      justify-content: center;
    
    }


    .gs-carousel-container {
      max-width: 800px;
      /*height: 80svh;*/
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
    
    .gs-carousel {
      display: flex;
      transition: transform 0.5s ease;
      height: 100%;
    }


    .gs-carousel-slide {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .gs-carousel-slide img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }


    .gs-video-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .gs-video-container video {
      max-width: 100%;
      max-height: 100%;
    }

    .gs-control {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 10px;
      background-color: rgba(127, 127, 127, 0.25);
      color: white;
      cursor: pointer;
      z-index: 100; /* Significantly higher z-index */
      /* Add for potential rendering layer fix (see below) */
      -webkit-transform: translateY(-50%) translateZ(0);  /* For iOS Safari */
      transform: translateY(-50%) translateZ(0);
      /* Prevent iOS tap highlight interfering */
      -webkit-tap-highlight-color: transparent;
    }
    
    .gs-control.prev {
      left: 5px;
      height: 20svh;
      width: min(10svw,50px);
      border-radius: 20px;
      font-size: x-large;
    }
    
    .gs-control.next {
      right: 5px;
      height: 20svh;
      width: min(10svw,50px);
      border-radius: 20px;
      font-size: x-large;
    }

    .gs-carousel-container ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

/* End of Grief Support */


/* Start of Events */

    .events {
      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      gap: 15px;
      overflow: auto;
      text-align: center;
    
    }


/* END of Events */




/* Start of Plan Ahead */

    .planahead {
      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      gap: 15px;
      overflow: auto;
      text-align: center;
    
    }


/* END of Plan Ahead */


/* Start of Rosary Beads */

    .rosarybeads {
      /*
      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100vw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: var(--main-info-color);
      gap: 15px;
      overflow: auto;
      text-align: center;
      */

      z-index: -100;
      position: fixed;
      top: 0;
      background-color: black;
      max-width: 800px;
      width: 100svw;
      height: calc(100svh*(var(--main-infoheight)));
      opacity: 0;
      display: flex;
      background-color: var(--main-info-color);
      gap: 15px;
      overflow: auto;
      text-align: center;
      justify-content: flex-start;
      flex-direction: column;
      align-items: stretch;
    
    }


    .circle-outline {
      /*
      width: var(--circlewidth);
      height: var(--circleheight);
      border-radius: 50%;
      border: 2px solid #ccc;
      position: relative;
      margin: 50px auto;
      box-sizing: border-box;
      
      transform: rotate(90deg);


      width: var(--circlewidth);
      height: var(--circleheight);
      transform: rotate(90deg) ;
      transform: scale(1, .75) rotateY(40deg) rotate(90deg);
      transform: scale(.75, 1) rotateY(15deg) rotate(90deg);
      
      transform: scale(.25) translate(calc(var(--circlewidth)/2), 0px);
      
      transform: translate(50%,50%) translateY(15degs);
      */
      transform: scale(.5) translateX(-25%);
      margin-top: 20px;
      /*background-color: aqua;*/
      

      /*
      var getwidth = $('#rosarybeads').width();
      getwidth;
      $('.circle-outline').css("transform", "scale(" + (1-((800-getwidth+50)/800)) + ") translateX(" + ((getwidth-800)/800)*100 + "%)");
      */
      
    }

    .dot {
      width: var(--dotsize);
      height: var(--dotsize);
      border-radius: 50%;
      background-color: #ccc;
      position: absolute;
      cursor: pointer;
      transform: translate(-50%, -50%);
    }

    
    .filled {
      background-color: #4CAF50;
    }

    .large-bead {
      width: var(--largebeadsize);
      height: var(--largebeadsize);
      border-radius: 50%;
      background-color: #ccc;
      position: absolute;
      cursor: pointer;
      transform: translate(-50%, -50%);
    }

    .large-bead.filled {
      background-color: #1961e3;
    }

    .big {
      width: calc(var(--largebeadsize) + 15px );
      height: calc(var(--largebeadsize) + 15px );
      }

    .big.filled {
      background-color: #fb2000;
      z-index: 1;
    }

    .cross.filled > .horizontal-bar ,
    .cross.filled > .vertical-bar {
      background-color: #1961e3;
    }

    #rosarybeadsinner {
      display: flex;
      justify-content: center;
      height: 85svh;
      overflow-y: auto;
    }

    #rosary {
      /*
      display: flex;
      justify-content: center;
      max-width: 800px;
      padding: 20px;
      overflow-y: auto;

      display: flex;
      max-width: 800px;
      /* padding: 20px; 
      overflow-y: auto;
      /* top: 50px; 
      position: relative;
      align-items: center;*/

          /* display: flex; */
    /* max-width: 800px; */
    /* padding: 20px; */
    /* overflow-y: auto; */
    /* display: flex; */
    /* max-width: 800px; */
    /* padding: 20px; */
    /* display: flex; */
    /* max-width: 800px; */
    /* padding: 20px; */
    /* overflow-y: auto; */
    /* display: flex; */
    /* max-width: 800px; */
    /* padding: 20px; */
    /* display: flex; */
    /* width: 800px; */
    /* padding: 20px; */
    /* overflow-y: auto; */
    /* display: flex; */
    /* max-width: 800px; */
    /* padding: 20px; */
    /* overflow-y: auto; */
    /* top: -40px; */
    /* position: relative; */
    }

    /* Style the container div */
    .cross {
      width: 100px;
      height: 150px;
      position: relative;
      /*border: 1px solid #000;*/
      /*transform: rotate(-90deg);*/
      background-color: transparent;
      cursor: pointer;

      left: calc(var(--circlewidth)/2 - 50px);
      top: calc(var(--circlewidth) + 310px);
    }


    /* Style the horizontal and vertical bars */
    .horizontal-bar {
      width: 100%;
      height: 25px; /* Adjust the height of the horizontal bar */
      position: absolute;
      top: 30%;
      transform: translateY(-50%);
      background-color: black; /* Color of the horizontal bar */
    }

    .vertical-bar {
      width: 25px; /* Adjust the width of the vertical bar */
      height: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: black; /* Color of the vertical bar */
    }

    #rosaryinstruction {
      /*
      text-align: center;
      position: fixed;
      top: 350px;
      */

      left: 50%;
      transform: translate(-50%);
      display: flex;
      text-align: center;
      position: absolute;
      top: 170px;
      font-size: 4vmin;
      justify-content: space-evenly;
      flex-direction: column;
      align-items: center;
    }

    #rosaryinstruction img {
      width: 75px;
    }

    #toplargeBead {
      left: calc(var(--circlewidth)/2);
      top: calc(var(--circlewidth) + 70px);
      }

    #topsmallBead {
      left: calc(var(--circlewidth)/2);
      top: calc(var(--circlewidth) + 120px);
      }

    #middlesmallBead {
      left: calc(var(--circlewidth)/2);
      top: calc(var(--circlewidth) + 160px);
      }

    #bottomsmallBead {
      left: calc(var(--circlewidth)/2);
      top: calc(var(--circlewidth) + 200px);
      }    

    #bottomlargeBead {
      left: calc(var(--circlewidth)/2);
      top: calc(var(--circlewidth) + 250px);
      }



/* END of Rosary Beads */


/* Share App Start */


.shareapp {
  z-index: -100;
  position: fixed;
  top: 0;
  background-color: black;
  max-width: 800px;
  width: 100vw;
  height: calc(100svh*(var(--main-infoheight)));
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--main-info-color);
  gap: 15px;
  overflow: auto;
  text-align: center;

}


/* End Share App */



/* PWA Start */

  .version {
    position: absolute;
    float: left;
    bottom: 5px;
    right: 15%;
    font-size: 2.5vmin;
    font-weight: bolder;
    color: var(--main-footer-color);
    font-size: 2.5vmin;
    font-weight: bolder;
  }

  #installPWA {
    background-color: #97b6c5;
    color: white;
    width: 200px;
    height: 30px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .sectionimg {
    width: 25px;
    vertical-align: bottom;
    margin: 3px 0px;
  }
  
  dialog#iosInstallDialog {
    padding: 20px;
    background: white;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 80%;
    font-family: sans-serif;
  }
  
  dialog#iosInstallDialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  dialog#iosInstallDialog h2 {
    margin-top: 0;
    color: #333;
  }
  
  dialog#iosInstallDialog ol {
    padding-left: 20px;
  }
  
  dialog#iosInstallDialog li {
    margin-top: 10px;
  }
  
  dialog#iosInstallDialog button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    margin: 10px auto 0;
    cursor: pointer;
    border-radius: 4px;
  }

/* End PWA */


/* Start Popover for Iphone/Chrome */

    #iphoneWarningPopover { 
      padding: 1em; 
      border: 1px solid #ccc; 
      background: #fff;
      justify-items: center;
      text-align: center;
    }

    #iphoneWarningPopover button { 
      cursor: pointer; 
    }

/* End Popover for Iphone/Chrome */