:root {
    --scale-value: 100vw;
    --rules-scale-vh: min(800px, 100vh);
    --rules-scale-vw: 100vw;
    --game-menu-scale: min(100vw, 400px); /* How this var is used is superior to the original method.
    I tried to use multiplication with calc the first time, but it would go awol, so used division
    which was more mathmatical work up front. Muliplication seems to be working now, so little math is
    needed to convert the initial assignment in vw to a flexible calc product. Example: calc(var(--game-menu-scale)*.054)
    here, the .054 was 5.4vw, the original value. By moving te decimal two spaces (dividing by 100) and removing
    the unit type, we have converted. Simple. Moreover, the variable is now using min() (I didn't know about 
    min(), max(), and clamp() until after I made the dynamic scaling model.) to set a dynamic but proportional 
    max for anything using the variable. We can now change the unit type of large groups of finely arranged items 
    while maintaining proportions. This is also all done with pure CSS.*/
    --status: none;
    /* /\ This was the easy way to hide the back buttons on the terms, privacy, & feedback pages because it was hard to find a 
    location to hook into the html when the pages was refreshed */
}

body {
    background-color: #152F4A;
    height: 100%;
    font-size: calc(var(--scale-value) / 27.8571397);
}

p {
    color:#ffffff;
}
.center {
    text-align: center;
    color:#000000;
    padding: min(40px, 5vw);
}

#scripzLanding{
    margin-top: 5px;
    margin-bottom: 10px;
}

#landingStatement{
    margin-top: 30px;
    margin-bottom: 30px;
}
#selectionStatement{
    font-size: min(16px, 3.5vw);
    margin-bottom: 2vh;
}

.difficulty-text{
    font-size: min(16px,5vw);
}

.landingBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    width: 150px;
    height: 45px;
    margin: 5px;
    border-radius: 50px;
    text-decoration: none;
    background-color: #F8AC04;
    color:#ffffff;
    border-color:#F8AC04;
    border: none;
    transition: all .15s;
    text-align: center;
}


.landingBtn2 {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    width: 150px;
    height: 45px;
    margin: 5px;
    border-radius: 50px;
    text-decoration: none;
    background-color:white;
    color:#F8AC04;
    border: none;
    transition: all .15s;
    text-align: center;

}

.typeBtn {
    margin: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    width: 150px;
    height: 45px;
    margin: 5px;
    border-radius: 50px;
    text-decoration: none;
    background-color: #067ea4;
    border-color: #067ea4;
    color:#ffffff;
    transition: all .15s;
    border: none;
    text-align: center;
    margin-bottom: 15px !important;
}

.hoverBtn:hover{
    color: #152F4A;
    background-color: #95e7ff;
    border-color: #95e7ff;
}

#selectionMenuDiv {
    display: none;
    background-color: transparent;
    padding: 5px;
    border-radius: 40px;
}
#menuDiv {
    margin: auto;
    background-color: transparent;
    padding: 12px;
    padding-top: 5px;
    border-radius: 30px;
    min-width: 300px;
}
.menuItems {
    color:#63bdd7;
    width: 100%;
    border: none;
    text-align: center;
    width: 50vw;
    max-width: 300px;
}
.checkBtns {
    background-color: white;
    width: 100%;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 7px;
    /*border-radius: 30px;*/
}
.checkBtns:hover {
    box-shadow: 0 0 2px 2px rgba(0,70,100,0.5);
}

.checkBtnsNew {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    /* background-image: linear-gradient(#F8AC04, #d27000); - ORANGE ICON */
    background-image: linear-gradient(#37a3c5,#04769a);
    width: min(175px,50vw);
    height: min(175px,50vw);
    /* margin-top: 3px; */
    padding: 7px;
    opacity: 0.92;
    transition: all .15s;
    border-radius: min(20px,7vw);
    /* border: min(3px,1.2vw) solid #fbf3e7; - TAN border to go with ORANGE */
    border: min(3px,1.2vw) solid white;
    box-shadow: inset 0 0 calc(var(--rules-scale-vh) / 150) white;
    filter: drop-shadow(0 calc(var(--game-menu-scale)*.015) calc(var(--game-menu-scale)*.005) rgba(42, 68, 101, 0.8));
}
.checkBtnsNew:hover {
    box-shadow: 0 0 10px 1px rgba(23, 62, 134, 0.378), inset 0 0 calc(var(--rules-scale-vh) / 150) white;
    /* opacity: 1; */
    width: min(180px,53vw);
    height: min(180px,53vw);
    /* border: 5px solid white; */
}

.checkBtnsNewFocused {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    background-image: linear-gradient(#37a3c5,#04769a);
    width: min(175px,50vw);
    height: min(175px,50vw);
    margin-top: 3px;
    margin-bottom: 20px;
    padding: 7px;
    opacity: 0.6;
    transition: all .15s;
    box-shadow: 0 0 10px 1px rgba(0,0,10,0.5);
    opacity: 1;
}
.checkBtnsNewFocused:hover {
    /* border: 4px solid white; */
    width: min(180px,53vw);
    height: min(180px,53vw);
}

.enlargeTitle {
    font-size: min(22px,7vw);
    color: #152f4a;
    transition: all .15s;
    font-weight: bolder;
    margin: 0;
}
/* .checkBtnsNew:hover .enlargeTitle{
    font-size: 24px;
} */

#playPosition {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top: 4vh;
}

.playPulse {
    position: absolute;
    color: #fdd8b8;
    background-color: transparent;
    border: none;
    text-shadow: 0 3px 2px rgba(0,5,20,0.5);
    animation: playPulse 0.5s alternate-reverse infinite;
    transition: all .15s;
}
.playPulse:hover {
    color: #F8AC04;
}
button {
    /*border: none !important;*/
    outline: none !important;
}
@keyframes playPulse{
    0% {
        font-size: calc(var(--rules-scale-vh) / 25);
    }
    100% {
        font-size: calc(var(--rules-scale-vh) / 20);
    }
}
.disableIcon {
    pointer-events: none;
}

/* Not used
    #pressStart{
      font-size: min(20px, 5vw);
      font-weight: bold;
      color:white;
      margin-top: 1.5vh;
      margin-bottom: 1.5vh;
      animation: pressStart 0.5s alternate-reverse infinite;
    }
    @keyframes pressStart {
      0% {color: white;}
      100% {color: #fdd8b8;}
    }
*/

#funWay{
    font-size: min(20px, 5vw);
    font-weight: bold;
    color:white;
    margin-top: 1vh;
    margin-bottom: 1.8vh;
    animation: funWay 0.8s alternate-reverse infinite;
}
@keyframes funWay {
    0% {color: white;}
    100% {color: #fdd8b8;}
}

input[type="checkbox"] {
    accent-color: #f6a905;
    width: calc(var(--rules-scale-vh) / 45.45);
    height: calc(var(--rules-scale-vh) / 45.45);
}
#notAgain{
    accent-color: #f6a905;
    width: calc(var(--rules-scale-vh) / 45.45);
    height: calc(var(--rules-scale-vh) / 45.45);
    margin: calc(var(--rules-scale-vh) / 100);
}

#linkContainerCenter{
    display: flex;
    justify-content: center;
}

#linkContainer {
    display: grid;
    grid-template-columns: auto;
    margin: auto;
}

#betaEntry {
    position: fixed;
    z-index: 99998;       /* JTL Merged in this concept from BS 5 - https://github.com/twbs/bootstrap/pull/35153/commits/ec49c84c4dc6e39c3a4176515476578eb808c783 */
    top:0;
    bottom: 0;
    width: 100%;
    padding-top: calc(var(--scale-value) / 40);
    padding-bottom: calc(var(--scale-value) / 40);
    padding-right: calc(var(--scale-value) / 24.3750006);
    padding-left: calc(var(--scale-value) / 24.3750006);
    overflow-y: auto;
    background-color: #152F4A;
}

#contentContainer {
    display:flex;
    align-items:center;
    text-align: center;
    flex-direction: column;
    margin-top: 5vh;
}

.submitBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    width: 100px;
    height: 45px;
    margin: 5px;
    border-radius: 7px;
    text-decoration: none;
    background-color: #F8AC04;
    color:#ffffff;
    border-color:#F8AC04;
    border: none;
    transition: all .15s;
    text-align: center;
    font-size: 16px;
}
.submitBtn:hover {
    background-color: #63bdd7;
}

.cancelBtn:hover {
    background-color: #c01a39;
}

.cancelBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    width: 100px;
    height: 45px;
    margin: 5px;
    border-radius: 7px;
    text-decoration: none;
    background-color: #c01a39;
    color:#ffffff;
    border-color: #c01a39;
    border: none;
    transition: all .15s;
    text-align: center;
    font-size: 16px;
}

#logo {
    max-width: 700px;
}

#hideRerouteFlash {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    background-color: #152f4a;
    z-index: 99999;
    animation: showIndex 600ms forwards;
}
@keyframes showIndex {
    0% {opacity:1}
    60%{opacity:1}
    100%{opacity:0}
}

#fixRulesToPage {
    display: none;
    position: fixed;
    z-index: 9999;       /* JTL Merged in this concept from BS 5 - https://github.com/twbs/bootstrap/pull/35153/commits/ec49c84c4dc6e39c3a4176515476578eb808c783 */
    top:0;
    bottom: 0;
    width: 100%;
    padding-top: calc(var(--scale-value) / 40);
    padding-bottom: calc(var(--scale-value) / 40);
    padding-right: calc(var(--scale-value) / 24.3750006);
    padding-left: calc(var(--scale-value) / 24.3750006);
    overflow-y: auto;
    /* background-color: #152F4A; */
    background-image:linear-gradient(#152F4A80, #02112280);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#fixRulesToPage.sidebar-rules{
    transition: 0.35s ease translate 0s;
    translate: 100% 0;
    will-change: transform;
}

#fixRulesToPage.sidebar-rules.open {
    translate: 0 0;
}

#rulesPage {
    margin: auto;
}
.largerModeText {
    display: inline;
    font-size: clamp(14px, 2vw, 16px);
}

.rules-text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-size: calc(var(--rules-scale-vh) / 52);
    margin: 0;
}

.rules-header {
    font-size: calc(var(--rules-scale-vh) / 45);
}

.modal-title {
    font-size: calc(100vh / 40);
    justify-content: left;
    height: calc(100vh / 16.666);
    margin-bottom: 0;
}

.modalTitleBar {
    height: calc(100vh / 16.666);
}

.rules-list {
    color: white;
    font-size: calc(var(--rules-scale-vh) / 52);
    width: calc(var(--rules-scale-vh) / 3.8416);
    margin-bottom: 0;
    padding: 0 0 0 calc(var(--rules-scale-vh) / 30);
}

.modal-close {
    font-size: calc(100vh / 45) !important;
    width: calc(100vh / 8.333);
    height: calc(100vh / 16.666);
    border-width: calc(100vh / 333.333) !important;
    padding: 0 !important;
}
.btn-outline-danger {
    color: #fffefe;
    border:none;
}

.btn-outline-danger:hover {
    color: #fffefe;
    border:none;
    background-color:transparent;
}

.deduct-info {
    padding: calc(var(--rules-scale-vh) / 50);
    width:25%;
}

.rules-header-break {
    color: white;
    opacity: 1;
    border-top: solid calc(var(--rules-scale-vh) / 400);
    margin: calc(var(--rules-scale-vh) / 200);
}
.rules-background-border {
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    background-image: linear-gradient(#3096b7, #007499);
    border-radius: calc(var(--rules-scale-vh) / 50);
    margin-top: calc(var(--rules-scale-vh) / 33.333);
    margin-bottom: calc(var(--rules-scale-vh) / 100);
    /* width: 93vw; */
    width: min(425px, 93vw); /* made vw */
    padding: calc(var(--rules-scale-vh) / 66.666) calc(var(--rules-scale-vh) / 66.666) calc(var(--rules-scale-vh) / 18) calc(var(--rules-scale-vh) / 66.666);
    filter: drop-shadow( 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.01) rgba(0,15,25,0.6));
}

.rules-background {
    background-color: #63bdd7;
    border-radius: calc(var(--rules-scale-vh) / 50);
    padding: calc(var(--rules-scale-vh) / 50);
    padding-top: calc(var(--rules-scale-vh) / 33.333);
    box-shadow: inset 0 0 calc(var(--rules-scale-vh) / 200) black;
    /*border: .3vh solid white;
    border: 1vh solid linear-gradient(#80d0dd, #6bb7ca);
    margin-top: 3vh;
    margin-bottom: 1vh;
    max-width: 800px;*/
    width: min(400px, 88vw);/* changed this from 90 and made max the same and vw */
    height: auto;
    /* max-width: min(400px, 88vw); */
    /* min now 575px */
}



.rules-bg-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rules-spacing {
    margin-bottom: calc(var(--rules-scale-vh) / 33.333);
}


/* ----- GAME MENU ----- */

.menuModal {
    position:fixed;
    left: 0;
    top: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    /* background-color: #152F4A;
    background-color: #152F4A80;  */
    background-image:linear-gradient(#152F4A80, #02112280);
    /* #000f1980 */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-y: scroll;
}
.menuBanner {
    /* not in use */
    width: 100vw;
    height: calc(var(--game-menu-scale)*1.7);
    padding: 1vw;
    margin-top: calc(var(--game-menu-scale)*0.2);
    /* background-color: rgb(255,255,255,0.3);  */
    /* border: var(--modal-border); */
    border-radius: 5px;
}

.close-games {
    position:absolute;
    right:0;
    top:0;
    border:none !important;
    outline: none !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: bold;
    font-size: clamp(14px, 2vh, 16px) !important;
    margin: calc(var(--game-menu-scale)*.02) calc(var(--game-menu-scale)*.03) 0 0 !important;
    z-index: 4;
}
@media (min-width: 768px) {

    .close-games {
        border: calc(var(--game-menu-scale)*.005) solid #dc3545 !important;
        margin: calc(var(--game-menu-scale)*.06) calc(var(--game-menu-scale)*.06) 0 0 !important;
    }

}
.games-title {
    margin:auto;
    padding: 0;
    padding-top: calc(var(--game-menu-scale)*.06);
    width: 100%;
    text-align: center;
    font-size: calc(var(--game-menu-scale)*.08);
    font-weight: bolder;
    text-shadow: 2px 2px 2.5px rgb(14, 31, 59);
    color: white !important;
}
.games-header{
    width: min(80%, 325px);
    margin:auto;
    color:white;
}
.gameTitleBG {
    margin: auto;
    margin-top: 3vh;
    /* margin-bottom: calc(var(--game-menu-scale)*-.135); */
    width: calc(var(--game-menu-scale)*.92);
    height: calc(var(--game-menu-scale)*.185);
    filter:drop-shadow( 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.01) rgba(0,15,25,0.6));
}
.game-edge-shadow-right {
    position: absolute;
    z-index: 1;
    width: calc(var(--game-menu-scale)*.1);
    height: calc(var(--game-menu-scale)*.75);
    background-image: linear-gradient(to right, #41729000 83.5%, #417290);
    transform: translate(calc(var(--game-menu-scale)*0.75545), calc(var(--game-menu-scale)*-0.8));
}
.game-edge-shadow-left {
    position: absolute;
    z-index: 1;
    width: calc(var(--game-menu-scale)*.1);
    height: calc(var(--game-menu-scale)*.75);
    background-image: linear-gradient(to left, #41729000 83.5%, #417290);
    transform: translate(calc(var(--game-menu-scale)*-0.001), calc(var(--game-menu-scale)*-0.8));
}
.shadow-blocker-left{
    position: absolute;
    width: calc(var(--game-menu-scale)*.0134);
    height: calc(var(--game-menu-scale)*0.75);
    background-color:  #63bdd7;
}
.shadow-blocker-right{
    position: absolute;
    width: calc(var(--game-menu-scale)*.0134);
    height: calc(var(--game-menu-scale)*0.75);
    background-color:  #63bdd7;
    transform: translateX(calc(var(--game-menu-scale)*0.841));
}


.loadingOverlay{
    position:fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color:#152F4A;
    z-index: -1;
    display: none;
}
.loadingIn{
    animation:loadIn 1s alternate;
}
@keyframes loadIn {
    0% {opacity: 0}
    40% {opacity: 1}
    100% {opacity: 1}
}

.selectionNofill, .selectionFirst,
.selectionLast, .selectionVowels,
.selectionChrist, .selectionGlory, 
.selectionHoly{ 
    opacity: 0;
}

.lock1, .lock2, .lock3,
.lock4, .lock5, .lock6,
.lock7 {
    display:none;
}

.animateSelection {
    animation: selectionAnimation 300ms forwards;
}

/*NOFILL*/
.animateSelection.waymakerTilenOfill {
    animation-delay: 50ms;
}
.animateSelection.waymakerTilenoFill {
    animation-delay: 100ms;
}
.animateSelection.waymakerTilenofIll {
    animation-delay: 150ms;
}
.animateSelection.waymakerTilenofiLl {
    animation-delay: 200ms;
}
.animateSelection.waymakerTilenofilL {
    animation-delay: 250ms;
}

/*FIRST*/
.animateSelection.waymakerTilefIrst {
    animation-delay: 50ms;
}
.animateSelection.waymakerTilefiRst {
    animation-delay: 100ms;
}
.animateSelection.waymakerTilefirSt {
    animation-delay: 150ms;
}
.animateSelection.waymakerTilefirsT {
    animation-delay: 200ms;
}

/*LAST*/
.animateSelection.waymakerTilelAst {
    animation-delay: 50ms;
}
.animateSelection.waymakerTilelaSt {
    animation-delay: 100ms;
}
.animateSelection.waymakerTilelasT {
    animation-delay: 150ms;
}

/*VOWELS*/
.animateSelection.waymakerTilevOwels {
    animation-delay: 50ms;
}
.animateSelection.waymakerTilevoWels {
    animation-delay: 100ms;
}
.animateSelection.waymakerTilevowEls {
    animation-delay: 150ms;
}
.animateSelection.waymakerTilevoweLs {
    animation-delay: 200ms;
}
.animateSelection.waymakerTilevowelS {
    animation-delay: 250ms;
}

/*CHRIST*/
.animateSelection.delivererTilecHrist {
    animation-delay: 50ms;
}
.animateSelection.delivererTilechRist {
    animation-delay: 100ms;
}
.animateSelection.delivererTilechrIst {
    animation-delay: 150ms;
}
.animateSelection.delivererTilechriSt {
    animation-delay: 200ms;
}
.animateSelection.delivererTilechrisT {
    animation-delay: 250ms;
}

/*GLORY*/
.animateSelection.delivererTilegLory {
    animation-delay: 50ms;
}
.animateSelection.delivererTileglOry {
    animation-delay: 100ms;
}
.animateSelection.delivererTilegloRy {
    animation-delay: 150ms;
}
.animateSelection.delivererTileglorY {
    animation-delay: 200ms;
}

/*HOLY*/
.animateSelection.delivererTilehOly {
    animation-delay: 50ms;
}
.animateSelection.delivererTilehoLy {
    animation-delay: 100ms;
}
.animateSelection.delivererTileholY {
    animation-delay: 150ms;
}

@keyframes selectionAnimation {
    0% {transform: translateY(0);}
    50% {transform: translateY(-2%);}
    100% {transform: translateY(0);}
}

.nofillPos{
    transform: translate(0,0);
}
.lastPos{
    transform: translate(0,17.9%);
}
.firstPos{
    transform: translate(0,35.9%);
}
.vowelsPos{
    transform: translate(0,53.9%);
}
.christPos{
    transform: translate(0,0);
}
.gloryPos{
    transform: translate(0,17.9%);
}
.holyPos{
    transform: translate(0,35.9%);
}

.menuTop{
    margin-top: min(calc(var(--game-menu-scale)*.28), 150px) !important;
    margin-bottom: 140px !important;
}
.gameMenuBackground{
    position: absolute;
    margin: auto;
    width: calc(var(--game-menu-scale)*1);
    height: calc(var(--game-menu-scale)*1.285);
    filter:drop-shadow( 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.01) rgba(0,15,25,0.6));
}
.gameMenuTabUnlimited{
    display: none;
}
.gameMenusCombined{
    z-index: 1;
    width: calc(var(--game-menu-scale)*1.25);
    height: calc(var(--game-menu-scale)*.85);
}

.activeTabText{
    position: absolute;
    text-align: center;
    font-size: calc(var(--game-menu-scale)*.054);
    text-shadow: 2px 2px 2.5px rgb(58, 120, 149);
}
.inactiveTabText{
    position: absolute;
    text-align: center;
    font-size: calc(var(--game-menu-scale)*.054);
    color:#96d6ed;
}
.todaysTextPos{
    transform: translate(calc(var(--game-menu-scale)*-.218), calc(var(--game-menu-scale)*-.54));
}
.unlimitedTextPos{
    transform: translate(calc(var(--game-menu-scale)*.218), calc(var(--game-menu-scale)*-.54));
}


.positionMenus{
    overflow-y: hidden;
    overflow-x: hidden;
    margin: auto;
    width: calc(var(--game-menu-scale)*.855);
   
    /* Hiding scrollbar for IE, Edge and Firefox */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
.positionMenus::-webkit-scrollbar {
    /* Hiding scrollbar for Chrome, Safari and Opera */
    display: none;
}
.scrollContent{
    display: grid;
    width: calc(var(--game-menu-scale)*.85);
    height: calc(var(--game-menu-scale)*.85);
    margin-left: calc(var(--game-menu-scale)*.12);
    margin-top: calc(var(--game-menu-scale)*-.05);
    transition: all 1s ease-out;
}

.scrollContent.positionRight{
    transform: translateX(calc(var(--game-menu-scale)*-.635));
}
.scrollContent.offScreen{
    transform: translateX(calc(var(--game-menu-scale)*1.2));
}

.arrowRight{
    position:absolute;
    z-index: 4;
    width: calc(var(--game-menu-scale)*.1);
    height: calc(var(--game-menu-scale)*.13);
    transform: translateX(calc(var(--game-menu-scale)*.365));
    margin-top: calc(var(--game-menu-scale)*-.05);
    background-image: url(../../assets/images/scripzGameArrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(calc(var(--game-menu-scale)*.01) 0 calc(var(--game-menu-scale)*.007) rgba(42, 68, 101, 0.8));
}

.arrowLeft{
    position:absolute;
    z-index: 4;
    width: calc(var(--game-menu-scale)*.1);
    height: calc(var(--game-menu-scale)*.13);
    transform: translateX(calc(var(--game-menu-scale)*.365));
    margin-top: calc(var(--game-menu-scale)*-.05);
    background-repeat: no-repeat;
    background-image: url(../../assets/images/scripzGameArrow.svg);
    background-size: contain;
    rotate: 180deg;
    filter: drop-shadow(calc(var(--game-menu-scale)*.01) 0 calc(var(--game-menu-scale)*.007) rgba(42, 68, 101, 0.8));
}

.arrowBounce{
    animation: arrowBounce 300ms forwards;
}
@keyframes arrowBounce {
    0%{scale: 1; transform: translateX(calc(var(--game-menu-scale)*.365));}
    50%{scale: 1.03; transform: translateX(calc(var(--game-menu-scale)*.365));}
    100%{scale: 1; transform: translateX(calc(var(--game-menu-scale)*.365));}
}

.arrowIn{
    animation: arrowIn 300ms forwards;
    opacity: 0;
}
@keyframes arrowIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.arrowOut{
    animation: arrowOut 300ms forwards;
    opacity: 1
}
@keyframes arrowOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.centerPlay{
    position:absolute;
    display:flex;
    justify-content:center;
    width: calc(var(--game-menu-scale)*.90);
    transform: translateY(calc(var(--game-menu-scale)*.34));
    z-index: 5;
}
.playGameBtn{
    position:absolute;
    font-size: calc(var(--game-menu-scale)*.05);
    color:white;
    text-align: center;
    width: calc(var(--game-menu-scale)*.26);
    height: calc(var(--game-menu-scale)*.11);
    background-image: linear-gradient(#edb42f, #c67e10);
    box-shadow: 0 2px 2px 1px #4e82bb, inset 0 0 8px 3px #8d4306;
    border-radius: min(12px,2vw);
    border:none;
    z-index: 4;
    padding: 0;
}

.playGameBtn.larger {
    width: calc(var(--game-menu-scale)*.7);
}



.waymakerPrefillText{
    z-index: 2;
    position:relative;
    font-size: calc(var(--game-menu-scale)*.054);
    color:#01a1c1;
    transform: translate(calc(var(--game-menu-scale)*.375),calc(var(--game-menu-scale)*-.734));
}
.delivererPrefillText{
    z-index: 2;
    position:relative;
    font-size: calc(var(--game-menu-scale)*.054);
    color:#01a1c1;
    transform: translate(calc(var(--game-menu-scale)),calc(var(--game-menu-scale)*-.7885));
}
/* .waymakerMenuTitle{
    transform: translate(7.8%,12%);

}
.delivererMenuTitle{
    transform: translate(60.75%,12%);
} */
.gameMenuTitles{
    z-index: 2;
    width: calc(var(--game-menu-scale)*1.25);
    height: calc(var(--game-menu-scale)*.85);
    margin-top: calc(var(--game-menu-scale)*-.85);
    pointer-events: none;
}



.form-back {
    position: absolute;
    -webkit-appearance: none;
    right:0;
    margin-right: 25px;
    width: clamp(60px,14vw,90px);
    height: clamp(35px,7vw,45px);
    font-size: clamp(14px,3vw,20px);
    color: black;
    background-color: transparent;
    border: solid 2px black;
    padding: 0;
    border-radius:5px;
    transition: all .15s;
}
.form-back:hover{
    color: white;
    background-color: black;
}

.form-style-container {
    background-color: white;
    padding: 25px;
    width: 100%;
    height: 100%;
}

.form-style-p {
    color: black;
    font-size: clamp(14px,100%,16px);
}

.form-style-title {
    margin: auto;
    color: black;
    margin-bottom: 10px;
    font-size: clamp(18px,150%,24px);
}

.form-style-spacing {
    margin-bottom: 16px;
}

.whiteBG{
    position:fixed;
    width:100vw;
    height:100vh;
    background-color:white;
    z-index: -1;
}

#feedback #formContainer {
    margin: auto;
    padding-top: min(9vh,60px);
    width: 100%;
}

#feedback  .formatForm {
    width: 100%;
    height: clamp(40px,7vh,60px);
    margin-bottom: min(2.5vh, 20px);
    padding-left: 10px;
}

#feedback  #userMessage {
    width: 100%;/* widths redundant now? */
    height: min(15vh, 160px);
    margin-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
}

#feedback  #textInfo {
    margin: auto;
    width: 350px;
}

#feedback  #contact {
    margin-bottom: 0px;
}

#feedback  #submitFormBtn {
    width: 90px;
    height: 40px;
    color:rgb(255, 255, 255);
    background-color: #40a2c1;
    border: none;
    border-radius: 5px;
    /* margin-bottom: 40px; */
}

#feedback .form-back{
    margin: min(2vh, 20px);
}

[class*="scripz-col-"] {
    width: 100%;
}


@media only screen and (max-width: 600px) {
    /* For tablets: */
    .scripz-col-xs-1 {width: 8.33%;}
    .scripz-col-xs-2 {width: 16.66%;}
    .scripz-col-xs-3 {width: 25%;}
    .scripz-col-xs-4 {width: 33.33%;}
    .scripz-col-xs-5 {width: 41.66%;}
    .scripz-col-xs-6 {width: 50%;}
    .scripz-col-xs-7 {width: 58.33%;}
    .scripz-col-xs-8 {width: 66.66%;}
    .scripz-col-xs-9 {width: 75%;}
    .scripz-col-xs-10 {width: 83.33%;}
    .scripz-col-xs-11 {width: 91.66%;}
    .scripz-col-xs-12 {width: 100%;}

    .scripz-col-xs-hidden {display:none;}
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .scripz-col-s-1 {width: 8.33%;}
    .scripz-col-s-2 {width: 16.66%;}
    .scripz-col-s-3 {width: 25%;}
    .scripz-col-s-4 {width: 33.33%;}
    .scripz-col-s-5 {width: 41.66%;}
    .scripz-col-s-6 {width: 50%;}
    .scripz-col-s-7 {width: 58.33%;}
    .scripz-col-s-8 {width: 66.66%;}
    .scripz-col-s-9 {width: 75%;}
    .scripz-col-s-10 {width: 83.33%;}
    .scripz-col-s-11 {width: 91.66%;}
    .scripz-col-s-12 {width: 100%;}

    .scripz-col-s-hidden { display:none;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .scripz-col-1 {width: 8.33%;}
    .scripz-col-2 {width: 16.66%;}
    .scripz-col-3 {width: 25%;}
    .scripz-col-4 {width: 33.33%;}
    .scripz-col-5 {width: 41.66%;}
    .scripz-col-6 {width: 50%;}
    .scripz-col-7 {width: 58.33%;}
    .scripz-col-8 {width: 66.66%;}
    .scripz-col-9 {width: 75%;}
    .scripz-col-10 {width: 83.33%;}
    .scripz-col-11 {width: 91.66%;}
    .scripz-col-12 {width: 100%;}

    .scripz-col-s-hidden { display:inherit;}
    .scripz-col-hidden { display:none !important}
}

[class*="scripz-col-"] {
    float: left;
    padding: min(15px,4.5vw);
    padding-top: calc(var(--scale-value) / 50);
    padding-bottom: calc(var(--scale-value) / 50);
}

.scripz-row::after {
    content: "";
    clear: both;
    display: table;
}

.bible-translation-container{
    position:fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-image:linear-gradient(#152F4A80, #02112280);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-y: scroll;
    display: none;
}
.bible-translation-popup{
    background-image: linear-gradient(#e1b596, #fdd8b8);
    font-size: clamp(13px, 3.5vw, 16px);
    width: min(450px, 85vw);
    margin: auto;
    padding: min(25px, 5vw);
    border-radius: 0 0 min(18px, 4vw) min(18px, 4vw);
    border: 2px solid lightgray;
    border-top: none;
}
.translation-text {
    color: rgb(50,50,50);
}
.bible-translation-title {
    color:#314f6f;
    /* #654732 */
    /* #2b90a6 */
    background-color: white;
    font-size: clamp(17px, 6vw, 30px);
    font-weight: bolder;
    text-align: center;
    width: min(450px, 85vw);
    margin: auto;
    margin-top: min(85px, 17vw);
    padding: min(25px, 5vw);
    border-radius: min(18px, 4vw) min(18px, 4vw) 0 0;
    border: 2px solid lightgray;
    /* border-bottom: none; */
}
.close-translation{
    position:absolute;
    right:0;
    top:0;
    border:none !important;
    outline: none !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: bold;
    font-size: clamp(12px, 2.5vh, 16px) !important;
    margin: calc(var(--game-menu-scale)*.02) calc(var(--game-menu-scale)*.03) 0 0 !important;
    padding: 0;
    z-index: 4;
}
@media (min-width: 768px) {
    .close-translation {
        border: calc(var(--game-menu-scale)*.005) solid #dc3545 !important;
        margin: calc(var(--game-menu-scale)*.06) calc(var(--game-menu-scale)*.06) 0 0 !important;
    }
}

.home-container{
    background-color:#63bdd7;
    border-radius: min(20px, 5vw);
    padding: min(20px, 5vw);
    padding-bottom: min(30px, 7vw);
    box-shadow: inset 0 0 calc(var(--rules-scale-vh) / 200) black;
}
.home-container-border{
    background-image: linear-gradient(#3096b7, #007499);
    border-radius: min(20px, 5vw);
    padding: min(15px, 4vw);
    padding-bottom: min(40px,10vw);
    margin: auto;
    margin-bottom: 1.5vh;
    max-width: 400px;
    filter: drop-shadow(0 calc(var(--game-menu-scale)*.005) calc(var(--game-menu-scale)*.01) rgba(0, 0, 0, 0.4));
}
.home-header{
    color: white;
    opacity: 0.5;
    height: 1.5px !important;
}
.disabledText{
    position: absolute;
    width: min(175px,50vw);
    font-size: min(16px,5vw); 
    padding: 0 min(15px, 5vw);
    pointer-events: none;
    display: none;
}
.disabled-blur{
    position:absolute;
    width: min(175px,50vw);
    height: min(175px,50vw);
    /* background-color: #0552b68c; */
    background-color:#092f569c;
    /* #3a2cbf6c   #4337b46c  #0055b58a  #2a54a196 */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: min(17px,6vw);
    border: min(3px,1.2vw) solid white;
    box-shadow: inset 0 0 calc(var(--rules-scale-vh) / 150) white;
    pointer-events:none;
    display: none;
}
.checkBtnsNew:hover .disabled-blur{
    width: min(180px,53vw);
    height: min(180px,53vw);
}

.home-play{
    width: min(30px, 8vw);
    height: min(30px, 8vw);
    margin: min(7px, 2vw);
    fill:#152f4a;
    animation: home-fun 08s infinite;
}
@keyframes home-fun {
    0% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    5% {transform: rotate(0deg) scale(1.05); fill:#034060}
    10% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    15% {transform: rotate(0deg) scale(1.05); fill:#034060}
    20% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    25% {transform: rotate(0deg) scale(1.05); fill:#034060}
    30% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    35% {transform: rotate(0deg) scale(1.05); fill:#034060}
    40% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    45% {transform: rotate(0deg) scale(1.05); fill:#034060}
    50% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    55% {transform: rotate(0deg) scale(1.05); fill:#034060}
    60% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    65% {transform: rotate(10deg) scale(1.1); fill:#034060}
    80% {transform: rotate(-20deg) scale(0.9); fill:#152f4a}
    85% {transform: rotate(360deg) scale(1.2); fill:white}
    100% {transform: rotate(360deg) scale(0.95); fill:#152f4a} 

    /*  w/ ORANGE ICONS
    0% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    5% {transform: rotate(0deg) scale(1.05); fill:#254465}
    10% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    15% {transform: rotate(0deg) scale(1.05); fill:#254465}
    20% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    25% {transform: rotate(0deg) scale(1.05); fill:#254465}
    30% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    35% {transform: rotate(0deg) scale(1.05); fill:#254465}
    40% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    45% {transform: rotate(0deg) scale(1.05); fill:#254465}
    50% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    55% {transform: rotate(0deg) scale(1.05); fill:#254465}
    60% {transform: rotate(0deg) scale(0.95); fill:#152f4a}
    65% {transform: rotate(10deg) scale(1.1); fill:#254465}
    80% {transform: rotate(-20deg) scale(0.9); fill:#152f4a}
    85% {transform: rotate(360deg) scale(1.2); fill:#ffffff}
    100% {transform: rotate(360deg) scale(0.95); fill:#152f4a}  */
}
.waymaker-delay{
    animation-delay: -2.4s;
}

.share-wrapper{
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(#011a39 20%,#022b4c ,#0c4b6a,#2990b9,#63c4e0);
    box-shadow: inset 0 0 15px 2px rgba(1, 5, 29, 0.5);
    /* overflow: hidden; */
}
.share-image{
    /* image: 1242x2688px | ratio: 0.46205357 */
    width: 50vh;
    height: 50vh;
    background-image: url(../../assets/images/sharePageIcon.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.apple-image{
    position: relative;
    display:flex;
    width:100%;
    margin: auto;
    height: auto;
}
.google-image{
    position: relative;
    display:flex;
    width: 100%;
    margin: auto;
    height:auto;
}
.image-link{
    display: flex;
    width: 100%;
    height: 8vh;
}
.share-title{
    width: 100%;
    height: 4vh;
    color:white;
    text-align: center;
    font-size: 4vh;
    font-weight: bolder;
    margin-bottom: 1.5vh;
}
.share-statement{
    width: 100%;
    height: 4vh;
    color:white;
    text-align: center;
    font-size: 3vh;
}
.share-download{
    width: 100%;
    height: 8vh;
    color:white;
    text-align: center;
    font-size: 2.5vh;
    margin-bottom: 0.5vh;
}
.share-continue{
    width: 100%;
    height: 8vh;
    color:white;
    text-align: center;
    font-size: 2.3vh;
    margin-bottom: 0.5vh;
    margin-top:1vh;
    cursor: pointer;
}
.share-continue .help, .share-download .help{
    width: 100%;
    height: 3vh;
    color:white;
    text-align: center;
    font-size: 2vh;
    margin-bottom: 0.5vh;
}
.share-show-again{
    width: 100%;
    height: 3vh;
    color:white;
    text-align: center;
    font-size: 1.5vh;
    margin-bottom: 0.5vh;
    cursor: pointer;
}
.share-hr{
    color: white;
    margin: auto;
    margin-top: 1.5vh;
    margin-bottom: 1vh;
    width: 26vh;
}
.app-store-logo {
    width: 119px;
    aspect-ratio:auto;
    margin:10px;
}

.play-store-logo {
    width: 155px;
    aspect-ratio:auto;
}

.overview_hidden {
    display: none;
}

.overview_visible {
    display: inherit;
}