/* GENERAL SECTION */
@font-face {
    font-family: "StarWars";
    src: url("../assets/Starjedi.woff") format("woff")
}

body {
    margin: 0;
    background-image: url("../assets/background_blue.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    width: 100vw;
    font-family: StarWars, sans-serif;
    overflow-x: hidden;
}
/* HEADER SECTION */
header {
    height: 3rem;
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

header img {
    max-height: 5rem;
    cursor: pointer;
}

header a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    align-self: center;
}

@media (max-width: 767px) {
    header {
        padding: 1rem;
    }

    header a {
        font-size: 1rem;
    }
}

#hint {
    position: fixed;
    top: 5rem;
    right: 3.5rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    transform: rotate(45deg);
    animation: show 1s linear;
}
/* MAIN SECTION */

main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    animation: showBody 1s;
}

.inputContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    margin-bottom: 0.5rem;
}

.inputContainer input {
    width: 25rem;
    height: 1.75rem;
    margin: 1rem;
    border-radius: 1rem;
    border: none;
    background-color: #1e1e23;
    font-size: 1.75rem;
    font-family: StarWars, sans-serif;
    color: white;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    outline: #E6B50B solid 0.125rem;
}

.inputContainer input:focus {
    outline: #E6B50B solid 0.125rem;
}

.inputContainer input.wrong {
    animation: wrong 0.5s;
}

.inputContainer .credits {
    display: flex;
    font-size: 1.75rem;
    color: white;
    align-self: center;
    text-align: center;
    background-color: #1e1e23;
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-radius: 1rem;
    outline: #E6B50B solid 0.125rem;
    animation: infinite glow 1s;
}

.inputContainer .credits.wrong {
    animation: shakeHit 0.25s;
}

.inputContainer .credits img {
    max-height: 1.70rem;
}

.dropdown {
    position: absolute;
    left: 3%;
    top: 82%;
    display: none;
    width: 25rem;
    height: 20rem;
    font-size: 1.75rem;
    background-color: #1e1e23;
    color: white;
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-radius: 1rem;
    z-index: 1;
    -webkit-box-shadow: 10px 10px 47px 0px rgba(79,129,168,1);
    -moz-box-shadow: 10px 10px 47px 0px rgba(79,129,168,1);
    box-shadow: 10px 10px 47px 0px rgba(79,129,168,1);
    animation: hide 0.5s;
}

.dropdown.show {
    display: block;
    height: auto;
    animation: show 0.25s ease-in-out;
}

.dropdown div{
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.dropdown div:not(:last-child) {
    border-bottom: 1px solid #E6B50B;
}


.dropdown div:hover {
    color: #E6B50B;
    cursor: pointer;
}

.nextCharacter {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.15rem;
    width: 6.5rem;
}

#pop-up #pop-up_container p:has(.nextCharacter) {
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.25rem;
    padding: 0.5rem;
    letter-spacing: 0.10rem;
}

table#star-wars-character, table#star-wars-films {
    width: 80%;
    margin: 0 auto;
    font-size: 1.25rem;
    border-radius: 1rem;
    -webkit-box-shadow: 0px 0px 16px -4px rgb(255, 255, 255);
    -moz-box-shadow: 0px 0px 16px -4px rgb(255, 255, 255);
    box-shadow: 0px 0px 16px -4px rgb(255, 255, 255);

    outline: #E6B50B solid 0.125rem;
}

table#star-wars-films{
    margin-top: 2rem;
}

table#star-wars-character p {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

table#star-wars-character.won, table#star-wars-films.won {
    -webkit-box-shadow: 0px 0px 30px -8px rgb(255, 202, 55);
    -moz-box-shadow: 0px 0px 30px -8px rgb(255, 202, 55);
    box-shadow: 0px 0px 30px -8px rgb(255, 202, 55);
    transition: box-shadow 0.75s;

}

thead {
    border-radius: 1rem 1rem 0 0;
}

thead th {
    background-color: #E6B50B;
    padding: 10px;
    text-align: center;
}

thead th:first-child {
    text-align: left;
    border-radius: 1rem 0 0 0;
    padding-right: 2rem;
    padding-left: 2rem;
}

thead th:last-child {
    border-radius: 0 1rem 0 0;
}

tbody tr {
    background-color: rgba(30, 30, 35, 0.95);
    color: #fff;
    padding: 10px;
}

tbody td {
    padding: 2rem;
    border: none;
    text-align: center;
    min-width: 6rem;
    max-width: 6rem;
    overflow: auto;
}

tbody td:first-child:not(#star-wars-films td:first-child) {
    text-align: left;
    border-radius: 0 0 0 1rem;
    padding-right: 7.5rem;
    /* apply css properties so that this first child doesn't change width when content is added or lessened */
    min-width: 10rem;
    max-width: 10rem;
}

tbody td:last-child:not(#star-wars-films td:first-child) {
    border-radius: 0 0 1rem 0;
}

tbody td:last-child div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

#star-wars-films thead th {
    border-radius: 1rem 1rem 0 0;
}

#star-wars-films tr:last-child td {
    border-radius: 0 0 1rem 1rem;
}

#pop-up, #hint-popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    background-attachment: fixed;
    display: none;
    z-index: 2;
    animation: hide 0.5s;
}

#pop-up.show, #hint-popup.shows {
    display: flex;
    color: white;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    animation: show 0.5s ease-in-out;
}

#pop-up_container, #hint-popup_container {
    display: flex;
    color: white;
    padding: 2rem;
    justify-content: space-between;
    align-items: center;
    font-size: 2rem;
    flex-direction: column;
    position: relative;
    margin: auto;
    width: 50%;
    height: fit-content;
    background-color: #000000;
    background-image: url("../assets/stars.png");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1rem;
    -webkit-box-shadow: 0px 0px 16px -4px rgb(255, 255, 255);
    -moz-box-shadow: 0px 0px 16px -4px rgb(255, 255, 255);
    box-shadow: 0px 0px 16px -4px rgb(255, 255, 255);
    animation: showBody 0.5s ease-in-out;
}

#pop-up_container #close, #hint-popup #hint-close {
    position: absolute;
    top: 0;
    right: 0.50rem;
    font-weight: bold;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    padding: 0.25rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.5s;
}

#pop-up_container #close:hover, #hint-popup #hint-close:hover {
    text-shadow: 0 0 20px #3775a8;
}

#pop-up_container img {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 50%;
}

#pop-up_container p:not(.stats p) {
    text-align: center;
    padding: 1rem;
}

#pop-up_container p:nth-of-type(2):not(.stats p:nth-of-type(2)) {
    text-shadow: 0 0 10px #3775a8;
    font-size: 3rem;
}

#pop-up_container .stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    font-size: 1.5rem;
    padding: 1.5rem 2rem 0.5rem 2rem;
    border-radius: 1rem;
}

#pop-up_container .stats span {
    text-shadow: 0 0 10px #3775a8;
}

#pop-up_container .stats h2 {
    color: #3775a8;
}

#pop-up_container .stats .button {
    background-color: transparent;
    border: #3775a8 solid 0.125rem;
    font-family: StarWars, sans-serif;
    color: white;
    text-shadow: 0 0 5px #3775a8;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.3s;
    box-shadow: 0 0 5px #3775a8;
    width: 25rem;
    margin: 1rem;
}

#pop-up_container .button:hover {
    text-shadow: 0 0 20px #3775a8;
    box-shadow: 0 0 20px #3775a8;
}

.correct {
    color: #3775a8;
}

.started, .about{
    background: rgba(30, 30, 35, 0.7);
    padding: 2rem;
    border-radius: 1rem;
    font-size: 1.5rem;
    margin: 1rem;
    color: white;
    text-transform: lowercase;
    width: 80%;
}

.about h1, .started h1 {
    color: #E6B50B;
    padding-bottom: 1rem;
}

.about p, .started p {
    margin-bottom: 1rem;
}

.about span, .started span {
    text-shadow: 0 0 10px #3775a8;
}

.star {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 384px 437px #fff, 1762px 873px #fff, 1477px 477px #fff, 1076px 941px #fff, 690px 626px #fff, 1190px 404px #fff, 1619px 553px #fff, 178px 122px #fff, 1331px 612px #fff, 1028px 786px #fff, 744px 517px #fff, 1362px 740px #fff, 1168px 792px #fff, 1516px 895px #fff, 36px 442px #fff, 1569px 680px #fff, 289px 449px #fff, 544px 375px #fff, 1298px 899px #fff, 1519px 971px #fff, 591px 896px #fff, 1092px 855px #fff, 606px 144px #fff, 265px 924px #fff, 488px 18px #fff, 1668px 499px #fff, 1444px 52px #fff, 1051px 93px #fff, 1636px 241px #fff, 1765px 832px #fff, 1416px 270px #fff, 526px 120px #fff, 502px 746px #fff, 358px 77px #fff, 646px 1px #fff, 891px 712px #fff, 564px 408px #fff, 460px 247px #fff, 1658px 883px #fff, 1681px 832px #fff, 297px 537px #fff, 167px 583px #fff, 1250px 680px #fff, 531px 64px #fff, 15px 115px #fff, 1209px 989px #fff, 280px 788px #fff, 1115px 65px #fff, 794px 57px #fff, 226px 219px #fff, 1230px 84px #fff, 1277px 350px #fff, 1793px 445px #fff, 1872px 947px #fff, 1304px 499px #fff, 569px 420px #fff, 1796px 537px #fff, 1px 29px #fff, 1736px 881px #fff, 1258px 317px #fff, 1358px 646px #fff, 296px 701px #fff, 761px 581px #fff, 981px 531px #fff, 1009px 589px #fff, 1695px 277px #fff, 875px 164px #fff, 1839px 145px #fff, 956px 255px #fff, 733px 625px #fff, 86px 751px #fff, 157px 160px #fff, 1399px 50px #fff, 527px 476px #fff, 1825px 855px #fff, 398px 142px #fff, 1072px 444px #fff, 22px 893px #fff, 1687px 954px #fff, 561px 389px #fff, 1551px 174px #fff, 33px 528px #fff, 1375px 851px #fff, 1354px 496px #fff, 1807px 528px #fff, 1336px 394px #fff, 1905px 631px #fff, 426px 484px #fff, 176px 307px #fff, 1458px 957px #fff, 582px 216px #fff, 568px 83px #fff, 582px 390px #fff, 476px 425px #fff, 1739px 160px #fff, 451px 437px #fff, 71px 94px #fff, 248px 933px #fff, 529px 392px #fff, 814px 341px #fff, 1831px 976px #fff, 967px 653px #fff, 1313px 591px #fff, 664px 293px #fff, 1067px 445px #fff, 1539px 415px #fff, 374px 271px #fff, 1458px 654px #fff, 1249px 173px #fff, 1790px 497px #fff, 488px 152px #fff, 7px 752px #fff, 300px 606px #fff, 618px 402px #fff, 1116px 995px #fff, 481px 226px #fff, 1122px 161px #fff, 436px 874px #fff, 760px 147px #fff, 410px 421px #fff, 1353px 258px #fff, 221px 202px #fff, 1129px 422px #fff, 945px 751px #fff, 962px 619px #fff, 1164px 672px #fff, 400px 247px #fff, 112px 83px #fff, 1036px 460px #fff, 161px 311px #fff, 1116px 322px #fff, 77px 625px #fff, 1894px 944px #fff, 1587px 927px #fff, 834px 625px #fff, 50px 465px #fff, 157px 658px #fff, 1631px 618px #fff, 907px 427px #fff, 1814px 605px #fff, 1435px 968px #fff, 1653px 358px #fff, 627px 495px #fff, 545px 118px #fff, 687px 947px #fff, 1784px 41px #fff, 1204px 525px #fff, 1516px 441px #fff, 788px 481px #fff, 1224px 661px #fff, 330px 458px #fff, 1485px 290px #fff, 634px 600px #fff, 16px 775px #fff, 695px 349px #fff, 749px 887px #fff, 1270px 428px #fff, 184px 376px #fff, 686px 891px #fff, 1075px 751px #fff, 250px 995px #fff, 203px 291px #fff, 1310px 846px #fff, 733px 834px #fff, 623px 816px #fff, 485px 921px #fff, 1367px 667px #fff, 1113px 995px #fff, 1498px 34px #fff, 1063px 711px #fff, 567px 980px #fff, 769px 522px #fff, 666px 274px #fff, 1781px 621px #fff, 870px 129px #fff, 1152px 384px #fff, 1111px 917px #fff, 242px 364px #fff, 563px 382px #fff, 1862px 877px #fff, 1635px 918px #fff, 444px 714px #fff, 1355px 172px #fff, 822px 879px #fff, 890px 841px #fff, 1547px 515px #fff, 979px 603px #fff, 1418px 811px #fff, 1389px 872px #fff, 1016px 974px #fff, 1531px 229px #fff, 707px 80px #fff, 265px 980px #fff, 1879px 862px #fff, 611px 77px #fff, 597px 809px #fff, 296px 609px #fff, 1193px 685px #fff, 1735px 722px #fff, 1004px 476px #fff, 270px 702px #fff, 61px 342px #fff, 932px 345px #fff, 1485px 322px #fff, 1481px 366px #fff, 93px 801px #fff, 1672px 453px #fff, 351px 844px #fff, 1243px 841px #fff, 461px 667px #fff, 1641px 398px #fff, 1513px 776px #fff, 1053px 375px #fff, 187px 308px #fff, 660px 105px #fff, 17px 305px #fff, 1912px 546px #fff, 266px 42px #fff, 20px 939px #fff, 863px 593px #fff, 674px 325px #fff, 1619px 385px #fff, 853px 677px #fff, 1235px 10px #fff, 192px 971px #fff, 1061px 862px #fff, 1284px 254px #fff, 942px 942px #fff, 503px 36px #fff, 479px 991px #fff, 344px 619px #fff, 696px 426px #fff, 1783px 207px #fff, 561px 255px #fff, 776px 832px #fff, 220px 823px #fff, 670px 131px #fff, 1545px 689px #fff, 1188px 194px #fff, 1531px 886px #fff, 675px 703px #fff, 620px 862px #fff, 1802px 957px #fff, 1834px 642px #fff, 1241px 386px #fff, 1489px 883px #fff, 1836px 749px #fff, 384px 448px #fff, 1344px 31px #fff, 585px 396px #fff, 247px 388px #fff, 948px 133px #fff, 416px 224px #fff, 687px 6px #fff, 1112px 945px #fff, 1264px 615px #fff, 1248px 7px #fff, 1909px 557px #fff, 1824px 182px #fff, 1892px 77px #fff, 251px 642px #fff, 1053px 617px #fff, 256px 437px #fff, 1123px 939px #fff, 871px 914px #fff, 739px 616px #fff, 1720px 766px #fff, 641px 315px #fff, 626px 594px #fff, 125px 211px #fff, 310px 384px #fff, 93px 507px #fff, 952px 241px #fff, 1804px 356px #fff, 1303px 43px #fff, 383px 136px #fff, 1745px 863px #fff, 1864px 795px #fff, 1033px 625px #fff, 1674px 434px #fff, 700px 237px #fff, 89px 273px #fff, 894px 38px #fff, 1124px 374px #fff, 1703px 851px #fff, 864px 480px #fff, 980px 525px #fff, 480px 73px #fff, 949px 961px #fff, 565px 420px #fff, 1047px 743px #fff, 201px 963px #fff, 1868px 46px #fff, 193px 573px #fff, 1135px 818px #fff, 1411px 553px #fff, 1549px 990px #fff, 1648px 251px #fff, 594px 764px #fff, 366px 116px #fff;
}

.meteor-1 {
    position: absolute;
    top: 199px;
    left: 75%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 9.4s linear infinite;
}
.meteor-1:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-2 {
    position: absolute;
    top: 178px;
    left: 51%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 9.5s linear infinite;
}
.meteor-2:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-3 {
    position: absolute;
    top: 181px;
    left: 64%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 7.7s linear infinite;
}
.meteor-3:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-4 {
    position: absolute;
    top: 217px;
    left: 63%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 8.2s linear infinite;
}
.meteor-4:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-5 {
    position: absolute;
    top: 99px;
    left: 27%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 6.9s linear infinite;
}
.meteor-5:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-6 {
    position: absolute;
    top: 239px;
    left: 12%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 10s linear infinite;
}
.meteor-6:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-7 {
    position: absolute;
    top: 143px;
    left: 47%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 6.1s linear infinite;
}
.meteor-7:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-8 {
    position: absolute;
    top: 58px;
    left: 18%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 6.9s linear infinite;
}
.meteor-8:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-9 {
    position: absolute;
    top: 197px;
    left: 44%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 9.7s linear infinite;
}
.meteor-9:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-10 {
    position: absolute;
    top: 277px;
    left: 14%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 7.6s linear infinite;
}
.meteor-10:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-11 {
    position: absolute;
    top: 114px;
    left: 75%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 8.8s linear infinite;
}
.meteor-11:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-12 {
    position: absolute;
    top: 189px;
    left: 74%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 4.3s linear infinite;
}
.meteor-12:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-13 {
    position: absolute;
    top: 280px;
    left: 37%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 4.3s linear infinite;
}
.meteor-13:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-14 {
    position: absolute;
    top: 136px;
    left: 57%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 5.2s linear infinite;
}
.meteor-14:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-15 {
    position: absolute;
    top: 239px;
    left: 76%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 4.7s linear infinite;
}
.meteor-15:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

@keyframes meteor {
    0% {
        opacity: 0;
        margin-top: 0;
        margin-right: -300px;
    }
    10% {
        opacity: 1;
    }
    15% {
        margin-top: 100px;
        margin-left: -100px;
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* add wrong animation*/
@keyframes wrong {
    0% {
        color: white;
    }
    50% {
        color: #ff0000;
    }
    100% {
        color: white;
    }
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes showBody {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow {
    0% {
        box-shadow: 0px 0px 18px -4px rgb(211, 180, 94);
    }
    50% {
        box-shadow: 0px 0px 30px -8px rgb(255, 202, 55);
    }
    100% {
        box-shadow: 0px 0px 18px -4px rgb(211, 180, 94);
    }
}

@keyframes shakeHit {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(0.3rem);
    }
    50% {
        transform: translateX(0);
        color: red;
    }
    75% {
        transform: translateX(-0.3rem);
    }
    100% {
        transform: translateX(0);
    }
}