/** layout */

.logo {
    display: block;
    margin: 20px auto;
    padding: 0 10px;
    max-width: 200px;
}

video, #cssfilters-video, #screenshot-img {
    clip-path: inset(22% 12% 22% 12%);
    width: 400px;
    height: 300px;
}

video, #cssfilters-stream {
    background: rgba(255,255,255,0.5);
    border: 1px solid #ccc;
}

.center {
    display: block;
    margin: 0 auto;
    padding: 0;
    max-width: fit-content;
}

/** effect */
.grayscale {
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
    filter: grayscale(1);
}

.sepia {
    -webkit-filter: sepia(1);
    -moz-filter: sepia(1);
    -o-filter: sepia(1);
    -ms-filter: sepia(1);
    filter: sepia(1);
}

.blur {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

.brightness {
    -webkit-filter: brightness(5);
    -moz-filter: brightness(5);
    -o-filter: brightness(5);
    -ms-filter: brightness(5);
    filter: brightness(5);
}

.contrast {
    -webkit-filter: contrast(8);
    -moz-filter: contrast(8);
    -o-filter: contrast(8);
    -ms-filter: contrast(8);
    filter: contrast(8);
}

.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    -moz-filter: hue-rotate(90deg);
    -o-filter: hue-rotate(90deg);
    -ms-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}

.hue-rotate2 {
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.hue-rotate3 {
    -webkit-filter: hue-rotate(270deg);
    -moz-filter: hue-rotate(270deg);
    -o-filter: hue-rotate(270deg);
    -ms-filter: hue-rotate(270deg);
    filter: hue-rotate(270deg);
}

.saturate {
    -webkit-filter: saturate(10);
    -moz-filter: saturate(10);
    -o-filter: saturate(10);
    -ms-filter: saturate(10);
    filter: saturate(10);
}

.invert {
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);
    filter: invert(1);
}