@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

html {
    font-size: 16px;
    background-color: #A6A1F2;
   
    --viewheight: 560px;
}

html,
input,
button {
    font-family: 'Montserrat', sans-serif;
    color: #757575;
}

body {
    background: linear-gradient(#FBABAB, #A6A1F2);
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
}

.li-template {
    display: none;
}

html,
body,
.container {
    height: 100%;
}

.container {
    /*min-height: 560px;
    min-height: var(--viewheight);*/
    margin-right: 1.5em;
    margin-left: 1.5em;

    display: flex;
    flex-direction: column;
}

button,
input {
    border-style: none;
    background-color: inherit;
    padding: 0;
    margin: 0;
}

button {
    font-size: 0;
    min-height: 1.5rem;
    min-width: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

button:hover,
label:hover {
    cursor: pointer;
}

button:focus,
input:focus {
    outline: none;
}


/*
 *
 main
 *
 */

main {
    box-sizing: border-box;
    padding-top: 1em;
    padding-bottom: 1em;
    flex-grow: 1;
    max-height: calc(100% - 2em); /* 100% - footer height */
}

.list-box,
.input-box {
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.16);
    border-radius: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

/*
 list
 */

.list-box {
    box-sizing: border-box;
    height: calc(100% - 1em - 2.5em);  /* 100% - margin-bottom - input-box height */
    margin-bottom: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
}
    
    #user-list {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 100%;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    #user-list::-webkit-scrollbar {
        width: 0;  
        background: transparent;
    }

        #user-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            margin-bottom: 1em;
            position: relative;
            padding-left: 0.3em;
            padding-right: 0.3em;
        }

            #user-list li input {
                position: absolute;
                opacity: 0;
                z-index: -999;
            }

            #user-list li label {
                display: flex;
                align-items: center;
                position: relative;
                margin-right: 0.5em;
                overflow: hidden;
            }

                .li-text {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    text-align: left;
                }


                .checkbox-graphic {
                    flex-shrink: 0;
                    height: 23px;
                    width: 23px;
                    margin-right: 0.7em;
                }

                    .checkbox {
                        fill: #fff;
                        stroke: #e5e5e5;
                        stroke-width: 0.1em;
                    }

                    .checkmark {
                        fill: none;
                        stroke: #17c763;
                        stroke-width: 0.2em;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                        stroke-dasharray: 19;
                        stroke-dashoffset: 19;
                        /*transition: stroke-dashoffset 0.2s linear;*/
                    }

        .list-remove {
            background-image: url(../img/delete.svg);
            background-size: 12px;
            opacity: 0;
            transition: opacity 0.5s linear;
            visibility: hidden;
        }

        #user-list li::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 1px;
            border-radius: 1px;
            background-color: #E5E5E5;
            bottom: 0;
            left: 0;
        }

        #user-list li.complete .li-text {
            text-decoration: line-through;
        }

        #user-list li.complete .list-remove {
            visibility: visible;
            opacity: 1;
            transition: opacity 0.5s linear;
        }

        #user-list li.complete .checkmark {
            stroke-dashoffset: 0;
            transition: stroke-dashoffset 0.2s linear;
        }

/*
 form
 */

.input-box {
    height: 2.5em;
    padding-right: 0.7em;
}

    .list-form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

        .form-input {
            flex-grow: 1;
            margin-right: 0.5em;
            position: relative;
        }

            .form-input label {
                font-size: 0;
                display: block;
            }

            #user-input {
                width: 100%;
            }
        
        .form-input::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 1px;
            border-radius: 1px;
            background-color: #E5E5E5;
            bottom: 0;
            left: 0;
        }

        .form-input:focus-within::after {
            background-color: transparent;
        }

        #add-button {
            background-image: url(../img/add.svg);
            background-size: 1rem;
        }    





/*
 *
 footer
 *
 */

footer {
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .footer-text {
        font-size: 0.5625em;
        color: #D1D1D1;
    }



@media (min-width: 500px) {
    main {
        padding-top: 3em;
        padding-bottom: 1em;
    }
    
    .container {
        max-width: 520px;
        width: 80vw;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 2000px) {
    main {
        padding-top: 6em;
        padding-bottom: 2em;
    }
    
    .container {
        min-width: 520px;
        max-width: 26vw;
    }
}

@media (min-width: 2600px) {
    main {
        padding-top: 12em;
        padding-bottom: 4em;
    }

    .container {
        min-width: 676px;
        max-width: 24vw;
    }
}