@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap");

.tm__wrapper {
    position: fixed;
    top: 0;
    z-index: 10000;
    left: 0;
    right: 0;
    padding: 0 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #ecf0f1;
}

.tm__container {
    border: 4rem solid #182c61;
    border-radius: 2rem;
}

.tm__box {
    width: 100%;
    border: 4px solid #e67e22;
}

.tm__content {
    font-size: 16px;
    letter-spacing: 2px;
    text-align: justify;
    word-break: break-all;
    padding: 1rem;
    font-weight: 400;
}

.tm__content span.correct {
    color: #114b29;
    background: #bdf7d5;
}

.tm__content span.incorrect {
    color: #581c15;
    background: #f8cdc8;
}

.tm__content span.active {
    color: #154f75;
    position: relative;
}

.tm__content span.active::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 1px;
    height: 2px;
    animation: blink 1s ease-in-out infinite;
    background: #154f75;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.tm_detail {
    display: flex;
    border-top: 1px solid #cecece;
    background: #182c61;
    color: #ecf0f1;
    margin-top: 10px;
    padding: 10px 1rem;
    justify-content: space-between;
    align-items: center;
}

.tm_detail button:first-child {
    background: #16a085;
}

.tm_detail button {
    border: none;
    outline: none;
    box-shadow: none;
    padding: 10px 20px;
    background: #d35400;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
}

.tm_detail li {
    display: flex;
    column-gap: 8px;
}

.tm_detail li span:nth-child(2) {
    font-weight: bold;
}

.tm__input {
    position: absolute;
    height: 0;
    left: -1000px;
    border: none;
    outline: none;
    opacity: 0;
}