* {
    font-family: "Be Vietnam Pro", "Noto Sans JP", sans-serif;
}

.main {
    height: 90vh;
    width: 100vw;
}

.menu {
    height: 10vh;
    width: 100vw;

    background-color: #e1e6e3;

    & a {
        height: 10vh;
        width: 50vw;

        background-color: white;
        color: #6ee6a9;

        font-weight: 100;
        font-size: 7.5vmin;
    }

    & a.active {
        background-color: #6ee6a9;
        color: white;
    }
}

#list {
    display: none;
}

.input {
    height: 30vh;
    width: 100vw;
}

.currency {
    display: block;
    height: 10vh;
    width: 90vw;
    font-size: 7.5vmin;
    font-weight: 100;
    justify-content: flex-start !important;
    /* 左寄せ */
}

.money {
    height: 20vh;
    width: 90vw;
    font-weight: 100;
    font-size: 20vmin;
    justify-content: flex-start !important;
    /* 左寄せ */

    font-family: "Noto Sans Mono", monospace;
}

.keyboard {
    height: 20vh;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);

    & .number {
        font-weight: 100;
        font-size: 10vmin;
        font-family: "Noto Sans Mono", monospace;
    }
}

#add {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 10vh;
    width: 100vw;
    font-size: 10vmin;

    background-color: white;
    font-size: 7.5vmin;
    pointer-events: auto;
}

#add.disabled {
    filter: saturate(0);
    pointer-events: none;
}

.add {
    background-color: #6ee6a9;
}

#items {
    height: 90vh;
    width: 100vw;
    overflow-y: scroll;
}

#items .item {
    background-color: white;
    color: #6ee6a9;
    height: 10vh;
    width: 100vw;

    & p {
        font-family: "Noto Sans Mono", monospace;
    }

    & div {
        height: 5vh;
        width: 70vw;
    }

    & p#amount {
        height: 5vh;
        font-size: 5vh;
        width: 70vw;
        justify-content: flex-start !important;
    }

    & p#emoji {
        height: 10vh;
        width: 10vh;
        font-size: 7.5vh;
    }

    & p#date {
        height: 3vh;
        width: 70vw;
        font-size: 2.5vh;
        justify-content: flex-start !important;
    }
}

#sum {
    height: 10vh;
    width: 100vw;
}

#sum .item {
    background-color: #6ee6a9;
    color: white;
    height: 10vh;
    width: 100vw;

    & p {
        height: 10vh;
        width: 90vw;
        font-size: 7.5vh;
        font-family: "Noto Sans Mono", monospace;
        justify-content: flex-start !important;
    }
}

#complete-delete {
    color: #e66e6e;
}