    /**
     * This is a pseudo CSS file to test Kate's CSS syntax highlighting.
     */

    /* Properties */

    body {
    	font-size: 15pt;
    	font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
    	margin-top: 0px;			/* yet another comment */
    	margin-bottom: 0px;
    	// this is no comment, it's just broken!
    	background-color: hsl(0, 0%, calc(95% - 3%));
        font-family: "Droid Sans", Arial, sans-serif;
        font-size: 11pt;
        line-height: 1.5em;
        background: #fff000;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
    	font-variant-alternates: styleset(nice-style);
    }

    /* Selectors */

    body, blockquote {
        margin: 0;
    }

    header #logo {
        width: 100px;
    }

    div#footer .link {
        color: blue;
    }

    .something
    {
    	margin-right: 0px;
    	color: #cdd;
    	color: #AAFE04;
    	color: rgb(10%,30%,43%);
    	background: maroon;
    }

    sidebar #subscribe .subscribe_form input[type="text"] {
        font-size: 20px;
    }

    sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] {
        font-weight: bold;
    }

    input[value=text]
    input[value= text ]
    input[value= text i]
    input[value= "text" i]
    input[value=i]
    input[value= i] {
        font-size: 20px;
    }

    #header,
    a:hover,
    p.intro:first-letter,
    p:lang(nl),
    img[align="right"]
    {
    	border: 1px solid Qt::red !important;
    	-moz-border-radius: 15px; /* unknown properties render italic */
    }

    .nice-look {
    }

    ul {
    	list-style: thumbs;
    }

    /* SVG <a> */
    svg|a {}

    /* XHTML and SVG <a> */
    *|a {}

    *{}
    .class{}
    #id{}
    :hover{}
    :lang(fr){}
    E{}
    E F{}
    E>F{}
    E > F{}
    E~F{}
    E ~ F{}
    E:first-child{}
    E:visited{}
    E::after{}
    E:lang(c){}
    E:lang(fr-ca){}
    E + F{}
    E+F{}
    E[foo]{}
    E[foo=warning]{}
    E[foo="warning"]{}
    E[foo~="warning"]{}
    E[foo^="warning"]{}
    E[foo$="warning"]{}
    E[foo*="warning"]{}
    E[lang|="en"]{}
    DIV.warning{}
    DIV .warning{}
    E#myid{}
    E #myid{}
    E,E{}
    E, E{}
    E ,E{}
    E , E{}

    p:nth-child(2) {
    	background: red;
    }

    /* Elements that are not <div> or <span> elements */
    body :not(div):not(span) {
    	font-weight: bold;
    }

    /* Elements that are not `.crazy` or `.fancy` */
    /* Note that this syntax is not well supported yet. */
    body :not(.crazy, .fancy) {
    	font-family: sans-serif;
    }

    :nth-child(odd) { color: lime; }
    :nth-child(even) { color: lime; }
    :nth-child(4) { color: lime; }
    :nth-child(4n) { color: lime; }
    :nth-child(3n+4) { color: lime; }
    :nth-child(-n+3) { color: lime; }
    :nth-child(n+8):nth-child(-n+15) { color: lime; }

    .first span:nth-child(2n+1),
    .second span:nth-child(2n+1),
    .third span:nth-of-type(2n+1) {
    	background-color: lime;
    	unknown-property: lime;
    }

    :root{
    	--foo: if(x > 5) this.width = 10; /* valid custom property, invalid in any normal property */
    }

    :root,
    :root:lang(en) {--external-link: "external link";}
    :root:lang(de) {--external-link: "externer Link";}

    a[href^="http"]::after {content: " (" var(--external-link) ")"}

    one   { --foo: 10px; }
    two   { --bar: calc(var(--foo) + 10px); }
    three { --foo: calc(var(--bar) + 10px); }
    .foo {
    	--gap: 20;
    	margin-top: var(--gap)px; /*20 px*/
    	margin-top: calc(var(--gap) * 1px); /*20px*/
    }

    foo {
    	width: calc(50% -8px); /* invalid */
    	width: calc(50%- 8px); /* invalid */
    	width: calc(50% +8px); /* invalid */
    	width: calc(50%+ 8px); /* invalid */
    	width: calc(2px -var(--a)); /* invalid */
    	width: calc(50%*-8px);
    	width: calc(50% - 8px);
    	width: calc(50% + -8px);
    	width: calc(50% +(8px));
    	width: calc(2px -(var(--a)));
    }

    sweet-alert input:focus::-moz-placeholder {
    	-webkit-transition: opacity 0.3s 0.03s ease;
    	transition: opacity 0.3s 0.03s ease;
    	opacity: 0.5;
    }

    @font-feature-values Font One {
    	@styleset {
    		nice-style: 12;
    	}
    }

    @font-feature-values Font Two {
    	@styleset {
    		nice-style: 4;
    	}
    }

    @font-palette-values --identifier {
      font-family: Bixa;
    }

    @counter-style thumbs {
    	system: cyclic;
    	symbols: "\1F44D";
    	suffix: " ";
    }

    @font-face {
    	font-family: "Open Sans";
    	/* comments */
    	unknown: 2px;
    	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    	url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }

    @page {
    	margin: 1cm;
    }

    @page :first {
    	margin: 2cm;
    	/* comments */
    	marks: crop cross;
    }

    @page :unknown {
    	margin: 2cm;
    }

    @document url("https://www.example.com/") {
    	h1 {
    		color: green;
    	}
    }

    @charset "UTF-8";

    @import 'custom.css';
    @import "common.css" screen;
    @import url("fineprint.css") print;
    @import url(fineprint.css) print;
    @import url('bluish.css') speech;
    @import url("chrome://communicator/skin/");
    @import url('landscape.css') screen and (orientation:landscape);
    @import url("othersheet.css") screen, print;

    @namespace url(http://www.w3.org/1999/xhtml);
    @namespace svg url(http://www.w3.org/2000/svg);

    /* Animation (Keyframes) */

    @keyframes important1 {
    	from { margin-top: 50px; }
    	50%  { margin-top: 150px !important; } /* ignored */
    	to   { margin-top: 100px; }
    }

    @keyframes important2 {
    	from { margin-top: 50px;
    		margin-bottom: 100px; }
    	to   { margin-top: 150px !important; /* ignored */
    		margin-bottom: 50px; }
    }

    @keyframes slidein {
    	from {
    		margin-left: 100%;
    		width: 300%;
    	}

    	to {
    		margin-left: 0%;
    		width: 100%;
    	}
    }

    /* Media Queries */

    @media print {
        .container {
            width: 100%;
        }
    	a:hover { color: red }
    	/* comments */
    	a:hover { color: red }

    	#header
    	{
    		display: none;
    	}
    }

    @media screen and (min-width: 768px) and (max-width: 960px) {
        .container {
            width: 720px;
        }
    }

    @media (max-width: 600px) {
    	.sidebar {
    		display: none;
    	}
    }

    @media print {
    }

    @media (height > 600px) {
      body {
        line-height: 1.4;
      }
    }

    @media (400px <= width <= 700px) {
      body {
        line-height: 1.4;
      }
    }

    @supports (display: grid) {
    	div {
    		display: grid;
    	}
    }

    @supports font-tech(color-COLRv1) {
      font-family: "Bungee Spice";
    }

    @supports not (not (transform-origin: 2px)) {
      div {}
    }

    @supports (display: grid) and (not (display: inline-grid)) {
      div {}
    }

    /*
     * CSS Syntax Highlight Sample File (Standard)
     *
     * This file contains most CSS syntax, CSS3 properties, @media, @font-face and
     * @keyframes annotations.
     *
     * @author  Guo Yunhe guoyunhebrave@gmail.com
     * @date    2016-09-16
     */

    /*
     * Block comment
     *
     * Alert keywords:
     * TODO BUG FIXME
     */

    /* Region markers */

    /*BEGIN Comment */

    /*END Comment */

    /*
     * CSS Syntax Highlight Sample File (Complex)
     *
     * This file contains complex CSS syntax that can test unexpected situations.
     *
     * @author  Guo Yunhe guoyunhebrave@gmail.com
     * @date    2016-09-16
     */

    /* Comments with special content */

    /*
     * .class-selector #id "string" 'comment' // comment {} [] ()  /* comment
     * TODO BUG DEBUG
     * body {
     *    margin: 0 !important;
     * }
     */

    /* Comments in special positions */

    header/* comment here */.active /* comment here */ {
        /* comment here */ color : /* comment here */ blue/* comment here */;
        font-family: Arial /* comment here */,
            "Droid Sans", /* comment here */
            sans-serif/* comment here */;
    }

    @media screen /* comment here */ and (max-width: 300px /* comment here */) /* comment here */ {/* comment here */}

    /* Strings with special content */

    @import url("{} $variable /* comment */");

    /* Without extra breaklines and spaces */

    pre.primary:hover.large:nth-child(2n-1){font-size:17px;font-family:"Noto Sans";-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3)}

    /* With unnecessary breaklines and spaces */

    blockquote .ref
        {
                 flex : 0 1 30%;
            flex-wrap : wrap;
        }

    @media screen and (orientation: landscape) {
      .sidebar {
        width: 500px; } }

    /* Special selectors: HTML5 allows user defined tags */

    header {
        flex {
            width: 300px;
        }
    }

    /* CSS Nesting */

    header {
        .abc {
            width: 300px;
        }
        width: 300px;
        & width:hover {
            width: 300px;
        }
        width: 300px;
    }