@font-face {
    font-family: "heonian";
    src: url('HeonianAlone.otf');
}

:root {
    --notes-color: rgb(255, 235, 181);
    --spacer-color: rgba(0, 0, 0, 0.4);
    --spacer-color-2: rgba(0, 0, 0, 0.2);
    --left-color: rgb(167, 179, 167);
    --right-color: rgb(97, 206, 97);
    --font-normal: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* --font-heonian: "heonian", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
    --font-heonian: "heonian";
}

body {
    margin: 0;
    font-family: var(--font-normal);
}

main {
    max-width: 600px;
    margin: auto;
}

.convo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px;
}

.right {
    flex-direction: row-reverse;
}

.convo {
    width: 400px;
    border: 1px solid var(--left-color);
    border-radius: 8px;
    padding: 8px;
}

.right .convo {
    border: 1px solid var(--right-color);
}

.convo p {
    margin: 0;
    margin-top: 8px;
}

.convo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
}

.convo-header img {
    border-radius: 42069px;
    width: 48px;
    margin-right: 8px;
}

.convo-date {
    font-size: 0.75rem;
    color: var(--spacer-color);
    flex-grow: 1;
    text-align: right;
}

.convo-heonian {
    font-family: var(--font-heonian);
    word-break: break-all;
}

.notes {
    width: 300px;
    margin: 8px;
    border-top: 1px solid var(--notes-color);
    border-bottom: 1px solid var(--notes-color);
    text-align: center;
}

.spacer {
    width: calc(100% - 16px);
    height: 1px;
    margin-top: 8px;
    margin-bottom: 8px;
    margin: auto;
    background-color: var(--spacer-color);
}

.words {
    text-align: center;
}

.words table {
    margin: auto;
    border-collapse: collapse;
    text-align: left;
}

.words table td,
.words table th {
    padding: 8px;
    border-right: 1px solid var(--spacer-color-2);
}

.words table td:last-child,
.words table th:last-child {
    border-right: none;
}

.words table th {
    border-top: 1px solid var(--spacer-color);
    border-bottom: 1px solid var(--spacer-color);
}

.words table td:first-of-type {
    font-family: var(--font-heonian);
}

.clickable {
    cursor: pointer;
}

#popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    /* backdrop-filter: blur(20px); */
    /* -webkit-backdrop-filter: blur(20px); */
    /* above is completely unnecessary, but looks pretty */
    transition: opacity 0.3s;
    cursor: pointer;
}

#popup {
    width: 300px;
    background-color: white;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    cursor: default;
}

#popup h1 {
    text-align: center;
}

#popup-heo {
    font-family: "heonian";
}

data-swap {
    display: none;
}

.button {
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}