@media only screen and (min-width: 1px ) {

    .dat{
        width:3rem;
    }

    #tafel {
        padding: 0.3em;
        height:90vh;
        overflow:scroll;
    }

    h1 {
        font-size: xx-large;
        font-family: Arial;
    }


    h2 {
        font-size: x-large;
        text-align: left;
    }

    h3 {
        font-size: large;
        text-align: left;
    }

    h4 {
        font-size: large;
        text-align: center;
        color: white;
        background-color: black;
    }


    li {
        font-size: 1.3rem;
        line-height: 1.2;
    }


    .imgtd {
        width: 100%;
        height: auto;
    }

    .ql-size-small {
        font-size: .75em
    }

    .ql-editor .ql-size-small {
        font-size: .75em
    }

    .ql-editor .ql-size-large {
        font-size: 1.5em
    }

    .ql-editor .ql-size-huge {
        font-size: 2.5em
    }

    .ql-snow .ql-editor h1 {
        font-size: 5em
    }

    .ql-snow .ql-editor h2 {
        font-size: 3.5em
    }

    .ql-snow .ql-editor h3 {
        font-size: 3.17em
    }

    .ql-snow .ql-editor h4 {
        text-align: center;
        font-size: 3.2em;
        color: white;
        background-color: black;
    }

    .ql-snow .ql-editor h5 {
        font-size: .83em
    }

    .ql-snow .ql-editor h6 {
        font-size: .67em
    }

    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        font-size: 2em
    }

    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        font-size: 1.5em
    }

    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        font-size: 1.17em
    }

    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        font-size: 1em
    }

    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        font-size: .83em
    }

    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        font-size: .67em
    }

    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
        font-size: 10px
    }

    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
        font-size: 18px
    }

    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
        font-size: 32px
    }
}
@media only screen and (min-width: 800px ) {
    #tafel {
        padding: 1.3rem;
    }

    h1 {
        font-size: 4em;
        text-align: left;
    }

    h2 {
        font-size: 3.7em;
        text-align: left;
    }

    h3 {
        font-size: 3.2em;
        text-align: left;
    }

    h4 {
        font-size: 4.2em;
        text-align: center;
        color: white;
        background-color: black;
    }

    li {
        font-size: 3em;
        line-height:0.4;
    }

    p {
        font-size: 3em;
    }

    .ql-ui {
        font-size: 3em;
    }

    .ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after {
        clear: both;
        content: '';
        display: table
    }

    .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
        background: none;
        border: none;
        cursor: pointer;
        display: inline-block;
        float: left;
        height: 24px;
        padding: 3px 5px;
        width: 28px
    }

        .ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg {
            float: left;
            height: 100%
        }

        .ql-snow.ql-toolbar button:active:hover, .ql-snow .ql-toolbar button:active:hover {
            outline: none
        }

    .ql-snow.ql-toolbar input.ql-image[type=file], .ql-snow .ql-toolbar input.ql-image[type=file] {
        display: none
    }

    .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
        color: #06c
    }

        .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
            fill: #06c
        }

        .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
            stroke: #06c
        }

    @media (pointer:coarse) {
        .ql-snow.ql-toolbar button:hover:not(.ql-active), .ql-snow .ql-toolbar button:hover:not(.ql-active) {
            color: #444
        }

            .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
                fill: #444
            }

            .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
                stroke: #444
            }
    }

    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 15px
    }

    .ql-snow .ql-formats {
        display: inline-block;
        vertical-align: middle
    }

        .ql-snow .ql-formats:after {
            clear: both;
            content: '';
            display: table
        }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
        content: attr(data-label)
    }

}