main {
    margin-top: 50px;
}

#letters-wrapper {
    position: relative;
    width: 600px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    justify-content: center;
    align-items: center;
    border:1px solid #FFFFFF;
    padding: 20px;
    color: #FFFFFF;
    margin: auto;
    overflow: hidden;
    display:block;
}

.introduction ul {
    width: 100%;
    display: inline-flex;
    margin: 0;
    padding-bottom: 10px;
}

.introduction li.comment {
    width: 40%;
    text-align: left;
    font-size: 0.7rem;
}

.introduction li.result {
    width: 100%;
    text-align: right;
    font-size: 0.75rem;
}

.cntwithspace, .cntwithoutspce {
    color: #ffa07a;
    font-weight: bold;
}

#contents {
    width: 100%;
    border: 2px solid #f1ffa5;
    background: #3e3939;
    color: #e1e1e1;
    padding: 5px;
}

span.comment {
    display: block;
    text-align: left;
    color: #f1ffa5;
}

@media screen and (max-width: 768px) {
    main {
        margin-top: 0px !important;
        overflow: auto;
        height: 80vh;
        display: block;
    }

    #letters-wrapper {
        width: 90%;
        overflow-y: auto;
    }

    .introduction p {
        font-size: 0.85rem;
    }

    .introduction ul {
        flex-direction: column;
    }

    .introduction li.comment {
        width: 100%;
        text-align: left;
        font-size: 0.85rem;
    }

    .introduction li.result {
        width: 100%;
        text-align: right;
        font-size: 0.75rem;
    }

    #contents {
        width: 100%;
        border: 2px solid #f1ffa5;
        background: #3e3939;
        color: #e1e1e1;
        padding: 5px;
        font-size: 0.7rem;
    }

}