/*
    width:500px is for screens larger than 510px
    for smaller screens, width is 98% (??) of view port
*/


#allContentHolder {
    padding-top: 8px;
}
body
{
    margin:0;
}


#allContentHolder {
    display: none;
}

#loadingPage {
    display: flex;
    justify-content: center;
    display: none;
}



#loadingMessage {
    box-sizing: border-box;
    width: 16.5%;
    aspect-ratio: 3 / 1;
    margin: .5% .5% .5% .5%;
    border: 2px solid;
    border-radius: 14px;
    text-align: center;
    font-size: larger;
    font-weight: bold;
    border-color: white;
    color: white;
    background-color: #010038;
    position: absolute;
    z-index: 100;
    top: 24%;
    left: 41.25%;
}

@media (max-width: 1100px) {
    #loadingMessage {
        border-radius: 11px;
        font-size: medium;
        width: 29.5%;
        left: 38.8%;
        top: 27%;
    }
}


@media (max-width: 510px) {
    #loadingMessage {
        border-radius: 11px;
        font-size: medium;
        width: 52.5%;
        left: 23.5%;
        top: 27%;
    }
}

#loadingMessage {
    animation: spin 2s linear infinite;
}


.spinEffect {
    animation: spin 1.5s linear 1;
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



#allContentHolder, #loadingPage {
    width: 500px;
    margin: 0 auto;
}

@media (max-width: 510px) {
    #allContentHolder {
        width: 95vw;
    }
}

.guessesAndKeyBoardHolder {
    width: 100%;
}

#headerImageHolder {
    width: 100%;
    padding-bottom: 8px;
    display: flex;
    width: 100%;
    gap: 0px;
    z-index: 200;
    position: relative;
}

.headerImageWrapper {

}

.headerImage {
    max-width: 100%;
    height: auto;
    display:block;
}

.guessHolder {
    width: 100%;
}

.guess {
    width: 100%;
    position: relative;
}

.wordRow {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wordRowHolder {
}

.keyboard {
    padding-top: 13px;
}

.keyboardRow {
    margin-bottom: 3px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3% 0% .3% 0%;
}

.keyboardLetter {
    width: 9%;
    aspect-ratio: 1/1.2;
    margin: 0 2px 0 2px;
    border-width: 1px;
    font-size: medium;
    /*font-weight: bold;*/
}


#keyboardBackButton, #keyboardSubmitGuess {
    border-width: 1px;
    margin: 0 2px 0 2px;
    font-size: large;
    padding: 5px;
}
/*NOTE: this declaration must come first so background color can be overridden*/
.keyboardLetter, #keyboardBackButton, #keyboardSubmitGuess {
    border-color: #010038;
    border-width: 1px;
    margin: 0 2px 0 2px;
    touch-action: manipulation;
    border-style: solid;
}

.keyboardBackgroundColor {
    background-color: #E6ECF7;
}

/*BLUE AND ORANGE*/
.guessBox {
    box-sizing: border-box;
    width: 10%;
    aspect-ratio: 1 / 1;
    margin: .5% .5% .5% .5%;
    border: 2px solid;
    border-radius: 25%;
    text-align: center;
    font-size: large;
    font-weight: bold;
    border-color: #010038;
}

@media (max-width: 425px) {
    .guessBox {
        font-size: medium;
    }
}


.guessBoxCorrect {
    background-color: #537EC5;
    color: white;
    /*border-color: #010038;*/
}

.guessBoxWrongLocation {
    background-color: #F6A74A;
    color: white;
    /*border-color: #010038;*/
}

.guessBoxWrong {
    background-color: #A8A8BC;
    color: white;
    /*border-color: #010038;*/
}


.guessBoxWrongLocationAndWord {
    background-image: linear-gradient(45deg, #A8A8BC 25%, #F6A74A 25%, #F6A74A 50%, #A8A8BC 50%, #A8A8BC 75%, #F6A74A 75%, #F6A74A 100%);
    background-size: 33.94px 33.94px;
    color: white;
    /*border-color: #010038;*/
}


/*https://stripesgenerator.com/*/

.spaceRepresenter {
    visibility: hidden;
}

.submitted {
}



#footerText {
    text-align: center;
    font-size: small;
    color: #537EC5;
}

#cheatSheetImageWrapper {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

#cheatSheetImage {
    width: 400px;
}

@media (max-width: 510px) {
    #cheatSheetImage {
        width: 100%;
    }
}

/*  how to play - begin *******************************/
#howToPlayOverlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 250;
}

#howToPlayWrapper {
    width: 475px;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}


@media (max-width: 510px) {
    #howToPlayWrapper {
        width: 95vw;
    }
}


#howToPlayImage {
    width: 100%;
}

#howToPlayImageX {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0%;
    right: 0%;
    cursor: pointer;
}

#howToPlayImage {

}

/*  how to play - end *******************************/


/*  Guess correct - begin *******************************/
#guessCorrectOverlay, #guessIncompleteLettersOverlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    z-index: 2;
}

#guessCorrectTextWrapper, #guessIncompleteLettersWrapper {
    display: none;
}


#correctGuessMessage {
    box-sizing: border-box;
    width: 34.5%;
    aspect-ratio: 3 / 1;
    margin: .5% .5% .5% .5%;
    border: 2px solid;
    border-radius: 14px;
    text-align: center;
    font-size: x-large;
    font-weight: bold;
    border-color: white;
    color: white;
    background-color: #010038;
    position: absolute;
    z-index: 100;
    top: 25%;
    left: 32%;
/*    display: flex;
    align-items: center;*/
}

@media (max-width: 510px) {
    #correctGuessMessage {
        border-radius: 11px;
        font-size: large;
    }
}


#guessIncompleteLettersMessage {
    box-sizing: border-box;
    width: 49.5%;
    aspect-ratio: 3 / 1;
    margin: .5% .5% .5% .5%;
    border: 2px solid;
    border-radius: 14px;
    text-align: center;
    font-size: larger;
    font-weight: bold;
    border-color: white;
    color: white;
    background-color: #010038;
    position: absolute;
    z-index: 100;
    top: 12%;
    left: 25%;
}

@media (max-width: 510px) {
    #guessIncompleteLettersMessage {
        border-radius: 11px;
        font-size: medium;
        width: 52.5%;
    }
}


/*  Guess correct - end *******************************/

/*  Guess Final incorrect - begin *******************************/
#guessFinalIncorrectMessageWrapper {
    display: none;
}
#guessFinalIncorrectMessage {
    box-sizing: border-box;
    width: 49.5%;
    aspect-ratio: 3 / 1;
    margin: .5% .5% .5% .5%;
    border: 2px solid;
    border-radius: 14px;
    text-align: center;
    font-size: larger;
    font-weight: bold;
    border-color: #010038;
    color: #010038;
    background-color: white;
    position: absolute;
    z-index: 100;
    top: 12%;
    left: 25%;
}

@media (max-width: 510px) {
    #guessFinalIncorrectMessage {
        border-radius: 11px;
        font-size: medium;
        width: 52.5%;
    }
}

/*  Guess Final incorrect - end *******************************/

/*  Game Complete - begin *****************************/

#guessMorePhrases
{
    color: #537EC5;
}

#gameCompleteText {
    color: #010038;
    font-family: Arial;
    font-size: xx-large;
    margin: 5%;
    margin-top: 14%;
}

#gameCompleteOverlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    z-index: 10;
}

#gameCompleteWrapper {
    display: none;
}

#gameCompleteMessage {
    box-sizing: border-box;
    width: 80.5%;
    aspect-ratio: 1 / 1.4;
    margin: .5% .5% .5% .5%;
    text-align: center;
    font-size: xx-large;
    font-weight: bold;
    border-color: #010038;
    border: 2px;
    color: white;
    background-color: #E6ECF7;
    position: absolute;
    z-index: 100;
    top: -95%;
    left: 9.5%;
    border: 2px solid;
    /*cursor: pointer;*/
}

#gameCompleteX {
    width: 25px;
    border: 0;
    position: absolute;
    top: 1.5%;
    right: 2.5%;
    cursor: pointer;
}

@media (max-width: 510px) {
    #gameCompleteWrapper {
        width: 85vw;
    }
    #gameCompleteMessage, #gameCompleteText {
        font-size: x-large;
    }
    #gameCompleteX {
        width: 16px;
    }
}


#phraseCompleteMessage {
    margin-top: 16%;
    color: #537EC5;
    font-family: Arial;
    margin-bottom: 5%;
}

/*#phraseCompleteMessage {
    margin-top: 18%;
    color: #537EC5;
    font-family: Arial;
}*/


/*  Game Complete - end *******************************/
/*  Share Display - begin ******************************/
/*#shareButton {
    width: 67%;
    border: 0;
    position: absolute;
    top: 72%;
    left: 17%;
    cursor: pointer;
}*/

#shareButton {
    width: 67%;
    border: 0;
/*    position: absolute;*/
    top: 53%;
    left: 17%;
    cursor: pointer;
}


/*  Share Display - end ********************************/
#questionMark, #menuButton {
    cursor: pointer;
}

hr
{
    width:99%;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

nav {
/*    box-sizing: border-box;
    width: fit-content;
    border: 1px solid;
    text-align: center;
    font-size: large;
    font-weight: bold;
    border-color: #010038;
    font-family: Arial;*/
}
#menuButton {
    position: relative;
}

#gameMenu {
    position: absolute;
    top: 28px;
    left: 0;
    background-color: #E6ECF7;
    padding:10px;
    display: none;

    /*new*/
    box-sizing: border-box;
    width: fit-content;
    border: 1px solid;
    text-align: center;
    font-size: large;
    font-weight: bold;
    border-color: #010038;
    font-family: Arial;


}
nav li {
    white-space: nowrap;
    padding: 5px;
}

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

.linkToOtherGames
{
    text-align: center;

}

/*.menuLink {
    white-space: nowrap;
}*/

/* ------PULSE--------------------------------------------------------------------------------------------------------------------*/
.pulse-box {
 /* background: white;*/
  /*border-radius: 12px;*/
  display: grid;
  place-items: center;
  color: white;

  /* 1s per cycle: 0.5s grow, 0.5s shrink; 3 cycles then stop */
  animation: pulse .8s ease-in-out 4;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); } /* 20% bigger */
  100% { transform: scale(1); }
}

.pulse-box2 {
  /*background: white;*/
  /*border-radius: 12px;*/
  display: grid;
  place-items: center;
  color: white;

  /* 1s per cycle: 0.5s grow, 0.5s shrink; 3 cycles then stop */
  animation: pulse .8s ease-in-out 3;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); } /* 20% bigger */
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------------------------------------------------------
    -------------------------------------------------------------------------------------------------------------------------
 * Generated by Animista on 2025-11-8 8:23:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
.scale-in-center {
/*    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;*/
}


@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

/*------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------*/
.rotate-center {
    -webkit-animation: rotate-center 0.6s ease-in-out both;
    animation: rotate-center 0.6s ease-in-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-12-25 7:17:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------*/

.slide-fwd-center {
    -webkit-animation: slide-fwd-center 1.95s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-fwd-center 1.95s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-2-21 10:17:29
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-fwd-center
 * ----------------------------------------
 */
@-webkit-keyframes slide-fwd-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    100% {
        -webkit-transform: translateZ(160px);
        transform: translateZ(160px);
    }
}

@keyframes slide-fwd-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    100% {
        -webkit-transform: translateZ(160px);
        transform: translateZ(160px);
    }
}





.rotate-scale-up {
/*    -webkit-animation: rotate-scale-up 0.65s linear both;
    animation: rotate-scale-up 0.65s linear both;*/
}

/* ----------------------------------------------
 * Generated by Animista on 2025-12-25 7:47:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-scale-up
 * ----------------------------------------
 */
@-webkit-keyframes rotate-scale-up {
    0% {
        -webkit-transform: scale(1) rotateZ(0);
        transform: scale(1) rotateZ(0);
    }

    50% {
        -webkit-transform: scale(2) rotateZ(180deg);
        transform: scale(2) rotateZ(180deg);
    }

    100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
    }
}

@keyframes rotate-scale-up {
    0% {
        -webkit-transform: scale(1) rotateZ(0);
        transform: scale(1) rotateZ(0);
    }

    50% {
        -webkit-transform: scale(2) rotateZ(180deg);
        transform: scale(2) rotateZ(180deg);
    }

    100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
    }
}




/* ----------------------------------------------
 * Generated by Animista on 2026-1-10 15:41:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */

.scale-up-center {
/*    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;*/
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}