@media only screen and (min-device-width: 375px) and (max-device-width: 890px) and (orientation: landscape) {
    html {
        font-size: 0.7em;
        overflow: hidden;
    }

    .header {
        margin: 10px 20px;
        font-size: 1em;
        display: flex;
    }
    .header .subtext {
        height: fit-content;
        margin: auto 0;
    }
    .header img {
        width: 20px;
        margin-right: 5px;
        filter: brightness(0) saturate(100%) invert(84%) sepia(17%) saturate(603%) hue-rotate(351deg) brightness(103%) contrast(98%);
    }

    .content {
        /* background-image: linear-gradient(to right, rgba(0, 16, 62, 0.8), rgba(0, 16, 62, 0.8), rgba(0, 16, 62, 0.8), rgba(0, 16, 62, 0.8), rgba(0, 16, 62, 0.8), rgba(0, 16, 62, 0.7), rgba(0, 16, 62, 0.6), rgba(0,0,0,0)); */
        width: 100%;
        overflow: hidden;
    }

    .c1 {
        width: 26%;
        padding: 8px 0 0 0;
    }

    .c1 #char-list {
        padding: 0;
    }

    .c1 .char-item button {
        border: solid 1px rgb(95,97,105);
        padding: 6px 10px;
        font-size: 1em;
    }
    .c1 .char-item button:hover {
        border: solid 1px rgb(169,168,170);
    }

    .c1 .char-item .char-pic {
        width: 40px;
        height: 40px;
        min-width: 40px;
        max-height: 40px;
        min-width: 40px;
        max-height: 40px;
    }

    .c2-shadow {
        left: calc(26% + 20px);
        width: 58%;
        height: 76%;
    }

    .c2 {
        width: 58%;
        height: 76%;
    }

    .c2 .chat-unselected img {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .c2 .chat-info {
        padding: 10px 20px 5px;
        height: fit-content;
        font-size: 0.9em;
        border-bottom: solid 1px #b7b7b7;
    }

    .chat-list-wrapper {
        height: 80%;
    }

    .c2 .chat-list {
        margin: 0 10px;
        padding: 0 10px;
        max-height: 100%;
    }

    .c2 .chat-list .chat-ts {
        font-size: 0.9em;
        margin: 10px auto;
        width: fit-content;
    }

    .c2 .chat-list .chat-notif img {
        margin-right: 3px;
        width: 16px;
        height: 16px;
        margin-top: 2px;
      }

    .c2 .chat-list .chat-notif {
        margin: 10px auto;
    }

    .c2 .chat-list .chat-bubble {
        margin: 10px 0;
    }

    .c2 .chat-list .chat-bubble .char-pic {
        width: 40px;
        height: 40px;
    }

    .c2 .chat-list .chat-bubble .message {
        padding: 6px 12px;
    }

    .c2 .chat-list .chat-bubble .pic {
        width: 200px;
        border-radius: 10px;
        margin: 5px;
    }

    .c2 .choice-list {
        padding: 3px 15px;
        border-top: solid 1px #b7b7b7;
    }

    .c2 .choice-list .choice-btn {
        padding: 5px 10px;
        margin: 3px 0;
        font-size: 0.85em;
        color: #000;
    }

    .c2 .call-list {
        height: 84%;
        padding: 15px 30px;
    }

    .c2 .call-list .tray .icon img {
        height: 20px;
        width: 20px;
    }

    .c2 .call-list .message.out {
        margin: 15px 0;
    }

    .c2 .call-timer {
        font-size: 0.65em;
        padding-top: 10px;
    }

    .credits, #version {
        font-size: 0.4em;
    }
}