/* COPYRIGHT 2022 THEHIGHERUPS-CLASSIFIED
WRITTEN FOR AND BY THEHIGHERUPS */
/**/
/**/
/**/
/**/
/**/

@import url("https://fonts.googleapis.com/css2?family=Gentium+Book+Basic&display=swap");
* {
    font-family: "Dongle", sans-serif;
    margin: 0;
    padding: 0;
}
@media only screen and (max-width: 1105px) {
    #GyJv {
        max-width: 100px;
    }
    #Nnusi {
        max-width: 100px;
    }
    #ZILb {
        max-width: 100px;
    }
    #NCXZe {
        font-size: 10px;
        max-width: 100px;
        max-height: 50px;
    }
    #MnFek {
        max-width: 100px;
    }
    #mafew {
        max-width: 100px;
    }
    #kUttp {
        max-width: 100px;
    }
}
@media only screen and (max-width: 1207px) {
    #bmPpJ {
        max-width: 50px;
    }
    #VotCT {
        visibility: hidden;
    }
    #VotCT::after {
        visibility: visible;
        content: "Promo Code:";
        margin-left: -75px;
        margin-right: 5px;
    }
    #xgGWr {
        max-width: 50px;
    }
    #BQEku {
        visibility: hidden;
    }
    #BQEku::after {
        visibility: visible;
        content: "Promo Code:";
        margin-left: -75px;
        margin-right: 5px;
    }
    #nmooc {
        visibility: hidden;
    }
    #nmooc::after {
        visibility: visible;
        content: "Promo Code:";
        margin-left: -75px;
        margin-right: 5px;
    }
}
@media only screen and (max-width: 915px) {
    div.UZDz {
        width: 70%;
    }
    #xy {
        display: none;
    }
    #eq {
        width: 90%;
        height: 530px;
    }
    #ZzNmm {
        display: none;
    }
}
@media only screen and (max-width: 640px) {
    div.UZDz {
        width: 100%;
    }
}
@media only screen and (max-width: 1376px) {
    #abtlt {
        font-size: 22px;
    }
    #lthbns {
        font-size: 22px;
    }
    #astbns {
        font-size: 22px;
    }
    #astbnch {
        font-size: 22px;
    }
    #scrtpro {
        font-size: 22px;
    }
    #pipepro {
        font-size: 22px;
    }
    #tbdNew {
        font-size: 22px;
    }
}
@media only screen and (max-width: 1400px) {
    #YUSZL {
        width: 320px;
        height: 220px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-top: 180px;
    }
}
@-webkit-keyframes secretBeans {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}
@keyframes secretBeans {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}
@-webkit-keyframes coolbeanspin {
    0% {
        /* opacity: 0; */
        -webkit-transform: rotate(-540deg) scale(2);
        transform: rotate(-540deg) scale(2);
    }

    100% {
        /* opacity: 1; */
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
}
@keyframes coolbeanspin {
    0% {
        opacity: 0;
        -webkit-transform: rotate(-540deg) scale(2);
        transform: rotate(-540deg) scale(2);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
}
@-webkit-keyframes muteAudio {
    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}
@keyframes muteAudio {
    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}
@-webkit-keyframes muteButtonDiss {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(-540deg) scale(0);
        transform: rotate(-540deg) scale(0);
    }
}
@keyframes muteButtonDiss {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(-540deg) scale(0);
        transform: rotate(-540deg) scale(0);
    }
}
@-webkit-keyframes muteButtonHover {
    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}
@keyframes muteButtonHover {
    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}
#woah {
    height: 100%;
    width: 100%;
    display: none;
    position: absolute;
    -webkit-animation: coolbeanspin 550ms linear 0s 1 alternate forwards;
    animation: coolbeanspin 550ms linear 0s 1 alternate forwards;
    z-index: 1000;
}
#woah img {
    margin-left: 50%;
    margin-right: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
#tHZb {
    height: 90%;
    width: 90%;
}
#NCXZe {
    width: 500px;
    height: 100px;
    font-size: 20px;
    border-color: transparent;
    border-radius: 5px;
}
#NCXZe:hover {
    border-color: black;
    border-width: 1px;
}
.noPrint {
    display: none;
    text-align: center;
    color: red;
}
@media print {
    .noPrint {
        display: block;
    }
    main {
        display: none;
    }
}
.EutJ {
    background-color: #2d6c9c;
}
/* old background color for the website // 2b65c2 */
/* 2d6c9c */
.zAgw {
    height: 50px;
    width: 100%;
    background-color: #fefefe;
    display: table;
}
#OUMU {
    margin-left: 5px;
    font-size: 35px;
    vertical-align: middle;
}
.SIgG {
    /* text-align: center; */
    /* background-color:#5250509f; */
    /* padding-left: 17px;
    padding-right: 5px; */
    border-radius: 10px;
    width: 9rem;
    cursor: pointer;
    /*
    font-size: 35px;
    text-shadow: 3px 3px 0 red, 6px 6px 0 blue, 9px 9px 0 green;
    width: 9rem;
    cursor: pointer;
    */
}
.hSty {
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
}
.pmkN {
    display: table;
    float: right;
}
.ZRpi {
    font-size: 33px;
    display: table-cell;
    vertical-align: middle;
    padding-right: 5px;
    padding-top: 7px;
    cursor: pointer;
}
.nxSs {
    padding-top: 50px;
    height: 50px;
    width: 100%;
    margin: 0 auto;
    display: table;
}
.coolbeansTitle {
    padding-top: 50px;
    height: 50px;
    width: 100px;
    margin: 0 auto;
    display: table;
}
.coolbeansTitle h1 {
    font-size: 55px;
    color: white;
    text-shadow: 0 -1px black, 0 1px black, -1px 0 black, 1px 0 black;
}
.JjQk {
    display: table-cell;
    vertical-align: middle;
}
.VxbT {
    color: rgb(138, 23, 23);
}
.zNJF {
    padding-top: 100px;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}
.UZDz {
    width: 50%;
    /* min-height: 1370px; */
    padding-block: 15px;
    height: auto; /* 1370px */
    margin: 0 auto;
    background-color: white;
    display: table;
    border-radius: 15px;
    /* border-radius: 1.75%; */
}
/* REMOVE 33px if annoucement banner is not therer*/
.sRwq {
    height: 33px;
    width: 100%;
    background-color: rgb(212, 212, 33); /* 212, 212, 33*/
    display: table;
}
.sRwq h2 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.AUwK {
    height: 250px;
    display: -ms-grid;
    display: grid;
    margin-top: 20px;
    background-color: #9c9c9c9f;
}
.AUwK:first-child {
    margin-top: 0;
}
.material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 1, "opsz" 48;
}
.material-icons,
.legendaryUser,
.material-symbols-rounded {
    user-select: none;
}
#HTwS {
    padding-left: 15px;
    padding-top: 50px;
    height: 150px;
    width: 120px;
}
.mSBm {
    padding-left: 145px;
    margin-top: -180px;
}
.mSBm > h3 {
    font-size: 32px;
}
#GyJv {
    font-size: 20px;
    width: 150px;
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-color: transparent;
}
.VomO {
    font-size: 15px;
}
.sadface {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 1, "opsz" 48;
}
#TSGI {
    margin-left: 5px;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    border-color: transparent;
    cursor: pointer;
}
#ZILb {
    border-color: transparent;
    border-radius: 5px;
}
#TSGI:hover {
    background-color: rgba(62, 62, 62, 0.26);
}
.MWlH {
    position: fixed;
    bottom: 0;
    left: 0;
}
#xy {
    padding-left: 5px;
    font-size: 35px;
}
.ItvYC {
    width: 75%;
    height: 1500px;
    margin: 0 auto;
    background-color: white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 3%;
}
.kgwim {
    font-size: 45px;
}
.bb {
    margin: 0 auto;
    width: 150px;
}
.beans {
    margin: 0 auto;
    height: 150px;
    width: 150px;
    font-size: 50px;
    border-color: transparent;
    border-radius: 100px;
    cursor: pointer;
}
.beans:hover {
    border-color: black;
    border-width: 1px;
}
#a,
#b {
    font-size: 40px;
    font-family: "Times New Roman", Times, serif;
    display: none;
}
#b::-moz-selection {
    color: red;
    background-color: default;
}
#b::selection {
    color: red;
    background-color: default;
}
.wFzPy {
    position: fixed;
    bottom: 40px;
    left: 10%;
    right: 10%;
    width: 70%;
    margin: 0 auto;
    padding: 5px 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: thistle;
    -webkit-animation: secretBeans 2s ease 0s infinite normal backwards;
    animation: secretBeans 2s ease 0s infinite normal backwards;
}
.PIwUC {
    font-size: 25px;
}
.TYVf {
    position: absolute;
    right: 5px;
}
.TYVf:hover {
    color: red;
}
#ZpIZv {
    background-color: transparent;
    margin: 0 auto;
    font-size: 40px;
    cursor: default;
}
.qRKDi {
    font-size: 25px;
    text-align: center;
}
.vDrFy {
    width: 35%;
    height: 500px;
    margin: 0 auto;
    border-radius: 15px;
    background-color: white;
    padding: 5px;
}
#gn {
    margin: 0 auto;
    width: 300px;
    height: 50px;
    padding-top: 5px;
}
#ng {
    width: 300px;
    height: 50px;
    font-size: 25px;
    border-radius: 5px;
}
.xokbk {
    display: -ms-grid;
    display: grid;
    text-align: center;
    margin: 0 auto;
    width: 500px;
}
.xokbk img {
    margin-left: auto;
    margin-right: auto;
}
#joker {
    margin-top: 15px;
    max-width: 600px;
    max-height: 450px;
}
#zcfbg {
    margin-top: 15px;
}
.EaLpb {
    display: none;
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 25px;
    right: 25px;
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 50%;
    -webkit-animation: muteAudio 2s ease 0s 1 normal forwards;
    animation: muteAudio 2s ease 0s 1 normal forwards;
}
#cwcyW {
    font-size: 25px;
    text-align: center;
    padding-top: 2px;
    cursor: pointer;
    border-radius: 50px;
}
#cwcyW:active {
    color: gray;
}
#cwcyW:hover {
    -webkit-animation: muteButtonHover 2s ease 0s infinite normal forwards;
    animation: muteButtonHover 2s ease 0s infinite normal forwards;
}
#cwcyW:active::-moz-selection {
    color: gray;
}
#cwcyW:active::selection {
    color: gray;
}
#cwcyW::-moz-selection {
    color: black;
}
#cwcyW::selection {
    color: black;
}
#YyfJm {
    display: none;
    font-size: 25px;
    text-align: center;
    padding-top: 2px;
    cursor: pointer;
    border-radius: 50px;
}
#YyfJm:active {
    color: gray;
}
#YyfJm:hover {
    -webkit-animation: muteButtonHover 2s ease 0s infinite normal forwards;
    animation: muteButtonHover 2s ease 0s infinite normal forwards;
}
#YyfJm:active::-moz-selection {
    color: gray;
}
#YyfJm:active::selection {
    color: gray;
}
#YyfJm::-moz-selection {
    color: black;
}
#YyfJm::selection {
    color: black;
}
#JUjmh {
    padding-left: 15px;
    padding-top: 50px;
    height: 155px;
    width: 140px;
}
#Nnusi {
    width: 150px;
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-color: transparent;
}
#bmPpJ {
    border-color: transparent;
    border-radius: 5px;
}
#mPHHJ {
    margin-left: 5px;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    border-color: transparent;
    cursor: pointer;
}
#bsgpw {
    margin-left: 20px;
}
#VotCT::before {
    display: none;
    visibility: hidden;
    content: "Promo Code: ";
}
#QNcYo {
    padding-left: 15px;
    padding-top: 50px;
    height: 150px;
    width: 120px;
}
#OCgmn {
    margin-left: 5px;
}
#MnFek {
    width: 150px;
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-color: transparent;
}
#xgGWr {
    border-color: transparent;
    border-radius: 5px;
}
#TpsPg {
    margin-left: 5px;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    border-color: transparent;
    cursor: pointer;
}
#hphez {
    padding-left: 15px;
    padding-top: 50px;
    height: 150px;
    width: 150px;
}
#zdsmk {
    margin-left: 35px;
}
#mafew {
    width: 150px;
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-color: transparent;
}
#uWnai {
    margin-left: 5px;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    border-color: transparent;
    cursor: pointer;
}
.nXaAS {
    display: flex;
    background-color: white;
    width: 70vw;
    height: 80vh;
    margin: 0 auto;
    margin-top: 25px;
    border-radius: 1.75%;
}
.imgcont {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    height: 100%;
    width: 25vw;
}
#sultb {
    width: 90%;
    height: 50vh;
}
.discpro {
    align-self: center;
    margin: 0 auto;
    background: gray;
    width: 60%;
    height: 55vh;
    border-radius: 10px;
    float: right;
    color: white;
}
.titl {
    width: 100%;
    height: 15%;
}
.titl h1 {
    padding-left: 15px;
    font-size: 40px;
}
.prodbody {
    font-size: 1.5vw;
    padding: 25px 0 0 15px;
}
.cashout {
    margin-top: 15px;
    width: 100%;
    height: 20%;
}
.coInner {
    height: 100%;
    width: 85%;
    margin: 0 auto;
}
.coInner h1 {
    font-size: 2vw;
}
.coInner button {
    font-size: 1.5vw;
    width: 15vw;
}
#limedi {
    font-size: 15px;
    padding-bottom: 5px;
    color: #fffb0f;
}
@media only screen and (max-width: 768px) {
    #sultb {
        height: 40vh;
    }
}
@media only screen and (max-width: 742px) {
    #NtysD {
        width: 100vw;
    }
    #localtext {
        font-size: 2.5vh;
    }
    #limedi {
        font-size: 11.75px;
    }
    #sultb {
        width: 25vw;
        margin-left: 45px;
    }
    #orderFull {
        font-size: 2.5vw;
        width: 25vw;
    }
}
@media only screen and (max-width: 686px) {
    div.discpro {
        height: 90%;
    }
}
@media only screen and (max-width: 477px) {
    #uitah {
        font-size: 25px;
    }
    div.prodbody {
        padding-top: 0;
    }
    #sultb {
        width: 30vw;
        height: 25vh;
        padding-right: 15px;
    }
}
@media only screen and (max-width: 425px) {
    #orderFull {
        font-size: 3.5vw;
    }
    #shoppingLogo {
        display: none;
    }
}
@media only screen and (max-width: 364px) {
    #NtysD {
        height: 90vh;
    }
    div.discpro {
        margin-right: 5px;
    }
}
@media only screen and (max-height: 586px) {
    #NtysD {
        height: 90vh;
    }
    div.discpro {
        height: 85%;
    }
}
@media only screen and (min-height: 672px) {
    div.titl {
        padding-bottom: 0;
        height: 50px;
    }
}
.localenhance {
    font-size: 20px;
}
#cbb {
    font-size: 30px;
}
#bnnrbtn {
    background: none;
    border-radius: 5px;
    border: 1px solid black;
    padding: 3px;
    font-size: 20px;
}
#bnnrbtn:hover {
    cursor: pointer;
}
#bnnrbtn:active {
    border: 1px solid rgb(255, 243, 243);
    color: rgb(255, 244, 244);
}
#orderFull {
    width: 150px;
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-color: transparent;
    color: black;
}
#orderFull:hover {
    background-color: rgba(62, 62, 62, 0.26);
    color: white;
}
#orderFull:active {
    border: 1px solid black;
}
.outofstock {
    color: red;
    font-weight: bold;
}
.oosbutton {
    cursor: default !important;
}
.newproducttag {
    color: rgb(85, 85, 85);
    /* background-color: gold; */
    padding: 0 5px 0 5px;
    border-radius: 50px;
    font-size: 30px;
    /* font-size: 25px; */
    vertical-align: middle;
}
.oosbtag {
    background: rgb(226, 3, 3);
    color: white;
    padding: 0 5px 0 5px;
    border-radius: 50px;
    font-size: 20px;
}
#MOJqq {
    padding-left: 15px;
    padding-top: 50px;
    height: 150px;
    width: 150px;
}
#NUtma {
    padding-left: 15px;
    padding-top: 50px;
    height: 150px;
    width: 150px;
}
#svFJg {
    margin-left: 35px;
}
#MKVNt {
    margin-left: 35px;
}
#kUttp {
    width: 150px;
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-color: transparent;
}
#HNnfn {
    width: 150px;
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-color: transparent;
}
.goHome {
    margin-top: 15px;
    margin-left: 15px;
    border-radius: 50px;
    border: 1px solid black;
    width: 300px;
    font-size: 25px;
    cursor: pointer;
}
.goHome:hover {
    transform: translateY(-5px);
    outline: 1px solid white;
}
.goHome > span {
    vertical-align: middle;
    font-size: 25px;
}
/* REMOVE 33px from top if anncoument banner not therer*/
.timeCont {
    border-radius: 50px;
    background-color: white;
    width: 200px;
    position: absolute;
    top: 350px;
    left: 15px;
    text-align: center;
}
@keyframes slideUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100px);
    }
}
@keyframes slideDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100px);
    }
}
.scrollUp {
    animation: slideUp 1s ease 0s 1 normal forwards;
}
.scrollDown {
    animation: slideDown 1s ease 0.25s 1 normal forwards;
}

.accountBody {
    width: 500px;
    height: 450px;
    margin-top: 50px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 1.75%;
}
#accountCreateBody {
    width: 500px;
    height: 555px;
    margin-top: 50px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 1.75%;
}
.accountHeader {
    text-align: center;
    font-size: 50px;
}
.accountLabel {
    font-size: 35px;
}
.accountForm {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 25px;
}
#accountEmail {
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* 'Courier New', Courier, monospace; Verdana, Geneva, Tahoma, sans-serif;*/
    width: 90%;
    height: 1em;
    font-size: 20px;
    background-color: #ccc;
    border: 1px solid black;
    border-radius: 5px;
    padding: 2px;
}
#editDisplayName {
    font-family: "Courier New", Courier, monospace;
}
.accountInput {
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* 'Courier New', Courier, monospace; */
    width: 90%;
    height: 1em;
    font-size: 20px;
    background-color: #ccc;
    border: 1px solid black;
    border-radius: 5px;
    padding: 2px;
}
.disabledButton {
    cursor: not-allowed;
    background-color: #ccc;
}
.disabledButton:hover {
    background-color: #ccc !important;
}
.accountButton {
    height: 40px;
    padding-inline: 15px;
    font-size: 25px;
    background-color: #ccc;
    border: 1px solid black;
    border-radius: 5px;
}
.accountButton:hover {
    background-color: #ddd;
}
.accountButton:focus {
    background-color: #ddd;
}
.accountButton:active {
    background-color: white;
}
#accountLogin {
    margin-top: 2rem;
}
#accountCreate {
    margin-top: 1rem;
}
.errText,
.createErrText,
.settingsErrText {
    height: 30px;
    color: red;
    font-size: 25px;
}
.createBody {
    height: 650px;
}
.accountAction {
    border: none;
    text-decoration: underline;
    background: none;
}
.accountAction:hover {
    cursor: pointer;
}
.logOutButton {
    width: 320px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logout:hover {
    cursor: pointer;
    transform: translateY(-5px);
    color: white;
    border-bottom: 5px solid black;
    background-color: #939292;
}
.logout:active {
    transform: translate(0);
    border-bottom: 2px solid black;
}
.logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    font-size: 30px;
    border: none;
    background: white;
    border-radius: 50px;
    /* text-decoration: underline; */
    transition: 250ms ease-in-out;
}
.logout p {
    text-decoration: underline;
}
.logoutSpan {
    padding-inline: 5px;
    text-decoration: none !important;
}
.accountDetails {
    position: relative;
    width: 500px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    /* border-radius: 1.75%; */
    border-radius: 15px;
}
.accountTitle {
    font-size: 45px;
}
#userID {
    position: absolute;
    bottom: 5px;
}
.deleteAccountButton {
    position: absolute;
    color: red;
    font-size: 20px;
}
@media only screen and (max-width: 500px) {
    .accountBody {
        width: 100vw;
    }
    .accountHeader {
        font-size: 40px;
    }
    .accountDetails {
        width: 100vw;
    }
    .accountInput {
        width: 100%;
    }
    #accountBody {
        width: 100vw;
    }
    #accountCreateBody {
        width: 100vw;
    }
    #accountForm {
        width: 100%;
    }
    #accountButton {
        width: 100%;
    }
    .settingsTitle {
        font-size: 33px;
    }
}
@media only screen and (max-height: 450px) {
    #accountBody {
        height: 100vw;
    }
    .accountBody {
        width: 100vw;
    }
    .accountDetails {
        width: 100vw;
    }
}
.noJS {
    width: 100vw;
    background-color: rgb(185, 42, 17);
    text-align: center;
    position: sticky;
    top: 0px;
}
.noJsHeader {
    font-size: 33px;
}

.photoHeader {
    width: 100%;
    height: 250px;
    /* background-image: url(/assets/images/shop-background.jpeg); */
    background-color: gray;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    filter: brightness(100%);
    align-items: center;
    flex-direction: column;
    border-radius: 0 0 7px 7px;
    justify-content: center;
}
.photoOne {
    background-image: url(/assets/images/shop-background.jpeg);
}
.photoTwo {
    background-image: url("https://cdn.thehigherups.org/thehigherups-shop-background/billy-huynh-W8KTS-mhFUE-unsplash.webp");
}
/* .photoTwo h1,
.photoThree h1,
.photoFour h1,
.photoFive h1,
.photoSeven h1{
    color: rgb(92, 92, 92);
    text-shadow: 0 -1px white, 
    0 1px white,
    -1px 0 white,
    1px 0 white;
} */
.photoNine h1 {
    color: white;
    text-shadow: 0 -2px black, 0 2px black, -2px 0 black, 2px 0 black;
}
.photoNine span {
    color: black;
    text-shadow: 0 -1px white, 0 1px white, -1px 0 white, 1px 0 white;
}
.photoThree {
    background-image: url("https://cdn.thehigherups.org/thehigherups-shop-background/dennis-kummer-52gEprMkp7M-unsplash.webp");
}
.photoFour {
    background-image: url("https://cdn.thehigherups.org/thehigherups-shop-background/john-towner-3Kv48NS4WUU-unsplash.webp");
}
.photoFive {
    background-image: url("https://cdn.thehigherups.org/thehigherups-shop-background/nasa-1lfI7wkGWZ4-unsplash.webp");
}
.photoSix {
    background-image: url("https://cdn.thehigherups.org/thehigherups-shop-background/nasa-Q1p7bh3SHj8-unsplash.webp");
}
.photoSeven {
    background-image: url("https://cdn.thehigherups.org/thehigherups-shop-background/nasa-_SFJhRPzJHs-unsplash.webp");
}
.photoEight {
    background-image: url("https://cdn.thehigherups.org/thehigherups-shop-background/nick-iliasov-i0fCUofGjV8-unsplash.webp");
}
.photoNine {
    background-image: url("https://cdn.thehigherups.org/thehigherups-shop-background/zac-ong-JHN1-mpgXjo-unsplash.webp");
}
.photoText {
    transition: 0.2s all;
    font-size: 55px;
    text-shadow: 0 -1px white, 0 1px white, -1px 0 white, 1px 0 white;
}
.underline {
    height: 10px;
    width: 220px;
    padding: 0;
    margin: -15px;
    background-color: rgb(126 163 199);
}
.headerScroll {
    position: fixed;
}
.bottomText {
    font-size: 18px;
    color: #bbb;
}
.paleyCont {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 25px;
    right: 25px;
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 50%;
    -webkit-animation: muteAudio 2s ease 0s 1 normal forwards;
    animation: muteAudio 2s ease 0s 1 normal forwards;
}
.paleyButton {
    display: grid;
    font-size: 25px;
    text-align: center;
    padding-top: 2px;
    cursor: pointer;
    border-radius: 50px;
}
.paleyButton:active {
    color: gray;
}
.paleyButton:hover {
    -webkit-animation: muteButtonHover 2s ease 0s infinite normal forwards;
    animation: muteButtonHover 2s ease 0s infinite normal forwards;
}
.paleyButton:active::-moz-selection {
    color: gray;
}
.paleyButton:active::selection {
    color: gray;
}
.paleyButton::-moz-selection {
    color: black;
}
.paleyButton::selection {
    color: black;
}
.realFooter {
    background: #123456;
    color: #efeadd;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    padding-bottom: 1.5em;
}
.realFooter a {
    padding-inline: 15px;
    color: #efeadd;
    text-shadow: #efeadd;
    /* text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; */
}
.realFooter a:visited {
    color: inherit;
}
.tos {
    height: 99vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #123456;
    border-radius: 0 0 7px 7px;
    flex-direction: column;
    color: white;
}
.hr {
    width: 90%;
    margin-block: 8px;
    height: 1px;
    border: 1px solid #ccc;
}
.tosDiv {
    text-align: center;
}
.tosTitle {
    font-size: 25px;
    font-family: "Gentium Book Basic", serif;
}
.tosNorm {
    font-size: 20px;
    font-family: "Gentium Book Basic", serif;
}
.privCont {
    width: 50%;
    height: 6500px;
    border: none;
}
.tosCont {
    width: 50%;
    height: 3300px;
    border: none;
}
.offLine {
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: red;
    color: #fefefe;
}
.recon {
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    position: fixed;
    background-color: gray;
    filter: opacity(90%);
    width: 100vw;
    height: 100vh;
}
.reloadSpin {
    width: 45px;
    height: 45px;
    font-size: 45px;
    animation-name: spin;
    animation-duration: 1.5s;
    animation-delay: 100ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.lineoff {
    position: absolute;
    top: 0px;
    height: 5px;
    width: 100%;
    border-radius: 0 0 100% 100%;
    font-size: 500px;
    animation-name: dfd;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes dfd {
    0% {
        background-color: paleturquoise;
    }
    10% {
        background-color: orange;
    }
    20% {
        background-color: yellow;
    }
    30% {
        background-color: green;
    }
    40% {
        background-color: purple;
    }
    50% {
        background-color: blue;
    }
    60% {
        background-color: lightblue;
    }
    70% {
        background-color: red;
    }
    80% {
        background-color: darkcyan;
    }
    90% {
        background-color: ghostwhite;
    }
    100% {
        background-color: dimgrey;
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.product {
    background-color: white;
    width: 850px;
    min-height: 500px;
    height: auto;
    margin-top: 15px;
    margin-bottom: 5rem;
    margin-inline: auto;
    display: flex;
    position: relative;
    flex-direction: row;
    padding: 10px;
    border-radius: 15px;
}
#thankyou {
    position: absolute;
    top: 0;
    left: 0;
    rotate: -32deg;
    animation: scaleUpDown 2s ease-in-out infinite;
}
@keyframes scaleUpDown {
    0% {
        transform: scale(100%);
    }
    50% {
        transform: scale(10%);
    }
    100% {
        transform: scale(100%);
    }
}
.product-image {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 40%;
    margin-right: 10px;
    text-align: center;
    justify-items: center;
    align-self: center;
    align-items: center;
    float: left;
}
#listen-to-whistle {
    height: 40px;
    font-size: 20px;
    padding-inline: 5px;
    background-color: hsl(0, 0%, 80%);
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
}
.product-image img {
    margin: 0 auto;
    border-radius: 20px;
}
.product-description {
    display: flex;
    flex-direction: column;
    float: right;
    width: 60%;
    text-align: center;
    margin-block: auto;
}
.product-header {
    font-size: 40px;
}
.order-placed-header {
    rotate: -15deg;
    animation: orderJello 1.5s linear 0s infinite normal none;
}
@keyframes orderJello {
    0% {
        transform: scale(1);
        rotate: 0deg;
        color: black;
    }
    25% {
        rotate: -15deg;
        color: palevioletred;
    }
    50% {
        transform: scale(0.5);
        rotate: 0deg;
        color: purple;
    }
    75% {
        rotate: 15deg;
        color: lightseagreen;
    }
    100% {
        transform: scale(1);
        rotate: 0deg;
        color: black;
    }
}
.product-about {
    font-size: 28px; /* OLD 22px */
}
#buyLethalBeans {
    width: 100%;
    font-size: 25px;
}
#buyAssaultBench {
    width: 100%;
    font-size: 25px;
}
@media only screen and (max-width: 860px) {
    .product {
        height: auto;
        width: 97vw;
        flex-direction: column;
        padding: 5px;
    }
    #lethalBeansImage {
        width: 50px;
        height: 75px;
    }
    .product-description {
        justify-self: center;
        align-self: center;
        width: 100%;
    }
    .product-header {
        font-size: 45px;
    }
    .product-about {
        font-size: 30px;
    }
    #aimg {
        align-self: center !important;
    }
    .product-image {
        width: 50%;
    }
}
@media only screen and (max-width: 425px) {
    .product-image {
        width: 75%;
    }
}
.productButton {
    height: 40px;
    font-size: 25px;
    background-color: hsl(0, 0%, 80%);
    border: 1px solid black;
    border-radius: 5px;
}
.productButton:hover {
    background-color: hsl(0, 0%, 85%);
    cursor: pointer;
}
.productButton:active {
    transform: none;
}
.eCont {
    height: 30px;
    width: 100%;
}
#productImage {
    max-width: 99%;
}
.priceContainer {
    text-align: left;
}
.checkoutLabel {
    font-size: 25px;
    padding-left: 5%;
    float: left;
    text-align: left;
}
.checkoutInput {
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* 'Courier New', Courier, monospace; */
    width: 90%;
    font-size: 22px;
    margin: 12px;
}
.checkoutInput:disabled {
    cursor: not-allowed;
}
#checkoutProduct {
    justify-content: center;
    height: auto;
}
.noLink {
    color: inherit;
}
.noLink:visted {
    color: inherit;
}
.inAs {
    position: absolute;
    top: 45px;
    right: 5px;
    font-size: 21px;
    display: block;
}
.inAs * {
    display: inline;
}
.inAs button {
    margin-left: 5px;
    background: none;
    border: none;
    font-size: 18px;
    text-decoration: underline;
}
.inAs button:hover {
    cursor: pointer;
}
#signout {
    display: inline;
}
#checkOne {
    margin-left: 1em;
}
.loader-icon {
    animation: spin 500ms infinite linear;
}
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: black;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Offline Loading */
.offline-loading {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.offline-loading div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: offline-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}
.offline-loading div:nth-child(1) {
    animation-delay: -0.45s;
}
.offline-loading div:nth-child(2) {
    animation-delay: -0.3s;
}
.offline-loading div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes offline-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.accountWarning {
    position: absolute;
    bottom: 40px;
}
.accountWarning::before {
    content: "Are You Sure You Want To Do This? \A This Action Is Permenant";
    display: block;
    position: absolute;
    bottom: 0;
    left: -50px;
    color: white;
    border-radius: 5px;
    background-color: #888;
    padding-inline: 0.75em;
    white-space: pre;
    transform: scale(0);
    transition: transform ease 200ms, bottom ease 200ms;
}
.accountWarning:hover::before {
    transform: scale(1);
    bottom: 100%;
}
.warningText {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 10px;
}
.super {
    color: white;
    content: "";
}
@media only screen and (max-width: 500px) {
    .super {
        visibility: hidden;
        position: relative;
    }
    .super::after {
        visibility: visible;
        content: "CoolBeans";
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}
.aboutCont {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    bottom: 15px;
    left: 15px;
    opacity: 80%;
    width: 35px;
    height: 35px;
    background-color: rgb(53, 53, 53);
}
.aboutCont span {
    color: gray;
    font-size: 30px;
}
.aboutCont span:hover {
    cursor: pointer;
}
.legendaryUser {
    color: rgb(206, 176, 5);
}
.accountOrders {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}
.orderText {
    font-size: 25px;
}
.moreSettings {
    margin-bottom: 5em;
}
#SGfgf {
    padding-left: 15px;
    padding-top: 50px;
    height: 150px;
    width: 150px;
}
#JKJrr {
    margin-left: 35px;
}
#MKkhn {
    width: 150px;
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-color: transparent;
}
.ring {
    --uib-size: 40px;
    --uib-speed: 2s;
    --uib-color: white;

    height: var(--uib-size);
    width: var(--uib-size);
    vertical-align: middle;
    transform-origin: center;
    animation: rotate var(--uib-speed) linear infinite;
}
.ring circle {
    fill: none;
    stroke: var(--uib-color);
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
}

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

@keyframes stretch {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dashoffset: -124px;
    }
}
.thuMenu {
    animation: beansTolve 0.25s;
    position: absolute;
    left: 0;
    top: -100px;
    width: 350px;
    padding-left: 15px;
    background-color: rgb(33, 33, 33);
    border-radius: 0 15px 15px 0;
    color: white;
}
@keyframes beansTolve {
    0% {
        left: -500px;
    }
    100% {
        left: -0;
    }
}
.thuMenu div:first-of-type {
    border-top: none;
    font-weight: bold;
}
.thuMenu div:first-of-type p {
    font-size: 25px;
}
.thuMenu div {
    border-top: 1px solid white;
}
.thuMenu p {
    font-size: 20px;
    cursor: pointer;
}
.thuMenu p:first-of-type {
    cursor: default;
}
.thuMenu div:nth-child(2) p {
    cursor: pointer;
}
.thuMenu div:nth-child(3) p {
    color: rgb(199, 0, 0);
    cursor: pointer;
}
.alert {
    position: relative;
}
.alert:hover {
    animation: alertHover 1s ease 0s 1 normal forwards;
}
.tolve {
    position: absolute;
    overflow-y: scroll;
    top: 50px;
    right: 0px;
    background-color: gray;
    border: 1px solid black;
    width: 300px;
    height: auto;
    max-height: 420px;
    border-radius: 5px 0 0 5px;
    z-index: 1000;
}
.alertBody {
    width: 100%;
}
.alertBody .alertTitle {
    text-align: center;
    font-size: 25px;
}
.alertBody .alertText {
    padding-left: 2px;
    font-size: 20px;
}
.alertBody .alertDate {
    padding-left: 2px;
}
.tolve h1 {
    text-align: center;
}
.tHidden {
    visibility: hidden;
}
.hidden {
    display: none;
}
.settingsToggle {
    transition: all 0.2s;
}
@keyframes alertHover {
    0%,
    100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(-5px) rotate(6deg);
    }

    30% {
        transform: translateX(5px) rotate(-6deg);
    }

    45% {
        transform: translateX(-5px) rotate(3.6deg);
    }

    60% {
        transform: translateX(5px) rotate(-2.4deg);
    }

    75% {
        transform: translateX(-5px) rotate(1.2deg);
    }
}
.displayNone {
    display: none;
}
#alertClose {
    font-size: 50px;
    max-height: 1px;
    position: absolute;
    top: 0;
    right: 0;
    user-select: none;
    transition: color 50ms;
}
#alertClose:hover {
    color: rgb(138, 23, 23);
}
#testSettingsAlert {
    width: 100%;
    background-color: red;
    color: white;
    padding: 8px;
    font-size: 20px;
    white-space: normal;
    overflow-y: hidden;
}
/* INSERT NAV HERE VVV*/
.lockdown {
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    background-color: red;
    z-index: 500;
    opacity: 0.75;
}
.lockdownFlash {
    background-color: blue !important;
}
.lockdown div {
    width: 500px;
    height: 100px;
    font-size: 32px;
    color: white;
    text-align: center;
    backdrop-filter: saturate(20%);
}
#sadImage {
    animation: spin 1.5s infinite linear;
}
.fofCont {
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(5px);
    background-color: rgba(128, 128, 128, 0.5);
}
.fofAlert {
    background-color: gray;
    width: 300px;
    height: 200px;
    z-index: 1000;
}
.fofAlert p {
    font-size: 50px;
}
.h1-font {
    font-size: 32px;
}
.h2-font {
    font-size: 24px;
}
.h3-font {
    font-size: 18.72px;
}
.h4-font {
    font-size: 16px;
}
.h5-font {
    font-size: 13.28px;
}
.h6-font {
    font-size: 10.72px;
}
.link-button {
    background-color: rgb(238, 238, 238);
    color: black;
    text-decoration: none;
    padding: 5px 25px !important;
}
.cool-beans {
    color: #fffb0f;
    font-size: 22px;
}
.background-adjust {
    background-color: #7f7d7d;
    border-radius: 50px;
    padding-inline: 5px;
}
.container {
    width: 60%;
    min-height: 500px;
    height: auto;
    background-color: white;
    margin-inline: auto;
    margin-block: 5rem;
    border-radius: 15pt;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-evenly;
    padding-block: 15pt;
}
.productDisplay {
    background-color: #9c9c9c9f;
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 500px;
    max-width: 100%;
    display: flex;
    grid-template-columns: 30% 70%;
    border-block: 1px solid black;
}
.productDisplayText {
    font-size: 20px;
}
.productDisplayImage {
    max-width: 100%;
    width: 30%;
    max-height: 100%;
    float: left;
    display: grid;
    padding-block: 5px;
}
.productDisplayImage img {
    max-height: 100%;
    height: 250px;
    width: auto;
    max-height: 80%;
    max-width: 70%;
    margin-inline: auto;
    border-radius: 5pt;
}
.productDisplayAbout {
    float: right;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.productDisplayTitle {
    font-size: 32px;
}
.productDisplayButton {
    width: 50%;
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    color: black;
}
@media only screen and (max-width: 1050px) {
    .container {
        width: 100%;
    }
    .timeCont {
        left: 50%;
        transform: translate(-50%, 0);
        top: 475px !important;
        width: 100%;
        border-radius: 10pt;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1em;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.75);
        border: 1px solid rgb(0, 0, 0);
        box-shadow: 0 0 5px 5px #9c9c9c;
    }
}
@media only screen and (max-width: 550px) {
    .productDisplay {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: space-evenly;
        gap: 1.5rem;
    }
    .productDisplayImage {
        width: 100%;
    }
    .productDisplay .productDisplayButton {
        margin: 0 auto;
        margin-bottom: 5px;
        width: 90%;
    }
    .productDisplayAbout {
        flex-direction: column;
        width: 100% !important;
    }
}
@media only screen and (max-width: 1440px) {
    .productDisplayImage img {
        height: 200px;
        width: auto;
        max-height: 100%;
        max-width: 70%;
    }
}
.productSelection {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
}
.productSelection input {
    width: 75%;
    height: 25px;
    appearance: none;
    background-color: white;
    border: 1px solid gray;
    margin: 5px;
    position: relative;
    border-radius: 2pt;
    cursor: pointer;
}
.productSelection input:checked {
    background-color: hsl(0, 0%, 80%);
    box-shadow: 1px 2px 20px hsl(0, 0%, 65%);
}
.productSelection input[data-version="regular"]::after {
    content: "Regular Edition";
}
.productSelection input[data-version="pocket"]::after {
    content: "Pocket Edition";
}
.productSelection input[disabled] {
    cursor: not-allowed !important;
}
.productSelection input::after {
    position: absolute;
    font-size: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.alignMiddle {
    vertical-align: middle !important;
}
#aimg {
    align-self: flex-start;
}
span[data-help="telescope-glass"] {
    font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 200, "opsz" 48;
    position: relative;
}
span[data-help="telescope-glass"]::before {
    transition: opacity 0.2s ease-in-out;
    content: "Click For More Information";
    font-family: "Dongle", sans-serif;
    position: absolute;
    top: 105%;
    left: -305%;
    opacity: 0;
    background-color: hsl(0, 0%, 75%);
    border-radius: 15pt;
    padding: 5px;
}
span[data-help="telescope-glass"]:hover::before {
    opacity: 1;
}
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}
.background {
    position: relative;
    width: 100%;
    height: 250px;
    background: #3e6c98;
    overflow: hidden;
}
.background h1,
.background .underline {
    z-index: 90;
    -webkit-transform: translate3d(0, 0, 1px);
    transform: translate3d(0, 0, 1px);
}
.background span {
    width: 20vmin;
    height: 20vmin;
    border-radius: 20vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 45;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.background span:nth-child(0) {
    color: #d83945;
    top: 6%;
    left: 81%;
    animation-duration: 53s;
    animation-delay: -29s;
    transform-origin: 21vw 19vh;
    box-shadow: 40vmin 0 5.687426280021054vmin currentColor;
}
.background span:nth-child(1) {
    color: #96c850;
    top: 48%;
    left: 47%;
    animation-duration: 28s;
    animation-delay: -35s;
    transform-origin: 8vw -21vh;
    box-shadow: 40vmin 0 5.805686413975896vmin currentColor;
}
.background span:nth-child(2) {
    color: #fa6582;
    top: 30%;
    left: 76%;
    animation-duration: 10s;
    animation-delay: -42s;
    transform-origin: -14vw 4vh;
    box-shadow: -40vmin 0 5.73030962038575vmin currentColor;
}
.background span:nth-child(3) {
    color: #fa6582;
    top: 77%;
    left: 22%;
    animation-duration: 46s;
    animation-delay: -37s;
    transform-origin: 10vw 12vh;
    box-shadow: 40vmin 0 5.028230196787801vmin currentColor;
}
.background span:nth-child(4) {
    color: #96c850;
    top: 68%;
    left: 79%;
    animation-duration: 46s;
    animation-delay: -39s;
    transform-origin: -14vw 15vh;
    box-shadow: -40vmin 0 5.99586487061785vmin currentColor;
}
.background span:nth-child(5) {
    color: #f099f0;
    top: 90%;
    left: 82%;
    animation-duration: 50s;
    animation-delay: -25s;
    transform-origin: -14vw 5vh;
    box-shadow: 40vmin 0 5.850295003435043vmin currentColor;
}
.background span:nth-child(6) {
    color: #f099f0;
    top: 94%;
    left: 53%;
    animation-duration: 43s;
    animation-delay: -6s;
    transform-origin: -11vw -1vh;
    box-shadow: -40vmin 0 5.888734443559752vmin currentColor;
}
.background span:nth-child(7) {
    color: #d83945;
    top: 51%;
    left: 91%;
    animation-duration: 46s;
    animation-delay: -14s;
    transform-origin: -12vw -19vh;
    box-shadow: 40vmin 0 5.902842016506298vmin currentColor;
}
.background span:nth-child(8) {
    color: #d83945;
    top: 71%;
    left: 28%;
    animation-duration: 31s;
    animation-delay: -40s;
    transform-origin: -19vw -12vh;
    box-shadow: 40vmin 0 5.67156345328984vmin currentColor;
}
.background span:nth-child(9) {
    color: #96c850;
    top: 99%;
    left: 97%;
    animation-duration: 36s;
    animation-delay: -49s;
    transform-origin: -4vw -6vh;
    box-shadow: 40vmin 0 5.711271823743765vmin currentColor;
}
.background span:nth-child(10) {
    color: #f099f0;
    top: 38%;
    left: 65%;
    animation-duration: 6s;
    animation-delay: -18s;
    transform-origin: 16vw 18vh;
    box-shadow: -40vmin 0 5.239200613842784vmin currentColor;
}
.background span:nth-child(11) {
    color: #f099f0;
    top: 38%;
    left: 48%;
    animation-duration: 6s;
    animation-delay: -33s;
    transform-origin: 6vw -1vh;
    box-shadow: -40vmin 0 5.363903251289825vmin currentColor;
}
.background span:nth-child(12) {
    color: #d83945;
    top: 44%;
    left: 85%;
    animation-duration: 35s;
    animation-delay: -20s;
    transform-origin: 19vw -6vh;
    box-shadow: 40vmin 0 5.607392919648485vmin currentColor;
}
.background span:nth-child(13) {
    color: #d83945;
    top: 89%;
    left: 86%;
    animation-duration: 30s;
    animation-delay: -7s;
    transform-origin: -14vw -4vh;
    box-shadow: -40vmin 0 5.2224743836603835vmin currentColor;
}
.background span:nth-child(14) {
    color: #fa6582;
    top: 40%;
    left: 4%;
    animation-duration: 55s;
    animation-delay: -4s;
    transform-origin: -7vw 7vh;
    box-shadow: -40vmin 0 5.404205634890216vmin currentColor;
}
.background span:nth-child(15) {
    color: #d83945;
    top: 32%;
    left: 33%;
    animation-duration: 25s;
    animation-delay: -45s;
    transform-origin: -2vw -19vh;
    box-shadow: 40vmin 0 5.710719807121846vmin currentColor;
}
.background span:nth-child(16) {
    color: #fa6582;
    top: 12%;
    left: 41%;
    animation-duration: 36s;
    animation-delay: -35s;
    transform-origin: -7vw -1vh;
    box-shadow: -40vmin 0 5.59638306306595vmin currentColor;
}
.background span:nth-child(17) {
    color: #d83945;
    top: 79%;
    left: 3%;
    animation-duration: 26s;
    animation-delay: -24s;
    transform-origin: 2vw -19vh;
    box-shadow: -40vmin 0 5.352572295767983vmin currentColor;
}
.background span:nth-child(18) {
    color: #96c850;
    top: 58%;
    left: 33%;
    animation-duration: 55s;
    animation-delay: -2s;
    transform-origin: -22vw -3vh;
    box-shadow: 40vmin 0 5.6070052363338245vmin currentColor;
}
.background span:nth-child(19) {
    color: #96c850;
    top: 71%;
    left: 29%;
    animation-duration: 15s;
    animation-delay: -14s;
    transform-origin: -23vw -17vh;
    box-shadow: -40vmin 0 5.72908110893469vmin currentColor;
}
#christmas {
    width: 100vw;
    position: absolute;
    top: 90px;
    height: 1000px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 100;
}
.productRemoved {
    background-color: rgb(242, 77, 77);
    padding-inline: 0.25rem;
    padding-block: 0.5rem;
    border-radius: 10rem;
    color: white;
    text-align: center;
    margin-right: 1rem;
    font-size: 1.25rem;
}