styles.css

@font-face {
    font-family: myFont;
    src: url(Bitter-ExtraBold.ttf);
}

* {
    font-family: myFont;
    letter-spacing: 0.08em;
    user-select: none;
}

.main {
    align-content: center;
}

.body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 0;
}

/* Preloader */
h3 {
    font-size: 10em;
    top: 0em;
    margin-top: 0em;
    color: #fff;
    text-shadow: 3em 7em 3em #81838d;
    text-shadow: 2px 0 0 #000000, -2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
}


body {
    background: url(Img/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    scroll-behavior: none;
    overflow: hidden;
}


/* Game Container */
.game_section {
    position: relative;
    width: 100%;
    height: 62vh;
    min-height: 60vh;
    display: flex;
    align-items: center;
    place-items: center;
    flex-direction: column;
    font-size: 1vw;
}

.game_container {
    position: absolute;
    bottom: 0vh;
    width: 52.5vw;
    height: 28.75vh;
}

/* Thimble */
.sewing_thimble {
    background: url(Img/c10.png) no-repeat fixed center;
    background-size: contain;
    border: none;
    position: absolute;
    top: 11.875em;
    z-index: 2;
    width: 8em;
    height: 9.0625em;
    font-size: inherit;
    will-change: transform, top, left;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.thimble-0 {
    left: 9.5em;
}

.thimble-1 {
top: 13.5em;
    left: 22em;
}

.thimble-2 {
    left: 34.3em;
}

/* Thimble Up */
.thimbleup {
    transform: translateY(-5em);
}

/* Ball */
.thimble_ball_position-0 {
    background: url(Img/b0.png) no-repeat center;
    background-size: 2em 2em;
    position: relative;
    left: 10.8em;
    top: 15.7em;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    z-index: 0;
}

.thimble_ball_position-1 {
    background: url(Img/b0.png) no-repeat center;
    background-size: 2em 2em;
    position: relative;
    left: 23.3em;
    top: 17.5em;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    z-index: 0;
}

.thimble_ball_position-2 {
    background: url(Img/b0.png) no-repeat center;
    background-size: 2em 2em;
    position: relative;
    left: 35.6em;
    top: 15.7em;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    z-index: 0;
}

/* Button Container */
.pbutton_container {
    padding-bottom: 1.5625em;
    margin-top: 0.6875em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10em 0em 0em;
}

/* Play Button */
.Playbutton {
    position: absolute;
    width: 9.5vw;
    height: 2.2em;
    min-width: 15.875em;
    bottom: -12.5em;
    padding: 0.45em 0.625em 0.625em;
    background-color: transparent;
    backdrop-filter: blur(0.2em);

    border: none;
    border-radius: 5em;
    box-shadow: 0em 0.1em 0.625em rgba(0, 0, 0, 0.743);
    cursor: pointer;

    color: whitesmoke;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    font-size: 1.3em;
    text-shadow: 0em 0em 5em 8em #434b5b;
    text-shadow: 2px 0 0 #000000, -2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;

    transition: all 0.2s ease-in-out;
    z-index: 2;
}
.Playbutton:hover {
    box-shadow: 0em 0.3em 0.625em 0.075em rgba(0, 0, 0, 0.72);
    bottom: -12.8em;
}


/* Timer */
#countdown {
    position: absolute;
    text-align: center;
    font-size: 1.4em;
    top: 1em;
    right: 1em;
    width: 4em;
    height: 2em;
    color: white;
}

/* Score */
.score {
    position: absolute;
    font-size: 1.3em;
    top: 1em;
    left: 1em;
    width: 10em;
    height: 2em;
    color: white;
}

/* Shop */
.shopBtn {
    position: absolute;
    top: 50%;
    left: -4em;
    width: 11em;
    height: 4em;
    border-radius: .5em;
    background: white;
    overflow: hidden;
    padding-left: 5px;
    cursor: pointer;
    background: transparent;
    backdrop-filter: blur(1em);
}

.shopBtn img {
    width: 4em;
    height: 4em;
}

.shop {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-evenly;
    box-sizing: border-box;
    gap: 1em;
    top: 0;
    right: -50.5em;
    width: 50em;
    height: 50.6em;
    background: transparent;
    backdrop-filter: blur(1em);
    border-radius: 4em;
    z-index: 3;
    padding-left: 1.5em;
    padding-right: 4em;
    transition: all 0.7s ease-in-out;
} .shop:hover {
    right: -3em;
}

/* Shop Items */
.shop h2 {
    width: 100%;
    height: 1em;
    padding: 1em;
    text-align: center;
    margin-bottom: -1.2em;
    font-size: 2em;
    color: #fff;
    text-shadow: 2px 0 0 #000000, -2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
}

.shop > div[class^="c"] {
    width: 4em;
    height: 4em;
    box-shadow: 0em 0.1em 0.425em #000000bd;
    border-radius: 0.7em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    backdrop-filter: blur(2em);
    cursor: pointer;
    transform: rotate(180deg);
    transition: all 0.5s ease-in-out;
} .shop > div[class^="c"]:hover {
    box-shadow: 0em 0.1em 0.425em #000000bd;
    transform: scale(1.1);
}


.c0 {
    background: url(Img/c0.png) no-repeat center;
}
.c1 {
    background: url(Img/c1.png) no-repeat center;
}
.c2 {
    background: url(Img/c2.png) no-repeat center;
}
.c3 {
    background: url(Img/c3.png) no-repeat center;
}
.c4 {
    background: url(Img/c4.png) no-repeat center;
}
.c5 {
    background: url(Img/c5.png) no-repeat center;
}
.c6 {
    background: url(Img/c6.png) no-repeat center;
}
.c7 {
    background: url(Img/c7.png) no-repeat center;
}
.c8 {
    background: url(Img/c8.png) no-repeat center;
}
.c9 {
    background: url(Img/c9.png) no-repeat center;
}
.c10 {
    background: url(Img/c10.png) no-repeat center;
}
.c11 {
    background: url(Img/c11.png) no-repeat center;
}
.c12 {
    background: url(Img/c12.png) no-repeat center;
}
.c13 {
    background: url(Img/c13.png) no-repeat center;
}
.c14 {
    background: url(Img/c14.png) no-repeat center;
}
.c15 {
    background: url(Img/c15.png) no-repeat center;
}
.c16 {
    background: url(Img/c16.png) no-repeat center;
}
.c17 {
    background: url(Img/c17.png) no-repeat center;
}
.c18 {
    background: url(Img/c18.png) no-repeat center;
}
.c19 {
    background: url(Img/c19.png) no-repeat center;
}
.c20 {
    background: url(Img/c20.png) no-repeat center;
}
.c21 {
    background: url(Img/c21.png) no-repeat center;
}
.c22 {
    background: url(Img/c22.png) no-repeat center;
}
.c23 {
    background: url(Img/c23.png) no-repeat center;
}
.c24 {
    background: url(Img/c24.png) no-repeat center;
}
.c25 {
    background: url(Img/c25.png) no-repeat center;
}



.shop > div[class^="b"] {
    width: 4em;
    height: 4em;
    box-shadow: 0em 0.1em 0.425em #000000bd;
    border-radius: 0.7em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2em 2em;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
} .shop > div[class^="b"]:hover {
    box-shadow: 0em 0.1em 0.525em #000000bd;
    transform: scale(1.1);
}

.b0 {
    background: url(Img/b0.png) no-repeat center;
}
.b1 {
    background: url(Img/b1.png) no-repeat center;
}
.b2 {
    background: url(Img/b2.png) no-repeat center;
}
.b3 {
    background: url(Img/b3.png) no-repeat center;
}
.b4 {
    background: url(Img/b4.png) no-repeat center;
}
.b5 {
    background: url(Img/b5.png) no-repeat center;
}
.b6 {
    background: url(Img/b6.png) no-repeat center;
}
.b7 {
    background: url(Img/b7.png) no-repeat center;
}
.b8 {
    background: url(Img/b8.png) no-repeat center;
}
.b9 {
    background: url(Img/b9.png) no-repeat center;
}
.b10 {
    background: url(Img/b10.png) no-repeat center;
}
.b11 {
    background: url(Img/b11.png) no-repeat center;
}
.b12 {
    background: url(Img/b12.png) no-repeat center;
}
.b13 {
    background: url(Img/b13.png) no-repeat center;
}
.b14 {
    background: url(Img/b14.png) no-repeat center;
}
.b15 {
    background: url(Img/b15.png) no-repeat center;
}
.s {
    width: 100%;
    height: 2em;
}


.table {
    position: absolute;
    top: 55%;
    left: 0;
    width: 15em;
    height: 30em;
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    justify-content:space-evenly;
    background: transparent;
    backdrop-filter: blur(1em);
    box-shadow: 0em 0.1em 0.425em #000000bd;
    border-radius: 1em;
    border: 5px dashed transparent;
    z-index: 3;
    transition: all 0.5s ease-in-out;
}

.table .sum {
    width: 90%;
    height: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 0em 0.1em 0.325em #000000bd;
    border-radius: 0.4em;
    padding: 0 2em;
    font-size: 1.3em;

}

.table div[class^='p'] {
    width: 90%;
    height: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: blur(1em);
    box-shadow: 0em 0.1em 0.325em #000000bd;
    border-radius: 0.4em;
    cursor: pointer;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    transition: all 0.3s ease-in-out;
} .table div[class^='p']:hover {
    box-shadow: 0em 0.1em 0.425em #000000bd;
    transform: scale(1.07);
}

.scoreNm {
    transition: all 0.4s ease-in-out;
}

.outer {
    position: absolute;
    width: 102vw;
    height: 105vh;
    top: -1em;
    left: -1em;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    box-shadow: 0em 0.1em 0.625em #000000bd;
    backdrop-filter: blur(.2em);
    background: transparent;
    transition: all 0.5s ease-in-out;
    z-index: 11;
    display: none;
}

.inner, .board {
    width: 30em;
    height: 13em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    box-shadow: 0em 0.1em 0.625em #000000bd;
    background: #ffffff37;
    border-radius: 1em;
    transition: all 0.5s ease-in-out;
    z-index: 12;
}
.board {
    width: 28em;
    height: 11em;
    flex-direction: column;
    align-content: space-evenly;
    justify-content: space-evenly;
    box-shadow: 0em 0.1em 0.425em #000000bd;
    text-align: center;
    left: 150%;
    background: transparent;
    backdrop-filter: blur(1em);
    transition: all 0.2s ease-in-out;
} .board:hover {
    box-shadow: 0em 0.1em 0.625em #000000bd;
}

.board button {
    width: 90%;
    height: 50px;
    text-align: center;
    background: transparent;
    backdrop-filter: blur(1em);
    font-size: 1.2em;
    border: none;
    box-shadow: 0em 0.1em 0.325em #000000bd;
    border-radius: 50em;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s ease-in-out;
    text-shadow: 2px 0 0 #000000, -2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
} .board button:hover {
    box-shadow: 0em 0.1em 0.425em #000000bd;
    transform: scale(1.05);
}




/*// Loader //*/

/*/ Under animation layers /*/
div[class^='layer'] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.layer1 {
    background-color: #fce4e4;
    transition: 1.30s ease-in-out;
    z-index: 4;
}

.layer2 {
    background-color:#7a4d9b;
    transition: 1.15s ease-in-out;
    z-index: 5;
}

/*/ Game Percentage Loading circle /*/
.layer3 {
    background-color:#3a3a3a;
    transition: 1s ease-in-out;
    z-index: 6;
}

._container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: 1s ease-in-out;
    z-index: 7;
}

._outer {
    height: 300px;
    width: 300px;
    background: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 20%, #ff99ac 40%, #ffcdce 60%, #feffdf 80%, #a5ffd6 100%);
    border-radius: 50%;
    margin-top: -70px;
    scale: 1;
}

._outer.active-loader {
    animation: rotate 2s ease infinite;
}
@keyframes rotate {
    to { transform: rotate(360deg); }
}

._outer.active-loader-2 {
    animation: rotate2 3s ease;
}@keyframes rotate2 {
    to { transform: rotate(360deg); }
}

._inner {
    position: absolute;
    width: 275px;
    height: 275px;
    text-align: center;
    line-height: 275px;
    background: #3a3a3a;
    border-radius: 50%;
    margin-top: -69px;
    user-select: none;
    cursor: default;
    box-shadow: 0 0 5px #240f52;
    scale: 1;

    transition: .2s;
    z-index: 7;
}
._inner:hover {
    background: #3a3a3af0;
    cursor: pointer;
}

._inner span {
    font-size: 60px;
    font-weight: 800;
    color: transparent;
    font-family: myFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 20%, #ff99ac 40%, #ffcdce 60%, #feffdf 80%, #a5ffd6 100%);

    -webkit-background-clip: text;
    background-size: 300%;
}

/*/ Process display board /*/
.processing {
    position: absolute;
    width: 400px;
    height: 450px;
    margin: 0;
    top: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: myFont, 'Segoe UI', sans-serif;
    transition: transform 0s;
    scale: 1;
}

.processing .p1, .p2, .p3 {
    width: 400px;
    height: 80px;
    font-size: 17px;
    color: #ff99ac;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    transition: transform 0s;
    opacity: 0;
    scale: 1;
}