body {
    margin: 0px;
    font-size: 2vh;
    user-select: none;
    font-family: 'Rock Salt', sans-serif;
    filter: brightness(1.0) blur(0px);
    transition: .1s;
    touch-action: manipulation;
    color: hsl(345deg 100% 47%);
    text-shadow: black 0px 0px 15px;
    overflow: hidden;
    font-weight: bold;
}

body.flash {
    filter: brightness(1.10) blur(3px);
}

@keyframes pulsate {
    0%, 100% {
        filter: brightness(1.0) hue-rotate(0deg);
    }
    50% {
        filter: brightness(1.10) blur(1px) hue-rotate(10deg);
    }
}

body.flash2 {
    animation: pulsate 1s infinite;
}



#moneypouchImg {
    animation: backgroundanim 5s infinite;
}


#global-game-stats.hidden1 {
    display: none;
}



#statsdivcontainer2.hidden1 {
    display: none;
}
#statsdivcontainer2 {
    display:block;
}

#hidebuttonglobalimg2 {
    width: 1.5em;
    max-width: 50px;
    padding: 3px 10px;
    background-color: #9f979f88;
    border-radius: 5px;
}


#global-game-stats {
    display:block;
}



.td2 {
    width: 10%;
}


#statsdivcontainer {
    padding-top:2px;
    border-top:1px solid black;
}

#hidebuttonglobal2 {
    position: fixed;
    left: 50%;
    bottom: 6%;
    z-index: 999999999999;
    transform: translate(-50%);
}

#hidebuttonglobalimg {
    width: 2em;
    max-width: 50px;
    padding: 3px 10px;
    background-color: #9f979f21;
    border-radius: 5px;
}

#helpimage1, #helpimage2, #helpimage3, #helpimage4, #helpimage5 {
    border-radius: 12px;
    margin-bottom: 35px;
}

#helpheadline1, #helpheadline2, #helpheadline3, #helpheadline4, #helpheadline5 {
    color: black;
    font-size: 30px;
}

#helptextcontent1, #helptextcontent2, #helptextcontent3, #helptextcontent4, #helptextcontent5 { 
text-shadow: rgba(0, 0, 0, 0.102) 0 0 5px;
font-size: 20px;
color: black;
}

#statsdivcontainer2 table {
    margin: auto;
}

#statsdivcontainer2  {
    padding-bottom: 2px;
    max-height: 250px;
    height: 12vh;
    overflow-y: scroll;
}


@keyframes shrink {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(238, 255, 0, 0.23);
    pointer-events: none;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.076);
    animation: shrink 2s forwards;
}



.shrink-animation {
    animation: shrink 2s forwards;
}














@keyframes backgroundanim {
    0%, 100% { transform: scale(1.4) rotate(5deg); }
    33% { transform: scale(1.8) rotate(2deg); }
    66% { transform: scale(1.6) rotate(-5deg); }
}

@keyframes backgroundanim2 {
    0%, 100% { transform: scale(1) translateY(0px) rotate(0deg); }
    66% { transform: scale(1.1) translateY(-10px) rotate(0deg); }
}



@keyframes bonusanim {
    0%, 100% { transform: scale(1) rotate(5deg); }
    33% { transform: scale(1.2) rotate(2deg); }
    66% { transform: scale(1.3) rotate(-5deg); }
}


#daysplayedthisweek {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.bonuspickup1 img, .bonuspickup2 img, .bonuspickup3 img {
    width: 5em;
    height: 5em;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    animation: logoglow 6s infinite;
}



#pickupcontainer {
    overflow: hidden;
    width: 100%;
    height: 100%;
}


.bonuspickup1, .bonuspickup2, .bonuspickup3 {
    opacity: 100%;
    transition: .5s;
    width: 5em;
    height: 5em;
    position: absolute;
    z-index: 10000000;
    animation: bonusanim 1s infinite;
    border-radius: 100%;
    box-shadow: rgba(255, 255, 255, 0.139) 0px 0px 50px;
    padding: 15px;
    overflow: hidden;
    scale:1;
    rotate:0deg;
}





.bonuspickup1.hidden, .bonuspickup2.hidden, .bonuspickup3.hidden {
opacity: 0%;
scale:0;
transition: .5s;
rotate:360deg;
}

#leaderboard-menu, #settings-menu, #help-menu {
    display: block;
    background: white;
    border-radius: 5px;
    width: 90%;
    position: absolute;
    top: 3vh;
    left: 3vh;
    margin: auto;
    padding: .5em;
    box-sizing: border-box;
    font-family: arial;
    font-weight: normal;
    text-shadow: none;
    text-align: left;
    box-shadow: 0px 0px 20px black;
    overflow-y: scroll;
    max-height: 80%;
    font-size: 1em;
    z-index:999999;
}


#background {
    position: absolute;
    margin: auto;
    overflow: hidden;
    padding: 50px;
    z-index: -9999999;
    height:-webkit-fill-available;
  }
  
  #background img {
    position: relative;
      width: 100%;
      margin: auto;
      z-index: -999999999999;
      filter: blur(2px) brightness(.6);
      animation: backgroundanim 60s infinite;


  }

  
h1 {
    display: inline;
}

#logo img {
    width: 40vh;
    margin-top:50px;
    max-width:30%;
    height: fit-content;
    animation: logoglow 10s infinite;
}

@keyframes logoglow {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}

button {
        background: hsl(340deg 100% 32%);
        border-radius: 12px;
        border: none;
        padding: 0;
        cursor: pointer;
        outline-offset: 4px;
        font-family: 'Lilita One', sans-serif;
        margin: .1em auto;
}


button:disabled {
    background: hsl(0, 0%, 43%);
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
}


#main-menu {
    padding: 5px;
    box-sizing: border-box;
    height: 100vh;
    width: 100%;
}

#final-menu {
    padding: 5px;
    box-sizing: border-box;
    height: 100vh;
    width: 100%;
}

#gameplaystats {
    display:grid;
    padding-top:.5em;
}



input {
    display: block;
    width: 70%;
    margin: 1em auto;
    border-radius: 20px;
    height: fit-content;
    min-height: 1.5em;
    padding: 0px 0px 0px 15px;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 1.5em;
}

#buttons {
    margin: 1em auto;
    min-width: fit-content;
    max-width: 50%;
    text-align: center;
}

#infoentrybox {
    height: fit-content;
    width: fit-content;
    box-sizing: border-box;
    margin: 1em;
    min-width: fit-content;
    max-width: 50%;
}

#global-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 5px;
}

#leaderboardglobalstats {
    font-size: 1vh;
}

.button-front, .button-front-wallet, .button-front-apply, .button-front-edit, .button-front-play, .button-front-leaderboard, .button-front-activate {
    display: block;
    padding: .5em 1.5em;
    border-radius: 12px;
    font-size: 2vh;
    background: hsl(345deg 100% 47%);
    color: white;
    transform: translateY(-.25em);
}

.button-front-wallet.disabled, .button-front-apply.disabled, .button-front-edit.disabled, .button-front-play.disabled, .button-front-leaderboard.disabled, .button-front-activate.disabled {
background-color:gray;
color: #ccc;
transform: translateY(-.25em);
}

.button-front-activate.flash {
    animation: logoglow 16s infinite, backgroundanim2 3s infinite;
}



button:hover .button-front {
    transform: translateY(-.18em);
  }
  
  button:hover .button-front-activate {
    transform: translateY(-.18em);
  }
button:hover .button-front-edit {
    transform: translateY(-.18em);
  }

  button:hover .button-front-apply {
    transform: translateY(-.18em);
  }

  button:hover .button-front-wallet {
    transform: translateY(-.18em);
  }

  button:hover .button-front-leaderboard {
    transform: translateY(-.18em);
  }

  button:hover .button-front-play {
    transform: translateY(-.18em);
  }


button:active .button-front {
    transform: translateY(-.1em);
  }

  button:active .button-front-activate {
    transform: translateY(-.1em);
  }


  button:active .button-front-edit {
    transform: translateY(-.1em);
  }

  button:active .button-front-apply {
    transform: translateY(-.1em);
  }

  button:active .button-front-wallet {
    transform: translateY(-.1em);
  }

  button:active .button-front-leaderboard {
    transform: translateY(-.1em);
  }

  button:active .button-front-play {
    transform: translateY(-.1em);
  }



#bonkcardholdingsparentdiv {
    background-color: #505050;
    padding: 2px;
    box-shadow: inset #101010 0px 0px 100px;
    font-size: 1em;
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    box-sizing: border-box;
    z-index: 9;
}

#bonkcardholdingsparentdiv #category1,  #bonkcardholdingsparentdiv #category2,  #bonkcardholdingsparentdiv #category3,  #bonkcardholdingsparentdiv #category4 {
    display: inline-block;
    padding: 0px 5px 0px 5px;
    box-sizing: border-box;
}

#bkbutton {
    color: white;
    padding: 7px;
    transition: .2s;
}

#bkbutton:hover {
    background-color: hsl(345deg 100% 47%);
}

#statsbarwrapperdiv {
    background-color: #9f979f21;
box-shadow: inset #f0003c 0px 0px 30px;
    width: fit-content;
    overflow: hidden;
    padding: 3px;
    text-align: center;
    font-size: .6em !important;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 3px;
    position: absolute;
    right: 0px;
    font-family: 'Orbitron', sans-serif;
    z-index: 999999;
}


#statsbarwrapperdiv .stat {
    display: inline-block;
    padding: 2px;
        box-sizing: border-box;
}



#statusmessage {
    font-size: 1.5em;
}


#coins {
    position: fixed;
    overflow:visible;
    padding-left:40px;
    top: 8%;
    left: 1%;
}

#coins img {
    display: block;
}

img.coins1 {
    animation: buzzcoin 1s;
    opacity: 0;
}

img.coins2 {
    animation: buzzcoin2 .9s;
    opacity: 0;
}

img.coins3 {
    animation: buzzcoin3 .8s;
    opacity: 0;
}

img.coins4 {
    animation: buzzcoin4 .7s;
    opacity: 0;
}

img.coins5 {
    animation: buzzcoin5 .6s;
    opacity: 0;
}


@keyframes buzzcoin {
    0%, 100%    { transform: translate(0px, -50px) scale(0%) rotate(0deg); opacity: 0%; }

    80%  { transform: translate(120px, -50px) scale(140%) rotate(-360deg); opacity: 100%; }
}


@keyframes buzzcoin2 {
    0%    { transform: translate(0px, 0px) scale(0%) rotate(0deg); opacity: 0%; }

    80%  { transform: translate(-20px, -50px) scale(140%) rotate(-360deg); opacity: 100%; }

    100%    { transform: translate(0px, -50px) scale(0%) rotate(0deg); opacity: 0%; }
}

@keyframes buzzcoin3 {
    0%    { transform: translate(0px, 0px) scale(0%) rotate(0deg); opacity: 0%; }

    80%  { transform: translate(20px, -50px) scale(140%) rotate(-360deg); opacity: 100%; }

    100%    { transform: translate(0px, -100px) scale(0%) rotate(0deg); opacity: 0%; }
}


@keyframes buzzcoin4 {
    0%    { transform: translate(0px, 0px) scale(0%) rotate(0deg); opacity: 0%; }

    80%  { transform: translate(-20px, -50px) scale(140%) rotate(-360deg); opacity: 100%; }

    100%    { transform: translate(0px, -150px) scale(0%) rotate(0deg); opacity: 0%; }
}

@keyframes buzzcoin5 {
    0%    { transform: translate(0px, 0px) scale(0%) rotate(0deg); opacity: 0%; }

    80%  { transform: translate(20px, -50px) scale(140%) rotate(-360deg); opacity: 100%; }

    100%    { transform: translate(0px, -200px) scale(0%) rotate(0deg); opacity: 0%; }
}







#helpcontainer img {
    width: 30%;
    height: fit-content;
}


#weaponandcharactercontainer {
    OVERFLOW:visible;
    position: absolute;
    left: 50%;
    top: 15%;
    width: 100%;
    transform: translate(-50%, 0%);
    height: 100%;
    overflow: hidden;
}


#weaponandcharacter {
    position: relative;
    height: fit-content;
    width: 90%;
    animation: hover3 15s infinite;
    padding-top:5vh;
    padding-bottom:5vh;
    box-sizing:border-box;
    margin:auto;
    max-width: 40vh;
}


#weaponandcharacter.buzz {
    animation: buzz .2s infinite;
}

#weaponandcharacter.buzz2 {
    animation: buzz .05s infinite;
}

#character.miss {
    animation: miss .2s;
}

#weaponandcharacter.buzz3 {
    animation: buzz .025s infinite;
}

#weaponandcharacter.bonkpowerbuzz {
    animation: buzz .4s infinite;
}

#character.spin2 {
    animation: spin2 .35s;
}

#character.spin3 {
    animation: spin3 .5s;
}



#character {
    display: block;
    width: fit-content;
    margin: auto;
    max-width: 700px;
    animation: hover 5s infinite;
}


#scoreChart {
width:80vh !important;
background-color:white;
border-radius:20px;
padding:1em;
margin-top:1em;
max-width: 90% !important;
    height: fit-content !important;
}

#character.spin {
    animation: spin .35s;
}







#weapon.swing {
    animation: swing .2s;
}

#weapon.swing2 {
    animation: swing2 .2s;
}

#weapon.swing3 {
    animation: swing3 .2s;
}







#character img {
    width: 80%;
    height: fit-content;
    max-width: 600px;
    pointer-events:None;
}


#poweredfooter {
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    color: white;
    display: block;
    width: fit-content;
    position:sticky;
    max-width: 22%;
}

#characterspeech {
    font-weight: bold;
    background-color: #ffffff96;
    padding: 10px;
    border-radius: 3px 20px 20px 20px;
    width: fit-content;
    opacity: 80%;
    margin: 1em auto;
    color: black;
    border: 1px solid #ccc;
    text-shadow: none;
    animation: hover4 15s infinite;
    transition: .2s;
}

#characterspeech.hidden {
opacity: 0%;
}

#characterspeech.hidden2 {
    opacity: 0%;
    }

#weapon {
    max-width: 700px;
    display: block;
    width: fit-content;
    margin: auto;
    animation: hover2 5s alternate-reverse;

}


@keyframes buzz {
    0%    { transform: translate(0, 0) rotate(0deg); }

    25%   { transform: translate(-2px, -8px) rotate(-2deg); }

    50%   { transform: translate(0, -2px) rotate(-6deg); }

    75%   { transform: translate(8px, 2px) rotate(-6deg); } /* Start of 200% more subtle */

    100%  { transform: translate(0, 0) rotate(0deg); }
}


@keyframes swing {
    0% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(-5deg) scale(1.1); }
    70% { transform: rotate(5deg) scale(1.2); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes swing2 {
    0% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(-5deg) scale(1.1); }
    70% { transform: rotate(5deg) scale(1.2); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes swing3 {
    0% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(-5deg) scale(1.1); }
    70% { transform: rotate(5deg) scale(1.2); }
    90% { transform: rotate(5deg) scale(1.2); } /* Maintained change */
    100% { transform: rotate(0deg) scale(1); }
}


@keyframes miss {
    0%, 100% { transform: rotate(0deg) scale(1) translateX(0px); }
    50% { transform: rotate(-10deg) translateY(-110px) translateX(-110px); }
}

@keyframes spin {
    0% { transform: rotate(0deg) scale(1) translateX(0px); }
    50% { transform: rotate(-40deg) scale(.85) translateX(-50px); }
}

@keyframes spin2 {
    0%, 100% { transform: rotate(0deg) scale(1) translateX(0px); }
    50% { transform: rotate(-50deg) scale(.95) translateX(-70px); }
    70% { transform: rotate(-70deg) scale(.75) translateX(-70px); }
}

@keyframes spin3 {
    0%,100% { transform: rotate(0deg) scale(1) translateY(0px) translateX(0px); }
    20%, 60% { transform: rotate(-70deg) scale(1)   translateY(-150px) translateX(-50px); filter:hue-rotate(15deg); }
}

@keyframes spin4 {
    0%, 100% { transform: rotate(0deg) scale(1) translateX(0px); }
    70% { transform: rotate(-10deg) scale(.95) translateX(-290px); }
}




@keyframes hover {
    0%    { transform: translate(0, 0) rotate(0deg); }
    6.25%  { transform: translate(5px, -10px) rotate(2.5deg); }
    12.5%  { transform: translate(-10px, 5px) rotate(-2.5deg); }
    18.75% { transform: translate(15px, 10px) rotate(5deg); }
    25%   { transform: translate(-5px, -15px) rotate(-5deg); }
    31.25% { transform: translate(10px, 5px) rotate(7.5deg); }
    37.5%  { transform: translate(-15px, -10px) rotate(-7.5deg); }
    43.75% { transform: translate(5px, 15px) rotate(10deg); }
    50%   { transform: translate(0, -5px) rotate(-10deg); }
    56.25% { transform: translate(-5px, 10px) rotate(12.5deg); }
    62.5%  { transform: translate(10px, -5px) rotate(-12.5deg); }
    68.75% { transform: translate(-10px, -15px) rotate(15deg); }
    75%   { transform: translate(15px, 5px) rotate(-10deg); } /* Start of 200% more subtle */
    81.25% { transform: translate(-5px, 15px) rotate(11.67deg); }
    87.5%  { transform: translate(5px, -10px) rotate(-11.67deg); }
    93.75% { transform: translate(-15px, 5px) rotate(13.33deg); }
    100%  { transform: translate(0, 0) rotate(0deg); }
}

@keyframes hover2 {
    0%    { transform: translate(0, 0) rotate(0deg); }
    6.25%  { transform: translate(-5px, 10px) rotate(-1.67deg); }
    12.5%  { transform: translate(10px, -5px) rotate(1.67deg); }
    18.75% { transform: translate(-15px, -10px) rotate(-3.33deg); }
    25%   { transform: translate(5px, 15px) rotate(3.33deg); }
    31.25% { transform: translate(-10px, -5px) rotate(-5deg); }
    37.5%  { transform: translate(15px, 10px) rotate(5deg); }
    43.75% { transform: translate(-5px, -15px) rotate(-6.67deg); }
    50%   { transform: translate(0, 5px) rotate(6.67deg); }
    56.25% { transform: translate(5px, -10px) rotate(-8.33deg); }
    62.5%  { transform: translate(-10px, 5px) rotate(8.33deg); }
    68.75% { transform: translate(10px, 15px) rotate(-10deg); }
    75%   { transform: translate(-15px, -5px) rotate(10deg); }
    81.25% { transform: translate(5px, -15px) rotate(-11.67deg); }
    87.5%  { transform: translate(-5px, 10px) rotate(11.67deg); }
    93.75% { transform: translate(15px, -5px) rotate(-13.33deg); }
    100%  { transform: translate(0, 0) rotate(0deg); }
}


@keyframes hover3 {
    0%    { transform: translate(0%, 0%) rotate(0deg); }
    5%    { transform: translate(-6.75%, 8.25%) rotate(0deg); }
    10%   { transform: translate(10.25%, -3.25%) rotate(30deg); } /* random rotation */
    15%   { transform: translate(-8.25%, -6.75%) rotate(0deg); }
    20%   { transform: translate(3.25%, 10.25%) rotate(0deg); }
    25%   { transform: translate(-10.25%, -8.25%) rotate(-25deg); } /* random rotation */
    30%   { transform: translate(6.75%, 3.25%) rotate(0deg); }
    35%   { transform: translate(-3.25%, -10.25%) rotate(0deg); }
    40%   { transform: translate(8.25%, 6.75%) rotate(15deg); } /* random rotation */
    45%   { transform: translate(-10.25%, -3.25%) rotate(0deg); }
    50%   { transform: translate(6.75%, -8.25%) rotate(0deg); }
    55%   { transform: translate(-3.25%, 10.25%) rotate(-40deg); } /* random rotation */
    60%   { transform: translate(8.25%, -6.75%) rotate(0deg); }
    65%   { transform: translate(-6.75%, 3.25%) rotate(0deg); }
    70%   { transform: translate(10.25%, 8.25%) rotate(20deg); } /* random rotation */
    75%   { transform: translate(-8.25%, -10.25%) rotate(0deg); }
    80%   { transform: translate(3.25%, -6.75%) rotate(0deg); }
    85%   { transform: translate(-10.25%, 3.25%) rotate(-10deg); } /* random rotation */
    90%   { transform: translate(6.75%, -3.25%) rotate(0deg); }
    95%   { transform: translate(-8.25%, 10.25%) rotate(0deg); }
    100%  { transform: translate(0%, 0%) rotate(0deg); }
}


@keyframes hover4 {
    0%    { transform: translate(100px, -50px) rotate(0deg); }
    50%   { transform: translate(120px, -70px) rotate(4.67deg); }
    100%  { transform: translate(100px, -50px) rotate(0deg); }
}



#weapon img {
    width: 100%;
    height: fit-content;
    pointer-events:None;
}

#dglnprice {
    position: absolute;
    overflow:visible;
    font-weight:bold;
    z-index: 99999;
    font-size: 1em;
    padding-top:2%;
    box-sizing:border-box;
}
#coins img {
    width: 5em;
    height: fit-content;
    pointer-events:None;
}

#game-window {
    text-align:center;
    padding: 5px;
    box-sizing:border-box;
    height: 100vh;
    width: 100%;
}

#bonkword {
    pointer-events:None;
    position:absolute;
    top: 25%;
    left: 30%;
    font-size: 4vh;
}

#scoreword {
    pointer-events:None;
    position:absolute;
    top: 40%;
    left: 60%;
    font-size: 4vh;
}


#scoreword2 {
    pointer-events:None;
    position:absolute;
    top: 30%;
    left: 50%;
    font-size: 3vh;
    filter:hue-rotate(5deg);
}

#stattracker {
    font-size: 1.5em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    background-color: #707070c2;
    border: 2px #0000005e groove;
    box-shadow: inset rgba(0, 0, 0, 0.358) 0px 0px 30px;
    height: fit-content;
    font-family: 'Orbitron', sans-serif;
    border-radius: 20px;
    width: fit-content;
    margin: 0.5em auto 0.5em auto;
    opacity: .9;
    display: block;
    padding: 1em;
    text-align: center;
    color: #ff2121;
    text-shadow: #000000 0px 0px 10px;
    font-weight: bold;
    transition: 2s;
}



#GAMEAPP {
    width: 100%;
    text-align: -webkit-center;
    box-sizing: border-box;
}

.bonkpowertip {
    font-size: 1.8vh;
    color:red;
}

#bonkpower {
    display: none;
    width: fit-content;
    margin: auto;
    padding: 1em;
    background-color: #242121eb;
    border: 2px #0000005e groove;
    box-shadow: inset rgba(0, 0, 0, 0.358) 0px 0px 30px;
    height: fit-content;
    font-family: 'Orbitron', sans-serif;
    border-radius: 20px;
    opacity: .9;
    text-align: center;
    font-weight: bold;
    transition: 2s;
    min-width: 60%;
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translate(-50%);

}

#bonkpowerbarfill {
    height: 2em;
    border-radius:30px;
    background-color: green;
    animation: powerpulse infinite 2s ease-in-out,
                logoglow 120s infinite;
    background-image:url("./images/powerwave.jpg");
    transition: width 0.5s linear 0s;
    border-left: 4px solid #000000a8;
    border-right: 7px solid #00000030;
}


@keyframes powerpulse {
    0%, 100% {
        color: red;                                         /* Starting and ending color */
        transform: scale(1) skew(0deg, 0deg);               /* Starting and ending transformation */
        border-radius: 10%;                                 /* Starting and ending border radius */
        box-shadow: inset 10px 0px 15px rgba(0, 0, 0, 0.691);   /* Starting and ending box-shadow */
        background-position: 0% center;    
        background-size: 128px;                /* Background slightly shifted to the left */
    }

    25% {

        border-radius: 20% 10% 20% 10%;                     /* Inverse warping border radius */

    }

    50% {
        color: darkred;                                     /* Midway color */
        transform: scale(1.01) skew(-.1deg, .1deg);            /* Skew and scale at 50% */
        border-radius: 10% 20% 10% 20%;                     /* Inverse warping border radius */
        box-shadow: inset 30px 0px 30px rgba(121, 2, 107, 0.26);  /* Max warping box-shadow */
                  /* Background slightly shifted to the right */
                  background-size: 135px;    
    }

    
    75% {

        border-radius: 40% 20% 40% 20%;                     /* Inverse warping border radius */

    }

    100% {
        background-position: 128px center;  
    }
}


#finalmessage {
    padding-top:.5em;
    color:red;
    font-size:3vh;
}



input[type="checkbox"] {
    width: 20px;
    height: 20px;
}





















@media only screen and (max-width: 1600px) {
    /* CSS rules for screens up to 1600px wide */

    #background img {
        width: 130%;
    }
}



@media only screen and (max-width: 1400px) {
    /* CSS rules for screens up to 1600px wide */

    #background img {
        width: 150%;
    }
}



@media only screen and (max-width: 1200px) {
    /* CSS rules for screens up to 1600px wide */

    #background img {
        width: 190%;
    }
}

@media only screen and (max-width: 1000px) {
    /* CSS rules for screens up to 1600px wide */

    #background img {
        width: 250%;
    }
}

@media only screen and (max-width: 800px) {
    /* CSS rules for screens up to 1600px wide */

    #background img {
        width: 350%;
    }
}

@media only screen and (max-width: 600px) {
    /* CSS rules for screens up to 1600px wide */

    #background img {
        width: 420%;
    }
}