.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;
    }

    &-title {
        color: $white;
        text-shadow: 1px 1px 2px $dark;
        background-image: linear-gradient(transparent, rgba(0,0,0,0.7));
    }

    &-cover {
        height: calc(100% - 5px);
        top: 0;
        width: 100%;
    }

}

.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%;
    }
}