* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../image/bgimage.jpg);
    background-size: 1380px 670px;
}

.highlight {
    font-weight: 900;
}

    .highlight._1 {
        color: #3498db;
    }

    .highlight._2 {
        color: deepskyblue;
        font-weight: bold;
    }

    .highlight._3 {
        color: deepskyblue;
        font-weight: bold;
    }

.retry-text {
    position: absolute;
    top: 38%;
    pointer-events: none;
    user-select: none;
}

    .retry-text .char {
        font-size: 12vmin;
        font-weight: 800;
        letter-spacing: 5px;
    }

        .retry-text .char::before {
            pointer-events: none;
            content: attr(data-char);
            position: absolute;
            visibility: visible;
            color: #fff;
            transition: all 200ms cubic-bezier(0.1, 0.1, 0.33, 1);
            transition-delay: calc(0.16s + (0.03s * (var(--char-index))));
        }

.char {
    overflow: hidden;
    color: transparent;
}

.hide .char::before {
    transform: translateY(50%);
    opacity: 0;
}

.show .char::before {
    transform: translateY(0);
    opacity: 1;
}

.retry-btn {
    position: absolute;
    top: 54%;
    background: black;
    font-size: 1.1em;
    border: none;
    outline: none;
    color: black;
    width: 130px;
    height: 56px;
    cursor: pointer;
    transition: all 180ms cubic-bezier(0.075, 0.82, 0.165, 1);
    user-select: none;
    font-family: monospace;
    font-size: 22px;
    box-shadow: 11px 11px red;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-weight: bold;
}

    .retry-btn.hide {
        pointer-events: none;
        opacity: 0;
    }

    .retry-btn.show .char {
        color: #fff;
    }

    .retry-btn:hover {
        background: blueviolet;
        backdrop-filter: blur(2px);
        border-color: #fff;
    }

    .retry-btn .char {
        font-size: 0.9em;
        font-weight: 900;
    }

    .retry-btn:focus {
        outline: none;
    }

.startmsg {
    margin-top: -38px;
    position: absolute;
    font-size: 1.5rem;
    color: lawngreen;
    font-family: monospace;
    text-transform: uppercase;
    font-weight: bold;
}

.hint {
    text-align: center;
    color: cornsilk;
    font-size: 23px;
    margin-top: 13px;
    font-family: monospace;
    text-transform: uppercase;
    font-weight: bold;
}

.hinttext {
    margin-top: -21px;
}

.end-screen {
    position: absolute;
    background: rgba(0, 0, 0, 0.45);
    width: 336px;
    height: 247px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.endtmsg {
    text-align: center;
    margin-top: 40px;
    font-size: 43px;
    font-family: monospace;
    color: white;
}

.start-screen {
    position: absolute;
    background: rgba(0, 0, 0, 0.45);
    width: 400px;
    height: 300px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

    .start-screen.hide {
        opacity: 0;
        transform: translateY(100%);
        pointer-events: none;
        z-index: -1;
    }

    .start-screen .game-data {
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .start-screen .game-data .name {
            font-size: 1.5rem;
            color: #fff;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 6px;
            margin-top: 45px;
            font-family: monospace;
        }

            .start-screen .game-data .name span:nth-child(1) {
                color: #e74c3c;
            }

            .start-screen .game-data .name span:nth-child(2) {
                color: aqua;
            }

    .start-screen .info {
        width: 100%;
        height: 50%;
        padding: 31px 10px;
        font-size: 14px;
        line-height: 20px;
        color: white;
        font-family: monospace;
    }

    .start-screen .btn.play {
        position: relative;
        width: 103px;
        height: 32px;
        border: none;
        border: 2px solid rgba(255, 255, 255, 0.6);
        cursor: pointer;
        letter-spacing: 2px;
        background: black;
        color: #fff;
        align-self: center;
        margin-top: -10px;
        transition: all 400ms cubic-bezier(0.8, 0, 0.33, 1);
        overflow: hidden;
        border-radius: 16px;
        box-shadow: 9px 9px red;
        margin-top: -3px;
        font-family: monospace;
        font-weight: bold;
        font-size: 20px;
    }

        .start-screen .btn.play::after, .start-screen .btn.play::before {
            position: absolute;
            width: 100%;
            transition: all 400ms cubic-bezier(0.8, 0, 0.33, 1);
            z-index: -1;
        }

        .start-screen .btn.play::before {
            content: "";
            height: 0%;
            left: 0;
            bottom: 0;
            border-radius: 50% 50% 0 0;
            background: #fff;
        }

        .start-screen .btn.play::after {
            content: "PLAY";
            height: 180%;
            right: 0;
            top: 0;
            color: #000;
            transform: translateY(-100%);
            font-size: 1.4em;
        }

        .start-screen .btn.play:hover {
            color: white;
            border-color: #fff;
            font-size: 20px;
            background: blueviolet
        }

            .start-screen .btn.play:hover::after {
                transform: translateY(15%);
            }

            .start-screen .btn.play:hover::before {
                height: 180%;
            }

        .start-screen .btn.play:focus {
            transform: scale(0.9);
            outline: none;
        }

.support {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 5px 0;
}

    .support a {
        margin: 0 10px;
        color: #fff;
        font-size: 1.8rem;
        transition: all 400ms ease;
        text-decoration: none;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        padding: 8px;
        display: flex;
        align-items: center;
        user-select: none;
    }

        .support a span {
            text-transform: uppercase;
            font-size: 1rem;
            margin-right: 10px;
        }

        .support a:hover {
            background: black;
        }

@media screen and (max-width:1000px) {
    .startmsg {
        font-size: 19px;
        margin-top: -23px;
    }

    .start-screen .game-data .name {
        letter-spacing: 0px;
        font-size: 17px;
        margin-top: 26px;
    }

    .start-screen .info {
        width: 53%;
        margin-left: 92px;
    }

    .hint {
        margin-top: -12px;
        font-size: 22px;
    }

    .start-screen {
        height: 393px;
    }

        .start-screen .btn.play {
            margin-top: 30px;
        }

    .canvasscreen {
        height: 901px;
    }
}