html {
     font-family: -apple-system, -apple-system,
         BlinkMacSystemFont, 'Segoe UI', Roboto,
         Oxygen, Ubuntu, Cantarell, 'Open Sans',
         'Helvetica Neue', sans-serif;
 }

 body {
     padding: 0;
     background-image: url("../images/bg.jpg");
     background-repeat: repeat-y;
     background-size: cover;
     backdrop-filter: blur(2px);
     height: 100vh;
     padding: 15px;
     margin-top: 0 !important;
     position: relative;
 }

 #gamebox {
     max-width: 800px;
     margin-top: -15px;

 }

 .dragover {
     outline: 5px dotted rgb(214, 5, 233);
     /* animation: flash 1s ease-out 0s infinite reverse; */

 }

 .dropover {
     outline: 4px dotted #f00;
 }

 .dropped {
     outline: 3px solid #c402c7;
     animation: flash .6s ease-out .1s 2 reverse;
     z-index: 50;
 }

 .drag {
     position: absolute;
     margin: 0px;
     left: 0;
     top: 0;
     width: 99%;
     padding: 0px;
     z-index: 100;

 }

 .wordname {
     position: absolute;
     left: 0%;
     top: 0%;
     width: 80%;
     transform: translate(10%, -60%);
     color: #f11303;
     border-radius: 5px;
     background-color: rgba(239, 189, 88, 0.3);
 }

 .ori-drop {
     height: 165px;
     background-color: rgba(242, 214, 104, 0.5);
     position: relative;
 }

 .drop {
     border: #b902bc solid 2px;
     z-index: 50;
     border-radius: 5px;
     background-image: url("../images/drop.png");
     background-size: cover;
     height: 120px;
     padding: 0px;
 }

 .undrop {
     border: #ebb106 solid 2px;
     z-index: 1;
     border-radius: 5px;
 }

 .card {
     height: 130px;
     background-color: rgba(239, 170, 49, 0.5);
 }

 #rewardTitle {
     -webkit-text-stroke: 0.2px #b902bc;
     font-weight: bold;
     border: #b902bc solid 2px;
 }

 .reward {
     position: relative;
     width: 70px;
     height: 70px;
 }

 .reward p {
     color: #b902bc;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     -webkit-text-stroke: 1.5px white;
     font-weight: bolder;
 }

 .notyet {
     filter: saturate(0);
 }

 .timer {
     display: none;
     position: absolute;
     right: 0.5em;
     top: 0.5em;
     background-color: rgba(21, 115, 54, 0.588);
     padding: 0 0.5em;
     border-radius: 1.2em;
 }

 .timer p {
     font-weight: bold;
     font-family: 'Digital-7', monospace;
     font-size: 1.8em;
     /* Adjusts the size of the font */
     color: #c9e704;
     /* Sets the color of the font */
     text-shadow: 0 0 5px #32ed83;
     margin: 0;
 }

 .score {
     display: none;
     position: absolute;
     left: 0.5em;
     top: 0.5em;
     background-color: rgba(21, 115, 54, 0.588);
     padding: 7px 10px;
     border-radius: 1.5em;
     font-weight: bold;
     font-family: 'Digital-7', monospace;
     font-size: 1.5em;
     /* Adjusts the size of the font */
     color: #c9e704;
     /* Sets the color of the font */
     text-shadow: 0 0 5px #32ed83;
     margin: 0;
 }

 #newrecord {
     background-image: url("../images/award.png");
     background-size: cover;
     width: 1.7em;
     height: 1.5em;
 }

 .prevPage {
     position: absolute;
     left: 25%;
     top: 3.5em;
 }

 @keyframes flash {
     0% {
         /* background-color: transparent; */
         /* Start with no highlight */
         outline: 5px dotted rgba(242, 214, 104, 1);
     }

     50% {
         /* background-color: #0f0; */
         outline: 3px dotted rgb(231, 145, 6);
         /* Flash to a highlight color */
     }

     100% {
         /* background-color: transparent; */
         /* Return to no highlight */
         outline: 5px dotted rgb(240, 108, 1);
     }
 }


 /*bs5 */
 .slider::-webkit-slider-thumb {
     background-color: #fd7e14;
     /* Bootstrap's $orange color for the thumb */
 }

 /* Firefox thumb style */
 .slider::-moz-range-thumb {
     background-color: #fd7e14;
 }

 .modal.fade .modal-dialog {
     transform: translate(0px, -150px);
     /* Start 50px above its final position */
     transition: transform 0.3s ease-out;
     /* Add a smooth transition */
 }

 .modal.show .modal-dialog {
     transform: translate(0, 0);
     /* Final position */
 }

 .btn-custom {
     background-color: #f4fba9;
     border: #6faf16 solid 2px;
     /* border-radius: 30px; */
     color: #7c5c02;
     font-size: 2em;
 }

 .btn-custom:hover {
     background-color: #d28603;
     border: #d9a5a5 solid 2px;

 }

 .btn-custom:active,
 .btn-custom:focus {
     background-color: #F48EAC;
     border: #eb4545 solid 2px;

 }

 .modal-content {
     border: #F48EAC solid 15px;
     border-radius: 20px;
     background-color: pink;
 }

 .modal.fade .modal-dialog {
     transform: translate(0px, -250px);
     /* Start 50px above its final position */
     transition: transform 0.3s ease-out;
     /* Add a smooth transition */
 }

 .modal.show .modal-dialog {
     transform: translate(0, 0);
     /* Final position */
 }

 #coin {
     width: 50px;
     height: 50px;
     position: absolute;
     background-color: #ff0;
     border-radius: 50%;
     border: rgb(211, 85, 0) solid 2px;
     opacity: 1;
     /* Initial state: fully visible */
     transform: translateY(0);
     /* Initial state: no vertical translation */
     /*animation: myAnimation .5s ease-out 5; /* Apply the animation */
     text-align: center;
     color: #f00;
     transform-style: preserve-3d;
 }

 #box {
     padding-left: 0.5em;
     position: relative;
     width: 8vh;
     height: 6vh;
 }

 #box p {
     position: absolute;
     right: -35%;
     top: 45%;
     transform: translate(-50%, -50%);
     opacity: 1;
     color: #f00;
     /* Initial state: fully visible 

animation: fadeOutUp .5s ease-out 5; */
 }

 #box h3 {
     margin: 0px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }


 .color {
     fill: var(--color, black);
 }

 #svg {
     position: absolute;
     overflow: visible;
     top: 0;
     left: 0;
 }


 .balloon {
     cursor: pointer;
 }

 #behind_svg {
     z-index: 1000;
 }

 #content {
     z-index: 2000;
 }

 #svg {
     z-index: 3000;
 }