.memo {

    &-list {

        h1 {
            font-size: 2.2rem;
        }

        a {
            text-decoration: none;
        }

        &:nth-child(even) {
            background-color: $light;
        }

        &:hover {
            background-color: $mediumLight;

            .memo-date {
                opacity: 1;
            }
        }
    }

    &-date {
        opacity: 0.6;
    }

    &-change {
        text-align: right;
        background: $greyLight;
        padding: 0.5rem 1rem;
    }

}

.memo-edit {

    .memo-text-area textarea {
        height: 50vh;
    }

}

.memo-style {
    p {
        margin: 0.25rem 0 0.5rem;
    }

    code,
    pre {
        background-color: $greyLight;
    }

    pre {
        padding: 0.5rem;
    }

    a {
        color: $mediumDark;

        &:hover {
            text-decoration: underline;
        }
    }

    img {
        width: 100%;
    }
}