/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face{
    src:url("../assets/fonts/Inter-Variable-optimized.woff2") format("woff2");
    font-family:"Inter";
    font-display:swap;
}

*{
    -webkit-tap-highlight-color:transparent;
}
:root{
    --background-color:         rgb(255, 255, 255);
    --background-accent-color:  rgb(231, 234, 237);
    --background-accent-color-2:rgb(200, 200, 200);
    --background-accent-color-3:rgb(248, 249, 250);
    --accent-color:             rgb(254, 223, 106);
    --accent-color-2:           rgb(255, 241, 191);
    --accent-color-3:           rgb(246, 242, 227);
    --text-color:               rgb(000, 000, 000);

    --button-invert:0;
    --mode:0;
    --alert-left:calc(50% - calc(min(95vw, 75rem) / 2) + calc(min(95vw, 75rem) / 4));
}
body{
    background-color:var(--background-color);
    color:var(--text-color);
    font-family:"Inter";
    overflow-x:hidden;
    overflow-y:auto;
    padding:0;
    margin:0;
}
.main-page{
    position:absolute;
    height:100%;
    width:100vw;
    left:0px;
    top:0px;

    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;
}
.main-page-body{
    justify-content:center;
    align-items:flex-start;
    display:flex;

    transform:translate(-50%);
    min-height:calc(100% - 5rem);
    width:min(95vw, 75rem);
    margin-bottom:1rem;
    margin-left:50%;
}

/*--Alerts-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.alert{
    transform:translate(-50%);
    left:var(--alert-left);
    border-radius:0.5rem;
    text-align:center;
    position:absolute;
    font-size:1.5rem;
    padding:0.5rem;
    padding-right:1.5rem;
    padding-left:1.5rem;
    
    display:none;
    top:5rem;
    z-index:2;
    align-items:center;
    justify-content:flex-start;
    min-width:max-content;
    color:rgb(255, 255, 255);
}
.alert-success{
    background-color:rgb(108, 197, 65);
}
.alert-warning{
    background-color:rgb(246, 181, 53);
}
.alert-error{
    background-color:rgb(1, 13, 26);
}
.alert-icon{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    display:none;

    margin-right:1rem;
    aspect-ratio:1;
    flex-shrink:0;
    height:2rem;
}
.alert-icon-warning{
    background-image:url("../assets/icons/warning.webp");
}
.alert-icon-error{
    background-image:url("../assets/icons/error.webp");
}
.alert-text{
    justify-content:center;
    align-items:center;
    display:flex;

    height:100%;
    width:100%;
}

.footer-banner{
    background-color:var(--accent-color);
    height:5rem;
    width:100%;

    justify-content:flex-start;
    align-items:center;
    display:none;
}
.footer-banner-text{
    width:calc(100% - 1rem);
    font-size:1.25rem;
    margin-left:1rem;
    height:100%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.footer-banner-button{
    border-radius:0.5rem;
    padding-right:2rem;
    padding-left:1.5rem;
    margin-right:2rem;
    flex-shrink:0;

    justify-content:center;
    align-items:center;
    display:flex;
}
.share-icon{
    background-image:url("../assets/icons/share.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    aspect-ratio:1;
    height:2rem;
}
.footer-banner-button-text{
    font-size:1.25rem;
}

/*--Elements------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
ul{
    transform:translate(-1rem);
}
select{
    color:var(--text-color);
    background-color:var(--accent-color);
    transition:ease-in-out 0.05s;
    border-radius:0.5rem;
    font-family:"Inter";
    font-weight:bold;
    padding:0.7rem;
    font-size:1rem;
    cursor:pointer;
    display:none;
    outline:0;
    border:0;
}
select:hover{
    transform:scale(1.05);
}
b{
    margin-right:0.5rem;
    margin-left:0.5rem;
}
a{
    color:var(--text-color);
    text-decoration:none;
}

button{
    color:var(--text-color);
    border:1px solid var(--background-accent-color);
    background-color:var(--background-color);
    border-radius:1.5rem;
    font-size:1.5rem;
    height:3rem;
    padding:0.5rem;
    padding-left:2rem;
    padding-right:2rem;

    cursor:pointer;
    user-select:none;
    transition:ease-in-out 0.1s;
    font-family:"Inter";
}
button:hover{
    transform:translateY(-1px);
}
button:active{
    transform:translateY(1px);
}
.highlight-button{
    border:1px solid var(--accent-color-2);
    background-color:var(--text-color);
    filter:invert(calc(-1 * var(--button-invert)));
    font-size:1.25rem;
    border-radius:4rem;
    height:4rem;
    width:calc(100% - 2rem);
    color:rgb(255, 255, 255);

    justify-content:center;
    align-items:center;
    display:flex;
}
.hightlight-share-icon{
    background-image:url("../assets/icons/share 2.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    filter:invert(var(--button-invert));
    margin-right:0.5rem;
    aspect-ratio:1;
    height:2rem;
}

/*--Page Head----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.main-page-head{
    border-bottom:1px solid var(--background-accent-color);
    flex-shrink:0;
    height:4rem;
    width:100%;

    justify-content:center;
    align-items:center;
    display:flex;
}
.main-page-head-holder{
    justify-content:space-between;
    align-items:center;
    display:flex;

    width:min(95vw, 75rem);
    height:100%;
}
.main-page-head-logo{
    background-image:url("../assets/images/bee 1.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:75%;

    margin-left:1rem;
    aspect-ratio:1;
    flex-shrink:0;
    height:4rem;
}
.head-container{
    justify-content:center;
    align-items:center;
    user-select:none;
    display:flex;
}
.points-holder{
    font-size:1.75rem;
}
.head-container-button-divider{
    background-color:var(--background-accent-color);
    height:2rem;
    width:1px;
}

.theme-holder{
    background-color:var(--background-accent-color);
    border-radius:2.5rem;
    height:2.5rem;
    width:5.25rem;

    justify-content:space-evenly;
    align-items:center;
    display:flex;
}
.theme-button{
    background-color:var(--background-color);
    border-radius:100%;
    height:2rem;
    width:2rem;

    cursor:pointer;
}
.theme-button-selected{
    background-color:var(--background-accent-color);
    cursor:default;
}

.new-game-button{
    background-color:rgb(1, 13, 26);
    padding-right:1rem;
    padding-left:0.5rem;
    height:2.5rem;
    border:none;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.new-game-button-icon{
    background-image:url("../assets/icons/plus.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    padding-right:0.5rem;
    filter:invert(1);
    aspect-ratio:1;
    flex-shrink:0;
    height:100%;
}
.new-game-button-text{
    color:rgb(255, 255, 255);
    font-size:0.9rem;
    height:100%;
    width:100%;

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

#dark-icon{
    background-image:url("../assets/icons/dark mode.webp");
}
#light-icon{
    background-image:url("../assets/icons/light mode.webp");
}
#mobile-theme-icon{
    background-image:url("../assets/icons/dark mode.webp");
}
#mobile-theme{
    display:none;
}

.head-button{
    all:unset;
    border:1px solid var(--background-accent-color);
    transition:ease-in-out 0.05s;
    user-select:none;
    cursor:pointer;
    aspect-ratio:1;
    border-radius:100%;
    height:2.5rem;
    outline:0;

    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;
}
.head-button:hover{
    transform:scale(1.05);
}
.head-button:active{
    transform:scale(0.95);
}
.head-button-icon{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;

    filter:invert(var(--button-invert));
    height:100%;
    width:100%;
}
#yesterday-icon{
    background-image:url("../assets/icons/yesterday.webp");
}
#stat-icon{
    background-image:url("../assets/icons/stats.webp");
}
#rank-icon{
    background-image:url("../assets/icons/rank.webp");
}
#help-icon{
    background-image:url("../assets/icons/help.webp");
}
#list-icon{
    background-image:url("../assets/icons/list.webp");
}
#plus-icon{
    background-image:url("../assets/icons/plus.webp");
}

#list{
    display:none;
}
#plus{
    display:none;
}

.head-l{
    justify-content:flex-start;
    margin-left:1rem;
}
.head-l > *{
    margin-right:1rem;
}
.head-r{
    justify-content:flex-end;
    margin-right:1rem;
}
.head-r > *{
    margin-left:0.5rem;
}

.select-mask{
    background-color:var(--background-accent-color);
    border:1px solid var(--background-accent-color-2);
    transition:ease-in-out 0.1s;
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    display:flex;

    border-radius:2.5rem;
    height:2.5rem;
}
.select-mask:hover{
    background-color:var(--accent-color-2);
}
.select-mask-text{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    filter:invert(var(--button-invert));
    margin-left:1rem;
    font-size:0.9rem;
    height:100%;
    width:100%;
}
.select-mask-arrow{
    background-image:url("../assets/icons/expand.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    margin-right:0.5rem;
    aspect-ratio:1;
    flex-shrink:0;
    height:1.5rem;
}

.select-window{
    box-shadow:0px 0px 0.5rem rgba(0, 0, 0, 0.2);
    background-color:var(--background-color);
    border-radius:1rem;
    position:absolute;
    display:none;
    
    height:8rem;
    width:13rem;
    z-index:1;
    left:3rem;
    top:5rem;
}
.select-window-arrow{
    box-shadow:0px 0px 1rem rgba(0, 0, 0, 0.2);
    background-color:var(--background-color);
    transform:rotate(45deg);
    position:absolute;
    aspect-ratio:1;
    height:1rem;
    right:1.5rem;
    top:-0.5rem;
}
.select-window-body{
    background-color:var(--background-color);
    border-radius:1rem;
    position:absolute;
    overflow:hidden;
    height:100%;
    width:100%;
    left:0px;
    top:0px;

    justify-content:space-evenly;
    flex-direction:column;
    align-items:center;
    display:flex;
}
.select-option{
    background-color:var(--background-accent-color);
    width:calc(100% - 3rem);
    border-radius:0.5rem;
    padding-left:1rem;
    height:2.5rem;
    
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    display:flex;
}
.selected-option{
    background-color:var(--accent-color-2);
    cursor:default;
}

@keyframes select-window-fade-in{
    from {transform:translateY(-50%) scaleY(0); opacity:0;}
    to   {transform:translateY(0%) scaleY(1); opacity:1;}
}
@keyframes select-window-fade-out{
    from {transform:translateY(0%) scaleY(1); opacity:1;}
    to   {transform:translateY(-50%) scaleY(0); opacity:0;}
}

/*--Page Body Left-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.body-l{
    width:calc(50% - 0.5rem);
    margin-right:0.5rem;
    height:100%;
}
.current-guess{
    justify-content:center;
    align-items:center;
    overflow-y:hidden;
    font-weight:bold;
    flex-wrap:wrap;
    display:flex;

    transform:translate(-50%);
    width:min(100%, 20rem);
    margin-bottom:6.5rem;
    border-radius:1rem;
    margin-top:5rem;
    margin-left:50%;
    font-size:2.5rem;
    height:3rem;
}
.current-guess::after{
    background-color:var(--accent-color);
    width:0.4rem;
    height:3rem;
    content:"";
    animation:input-blink infinite 1s;
}

@keyframes input-blink{
    0%  {opacity:1;}
    5%  {opacity:0;}
    45% {opacity:0;}
    50% {opacity:1;}
}

.hex-holder{
    margin-top:2rem;
    height:50%;
    width:100%;
}
.hex-row{
    justify-content:center;
    align-items:center;
    user-select:none;
    display:flex;

    margin-bottom:0.5%;
    margin-top:0.5%;
    height:32%;
    width:100%;
}
.hex{
    background-color:var(--background-accent-color);
    aspect-ratio:1.13;
    font-size:3rem;
    height:100%;

    transition:ease-in-out 0.1s;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    user-select:none;
    cursor:pointer;
    outline:none;
    display:flex;

    clip-path: polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
    );
}
.hex:hover{
    transform:scale(1.025);
}
.hex:active{
    transform:scale(0.975);
}
.highlight-hex{
    background-color:var(--accent-color);
}

.hex-u{
    transform:translateY(-2%);
}
.hex-d{
    transform:translateY(2%);
}
.hex-ul{
    transform:translate(22%, 50%);
}
.hex-ur{
    transform:translate(-22%, 50%);
}
.hex-dl{
    transform:translate(22%, -50%);
}
.hex-dr{
    transform:translate(-22%, -50%);
}

.hex-u:hover{
    transform:translateY(-2%) scale(1.025);
}
.hex-d:hover{
    transform:translateY(2%) scale(1.025);
}
.hex-ul:hover{
    transform:translate(22%, 50%) scale(1.025);
}
.hex-ur:hover{
    transform:translate(-22%, 51%) scale(1.025);
}
.hex-dl:hover{
    transform:translate(22%, -51%) scale(1.025);
}
.hex-dr:hover{
    transform:translate(-22%, -51%) scale(1.025);
}

.hex-u:active{
    transform:translateY(-2%) scale(0.975);
}
.hex-d:active{
    transform:translateY(2%) scale(0.975);
}
.hex-ul:active{
    transform:translate(22%, 51%) scale(0.975);
}
.hex-ur:active{
    transform:translate(-22%, 51%) scale(0.975);
}
.hex-dl:active{
    transform:translate(22%, -51%) scale(0.975);
}
.hex-dr:active{
    transform:translate(-22%, -51%) scale(0.975);
}

.guess-button-holder{
    justify-content:center;
    align-items:center;
    user-select:none;
    display:flex;

    margin-top:2rem;
    width:100%;
}
.guess-button-holder > *{
    font-size:1.25rem;
    border-radius:100%;
    margin-right:0.5rem;
    margin-left:0.5rem;
    aspect-ratio:1;
    padding:0.5rem;
    height:4rem;
}
.guess-button-icon{
    background-position:center center;
    background-repeat:no-repeat;
    height:100%;
    width:100%;
    filter:invert(var(--button-invert));
}
.guess-reload-icon{
    background-image:url("../assets/icons/reload.webp");
    background-size:75%;
}
.guess-hint-icon{
    background-image:url("../assets/icons/hint.webp");
    background-size:75%;
}
#guess-reload{
    background-color:var(--background-accent-color);
}
#guess-hint{
    background-color:var(--background-accent-color);
}
#guess-delete{
    border-radius:4rem;
    aspect-ratio:auto;
    width:6rem;
}
#guess-enter{
    background-color:rgb(1, 13, 26);
    color:rgb(255, 255, 255);
    border-radius:4rem;
    aspect-ratio:auto;
    border:none;
    width:6rem;
}

/*--Page Body Right----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.body-r{
    height:calc(100% - 6rem);
    width:calc(50% - 0.5rem);
    border-radius:1rem;
    margin-left:0.5rem;
    margin-top:2rem;
    
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;
}

.score-display{
    border:2px solid var(--accent-color);
    width:calc(100% - 4rem);
    border-radius:1rem;
    margin-bottom:1rem;
    margin-top:1rem;
    padding:1rem;
    flex-shrink:0;
    height:3rem;

    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    display:flex;
}
.score-display-text-holder{
    justify-content:center;
    flex-direction:column;
    align-items:center;
    display:flex;

    flex-shrink:0;
    height:80%;
    width:25%;
}
.score-display-text{
    justify-content:flex-start;
    align-items:flex-start;
    display:flex;

    font-size:1rem;
    height:50%;
    width:100%;
    white-space:nowrap;
    flex-shrink:0;    
}
#score-display-text{
    font-weight:bold;
}
#score-display-next{
    color:var(--background-accent-color-2);
    margin-top:0.25rem;
    justify-content:flex-start;
}

.score-display-bar{
    position:relative;
    height:2rem;
    width:100%;
}
.score-bar-line-holder{
    background-color:var(--background-accent-color);
    transform:translate(1rem, -50%);
    width:calc(100% - 2rem);
    border-radius:0.25rem;
    position:absolute;
    overflow:hidden;
    height:0.25rem;
    left:0px;
    top:50%;
}
.score-bar-line{
    transition:ease-in-out 0.1s;
    background-color:rgb(1, 13, 26);
    position:absolute;
    height:100%;
    width:0%;
    left:0px;
    top:0px;
}
.score-bar-points-holder{
    position:absolute;
    height:100%;
    width:calc(100% - 0.75rem);
    left:0.75rem;
    top:0px;

    justify-content:space-between;
    align-items:center;
    display:flex;
}
#score-highlight-points{
    width:100%;
    left:0px;
}
.score-bar-point{
    background-color:var(--background-accent-color);
    height:1.25rem;
    width:1.25rem;

    clip-path: polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
  );
}
#score-bar-max-points{
    justify-content:center;
    align-items:center;
    display:flex;

    font-size:0.7rem;
    width:2rem;
    height:3em;
}
.score-bar-point-highlight{
    background-color:rgb(1, 13, 26);
    color:rgb(255, 255, 255);
    font-size:0.5rem;
    height:1.25rem;
    width:1.25rem;
    opacity:0;

    transition:ease-in-out 0.1s;
    justify-content:center;
    align-items:center;
    display:flex;
}
.score-bar-point-highlight:first-child{
    font-size:0.7rem;
    height:2rem;
    width:2rem;
    opacity:1;
}
.score-bar-point-highlight:last-child{
    height:2rem;
    width:2rem;
}

.guessed-words-window{
    border:2px solid var(--background-accent-color);
    background-color:var(--background-color);
    height:calc(100% - 8rem - 0.5rem);
    width:calc(100% - 4rem);
    padding-bottom:0.5rem;
    padding-top:0.5rem;
    padding-right:1rem;
    border-radius:1rem;
    padding-left:1rem;
    position:relative;
    cursor:default;
}
.guessed-words-window-head{
    background-color:rgb(255, 251, 184);
    border:2px solid rgb(218, 172, 0);
    transform:translate(-50%);
    border-radius:1rem;
    position:relative;
    font-size:1.75rem;
    margin-left:50%;
    margin-top:3rem;
    height:4rem;
    width:85%;
    
    justify-content:center;
    align-items:center;
    display:none;
}
.guessed-words-window-body-title{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:3rem;
    width:100%;
}
.guessed-words-window-body-holder{
    height:calc(100% - 4rem);
    max-height:44rem;
    width:100%;

    overflow-x:hidden;
    overflow-y:auto;
    mask-image:linear-gradient(to bottom, black 70%, transparent 100%);
}
.guessed-words-window-body{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
    gap:0.5rem;
    padding:0.5rem;
    width:100%;
    padding-top:1rem;
}
.guessed-word{
    border-bottom:1px solid var(--background-accent-color);
    margin-bottom:0.5rem;
    padding-left:0.5rem;
    margin-right:1rem;
    height:2.5rem;
    width:7.5rem;

    justify-content:flex-start;
    align-items:center;
    font-weight:600;
    display:flex;
}
.guessed-words-window-expand{
    background-image:url("../assets/icons/expand.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    cursor:pointer;
    display:none;

    border-radius:100%;
    aspect-ratio:1;
    height:2rem;
    right:0.5rem;
    top:1rem;
}
.expand-up{
    transform:scaleY(-1);
}
.bee-decor{
    background-image:url("../assets/images/bee decor.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;

    aspect-ratio:1;
    height:3.5rem;
    left:-2rem;
    top:-2.5rem;
}
#bee-decor-r{
    transform:scaleX(-1);
    left:auto;
    right:-2rem;
}

/*--Page Foot----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page-footer{
    height:fit-content;
    width:100%;
}

.page-footer-desc{
    background-image:url("../assets/images/footer\ desc\ background.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;

    color:rgb(0, 0, 0);
    height:25rem;
    width:100%;
}
.page-footer-desc-all-text{
    transform:translate(0px, -40%);
    max-width:30rem;
    height:20rem;
    width:100%;

    position:absolute;
    left:15%;
    top:50%;
}
.page-footer-desc-title{
    font-weight:600;
    font-size:2.5rem;
    height:7rem;
    width:50%;
}
.page-footer-desc-image{
    background-image:url("../assets/images/foot desc.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;

    bottom:-17%;
    height:36rem;
    width:36rem;
    right:15%;
}

.page-footer-howto{
    height:40rem;
    width:100%;
}
.page-footer-howto-title{
    transform:translate(-50%);
    font-size:2.5rem;
    font-weight:600;
    margin-top:5rem;
    margin-left:50%;
    width:20rem;
    max-width:calc(100vw - 2rem);

    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;
}
.page-footer-howto-text{
    color:var(--background-accent-color-2);
    transform:translate(-50%);
    margin-left:50%;
    margin-top:2rem;
    width:30rem;
    max-width:calc(100vw - 2rem);

    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;
}
.page-footer-howto-slides-holder{
    transform:translate(-50%);
    margin-left:50%;
    margin-top:5rem;
    height:20rem;
    width:62rem;
    max-width:calc(100vw - 2rem);

    justify-content:space-between;
    align-items:center;
    display:flex;
}
.page-footer-howto-slide{
    background-color:rgb(240, 243, 246);
    border-radius:2rem;
    height:20rem;
    width:20rem;

    position:relative;
    overflow:hidden;
}
.page-footer-howto-slide-number{
    color:rgb(228, 231, 233);
    font-weight:600;
    font-size:11rem;
    bottom:-2.5rem;
    right:1rem;
    position:absolute;
}
.page-footer-howto-slides-holder
.page-footer-howto-slide:nth-child(2)
.page-footer-howto-slide-number{
    color:rgb(242, 220, 124);
    background: linear-gradient(rgb(242, 220, 124), rgb(242, 207, 56));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.page-footer-howto-slide-content{
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.page-footer-howto-slide-image{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    height:65%;
    width:100%;
}
.page-footer-howto-slide-title{
    text-align:center;
    margin-top:0.5rem;
    margin-bottom: 0;
    font-weight:600;
    font-size: 16px;
    width:100%;
    color:rgb(0, 0, 0);
}
.page-footer-howto-slide-text{
    color:rgba(129, 129, 129);
    width:calc(100% - 2rem);
    margin-top:0.5rem;
    text-align:center;
    margin-left:1rem;
    font-size:0.8rem;
}

#earn-points{
    background-image:linear-gradient(rgba(255, 218, 58, 0), rgba(255, 218, 58, 1));
    background-color:rgb(255, 248, 219);
}
#form-a-word-image{
    background-image:url("../assets/images/form\ a\ word.webp");
}
#earn-points-image{
    background-image:url("../assets/images/earn\ points.webp");
    background-size:60%;
}
#track-progress-image{
    background-image:url("../assets/images/track\ progress.webp");
    background-size:80%;
}

.page-footer-faq{
    background-color:var(--background-accent-color-3);
    padding-bottom:5rem;
    padding-top:5rem;
}
.page-footer-faq-title{
    transform:translate(-50%);
    margin-bottom:2rem;
    font-size:2.5rem;
    margin-left:50%;
    font-weight:600;

    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;
}
.page-footer-faq-text{
    color:var(--background-accent-color-2);
    transform:translate(-50%);
    margin-bottom:5rem;
    margin-left:50%;

    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;
}
.page-footer-faq-holer{
    transform:translate(-50%);
    width:calc(100% - 4rem);
    margin-left:50%;
    max-width:60rem;
}
.page-footer-faq-element{
    background-color:var(--background-color);
    width:calc(100% - 2rem);
    border-radius:1rem;
    margin-bottom:1rem;
    padding:1rem;
}
.page-footer-faq-element-head{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    position:relative;
    height:2rem;
    width:100%;
}
.page-footer-faq-question{
    width:calc(100% - 4rem);
    font-weight:bold;
    height:100%;
    font-size: 16px;
    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.page-footer-faq-button{
    position:absolute;
    right:0px;
    top:0px;

    aspect-ratio:auto;
    padding:0px;
    height:2rem;
    width:2rem;

    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;
}
.page-footer-faq-button-plus{
    background-image:url("../assets/icons/plus\ 2.webp");
    border:1px solid var(--accent-color);
    background-color:var(--accent-color);
}
.page-footer-faq-button-minus{
    background-image:url("../assets/icons/minus.webp");
    border:1px solid var(--accent-color);
    display:none;
}
.page-footer-faq-element-body{
    display:none;
}

.page-footer-about{
    background-image:url("../assets/images/about\ background.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;

    color:rgb(0, 0, 0);
    padding-top:5rem;
    height:20rem;
    width:100%;
}
.page-footer-about-title{
    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;

    transform:translate(-50%);
    margin-bottom:2rem;
    font-size:2.5rem;
    font-weight:600;
    margin-left:50%;
    margin-top: 0rem;
}
.page-footer-about-text{
    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;

    max-width:calc(100% - 2rem);
    transform:translate(-50%);
    margin-bottom:2rem;
    margin-left:50%;
    width:30rem;
}
.page-footer-about-bee{
    background-image:url("../assets/images/spell-bee-icon.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;

    aspect-ratio:1;
    height:10rem;
}
#page-footer-about-bee-1{
    transform:translateY(-40%);
    left:20%;
    top:0%;
}
#page-footer-about-bee-2{
    transform:scale(-1.2, 1.2);
    right:10%;
    top:20%;
}
#page-footer-about-bee-3{
    transform:scale(0.5);
    left:30%;
    bottom:-5%;
}

.page-footer-info{
    background-color:rgb(0, 0, 0);
    color:rgb(255, 255, 255);
    padding-top:3rem;
    height:12rem;
    width:100%;
}
.page-footer-info-text{
    justify-content:space-between;
    align-items:center;
    display:flex;

    height:4rem;
    margin-left:5rem;
    width:calc(100% - 10rem);
}
.page-footer-info-icon{
    background-image:url("../assets/images/bee 1.webp");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    aspect-ratio:1;
    height:4rem;
}
.page-footer-info-links{
    justify-content:space-between;
    align-items:center;
    display:flex;

    width:20rem;
}
.page-footer-info-links > *{
    color:white !important;
}
.page-footer-info-divider{
    background-color:rgb(100, 100, 100);
    height:1px;
    margin-top:1rem;
    margin-left:5rem;
    width:calc(100% - 10rem);
}
.page-footer-info-copyright{
    color:rgb(100, 100, 100);
}
.terms-holder{
    justify-content:flex-end;
    align-items:center;
    display:flex;
}
.terms-holder > a{
    color:white !important;
    text-align:right;
}

/*--Mobile Display-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 550px) and (orientation:portrait){
    :root{
        font-size:12px;
    }
}
@media only screen and (max-width: 480px) and (orientation:portrait){
    :root{
        font-size:12px;
    }
    
    .guess-button-holder{
        height:fit-content;
        flex-wrap:wrap;
        margin-top:3rem;
    }
    .guess-button-holder > *{
        margin-bottom:0.5rem;
    }
    
    .hex-holder{
        height:fit-content;
    }
    .hex-row{
        height:fit-content;
    }
    .hex{
        aspect-ratio:1.13;
        flex-shrink:0;
        height:auto;
        width:30%;
    }
    .hint-table-col{
        font-size:1.25rem;
    }

    .main-page-head-logo{
        margin-left:0.5rem;
    }
    .head-l{
        margin-left:0.5rem;
    }
    .head-l > *{
        margin-right:0.5rem;
    }
    .select-window{
        left:2.5rem;
    }
    .select-window-arrow{
        right:2.5rem;
    }
    .head-r{
        margin-left:auto;
        flex-shrink:0;
        order:2;
    }
}
@media only screen and (max-width: 850px) and (orientation:portrait){
    .main-page-head{
        border-bottom-right-radius:1.5rem;
        border-bottom-left-radius:1.5rem;
    }
    .main-page-body{
        flex-direction:column;
        justify-content:flex-start;
        margin-left:50%;
        transform:translate(-50%);
    }
    .main-page-body > *{
        margin:0px;
        width:100%;
    }
    .body-l{
        position:absolute;
        width:100%;
        order:1;
        left:0px;
        top:9rem;
    }
    .body-r{
        background-color:rgba(0, 0, 0, 0);
        position:absolute;
        height:fit-content;

        width:calc(100%);
        padding-bottom:1rem;
        margin-top:0px;
        order:0;
        left:0px;
        top:0px;
    }
    .alert{
        left:calc(50% - 0.25rem);
        height:2rem;
        top:16rem;
    }
    
    .current-guess{
        margin-bottom:0.5rem;
        margin-top:6rem;
        height:4rem;
        flex-wrap:nowrap;
        overflow-x:hidden;
    }
    .current-guess > *{
        font-size:3rem;
    }
    .guessed-words-window{
        width:calc(100% - 2rem - 2px);
        margin-top:0rem;

        height:fit-content;
        cursor:pointer;
    }
    .guessed-words-window-expand{
        display:flex;
    }
    .guessed-words-window-head{
        display:flex;
    }
    .guessed-words-window-body{
        transition:ease-in-out 0.1s;
        min-height:30rem;
        max-height:37rem;
        display:flex;
    }
    .expand-guessed{
        display:flex;
    }
    .guessed-words-window-body-title-value{
        max-width:calc(100% - 1.5rem);
        max-height:100%;

        overflow:hidden;
        white-space:nowrap !important;
        text-overflow:ellipsis !important;
    }

    .score-display{
        transform:translate(-50%);
        width:calc(100% - 2rem);
        margin-left:50%;
    }
    .score-display-text-holder{
        width:30%;
    }
    .score-display-bar{
        width:calc(100vw - 4rem);
    }

    #page-footer-about-bee-1{
        transform:translateY(-40%);
        left:10%;
        top:0%;
    }
    #page-footer-about-bee-2{
        transform:scale(-1.1, 1.1);
        right:5%;
        top:10%;
    }
}
@media only screen and (max-width: 768px) and (orientation:portrait){
    .points-holder{
        display:none;
    }
    .main-page-head-holder{
        justify-content:flex-start;
        width:100%;
    }
    .main-page-head-logo{
        flex-shrink:0;
        order:0;
    }
    .head-l{
        flex-shrink:0;
        order:1;
    }
    .head-r{
        margin-left:auto;
        flex-shrink:0;
        order:2;
    }
    #mobile-theme{
        display:block;
    }
    .theme-holder{
        display:none;
    }
    .page-footer-info-text{
        width:calc(100% - 4rem);
        margin-left:1rem;
    }
    .page-footer-info-divider{
        margin-left:1rem;
        width:calc(100% - 4em);
    }
    #page-footer-about-bee-2{
        transform:scale(-1, 1);
        right:5%;
        top:5%;
    }
}
@media only screen and (max-width: 1450px){
    .page-footer-desc-all-text{
        left:2rem;
    }
    .page-footer-desc-image{
        right:-1rem;
    }
}
@media only screen and (max-width: 1000px){
    .page-footer-desc{
        background-image:url("../assets/images/footer\ desc\ background.webp");
        background-position:center center;
        background-repeat:no-repeat;
        background-size:cover;

        height:50rem;
        width:100%;

        position:relative;
    }
    .page-footer-desc-all-text{
        transform:translate(-50%, 0%);
        max-width:30rem;
        height:20rem;
        width:calc(100% - 2rem);

        position:absolute;
        left:50%;
        top:10%;
    }
    .page-footer-desc-title{
        font-weight:600;
        font-size:2.5rem;
        height:4rem;
        margin: 0;
        width:100%;

        justify-content:center;
        align-items:flex-start;
        display:flex;
    }
    .page-footer-desc-text{
        justify-content:center;
        align-items:flex-start;
        text-align:center;
        display:flex;
    }
    .page-footer-desc-image{
        transform:translate(50%);
        height:36rem;
        width:36rem;
        right:50%;
        bottom:0%;
    }
    #page-footer-about-bee-1{
        left:5rem;
    }
    #page-footer-about-bee-2{
        right:2rem;
    }
    #page-footer-about-bee-3{
        left:10rem;
    }

    .page-footer-howto-slides-holder{
        justify-content:space-evenly;
    }
    .page-footer-howto-slide{
        height:17rem;
        width:17rem;
    }
}
@media only screen and (max-width: 900px) and (orientation:portrait){
    .page-footer-howto{
        height:82rem;
    }
    .page-footer-howto-slides-holder{
        flex-direction:column;
        height:65rem;
    }
    .page-footer-howto-slide{
        margin-bottom:1rem;
        height:20rem;
        width:20rem;
    }
}
@media only screen and (max-width: 688px) and (orientation:portrait){
    #page-footer-about-bee-1{
        transform:scale(0.8, 0.8) translateY(-40%);
        left:0%;
        top:0%;
    }
    #page-footer-about-bee-2{
        transform:scale(-0.8, 0.8);
        right:0%;
        top:0%;
    }
    #page-footer-about-bee-3{
        transform:scale(0.5);
        left:20%;
        bottom:-11%;
    }
}
@media only screen and (max-width: 600px) and (orientation:portrait){
    .page-footer-about{
        height:25rem;
    }
    #page-footer-about-bee-3{
        transform:scale(0.5);
        left:20%;
        bottom:0%;
    }
}
@media only screen and (max-width: 768px) and (orientation:landscape){
    :root{
        font-size:12px;
    }
    body{
        padding-bottom:2rem;
        overflow-y:auto;
    }
    .body-r{
        height:calc(100vh - 8rem);
    }
    .current-guess{
        overflow-y:hidden;
        flex-wrap:wrap;
        margin-top:5rem;
        margin-bottom:4rem;
    }
    .current-guess > *{
        font-size:2rem;
    }
    .hex-holder{
        margin-top:1rem;
        height:55%;
        width:100%;
    }
    .hex-holder > * > *{
        font-size:2rem;
    }
    .guess-button-holder{
        margin-top:1rem;
    }
    .guessed-words-window-body{
        max-height:auto;
    }
    .main-page-body{
        min-height:auto;
        max-height:auto;
        margin-bottom:3rem;
    }
    .page-footer-howto-slide-text{
        font-size:0.65rem;
    }
    .page-footer-howto-slide{
        height:16rem;
        width:16rem;
    }
}
@media only screen and (max-height: 900px) and (orientation:landscape){
    body{
        padding-bottom:2rem;
        overflow-y:auto;
    }
    .hex-holder{
        min-height:20rem;
    }
    .body-r{
        min-height:35rem;
    }
}