or 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 (orientation: landscape) {
.sidebar {
width: 500px; } }

@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) {
div {}
}

@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;
}


/**
* SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html
*/
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.

#sidebar { width: grid-width(5); }

#main {
content: $content;
new-content: $new_content;
}

#main {
$width: 5em !global;
width: $width;
}

#main {
@import "example";
}

#main {
color: black;
&-sidebar { border: 1px solid; }
}

#main p {
color: #00ff00;
width: 97%;

.redbox {
background-color: #ff0000;
color: #000000;
}
}

#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}

.sidebar {
float: left;
margin-left: pow(4, 3) * 1px;
}

.banner {
background-color: $primary-color;
color: scale-color($primary-color, $lightness: +40%);
}

.micro {
width: sum(50px, 30px, 100px);
width: min($widths...);
}

a.funky:hover {
font: 20px/24px fantasy {
weight: bold;
}
}

.foo.bar .baz.bang, .bip.qux {
$selector: &;
}

ul, ol {
text-align: left;

& & {
padding: {
bottom: 0;
left: 0;
}
}

font-size: scale-below(20px, 16px);
border-radius: $border-radius;
box-shadow: $box-shadow;
}

ul li {
$padding: 16px;
padding-left: $padding;
[dir=rtl] & {
padding: {
left: 0;
right: $padding;
}
}
}

div {
background-image: url("/icons/#{$name}.svg");
font: #{"string"};
}

p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
font: (italic bold 10px/8px); // In a list, parentheses don't count
}

p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}

p {
color: #010203 + #040506;
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

p {
color: opacify($translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}

div {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

p {
cursor: e + -resize;
}

p {
width: 1em + (2em * 3);
width: #{$n}px;
}

p {
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

:root {
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-monospace: #{inspect($font-family-monospace)};
}

p:before {
font-family: sans- + "serif";
content: "Foo " + Bar;
content: "I ate #{5 + 10} pies!";
content: "I ate #{$value} pies!";
}

a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}


#context a%extreme a %extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}

%strong-alert:hover {
color: red;
}
.alert:hover, %strong-alert {
font-weight: bold;
}


p.#{$name} {
#{$attr}-color: blue;
}

p {
background: {
color: red;
}
background-#{prop}: red;
#{prop}-color: red;

#a#{""}c .a#{""}c a#{""}c {
}
}

.icon-#{$name} {
position: absolute;
#{$top-or-bottom}: 0;
-#{$prefix}-#{$property}: $value;
.icon-#{$name} {
position: absolute;
#{$top-or-bottom}: 0;
-#{$prefix}-#{$property}-image: $value
}
}


@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}

@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
}
* html & { height: 1px }
}

@mixin apply-to-ie6-only {
* html {
@content;
}
}

@mixin highlighted-background { background-color: #fc0; }

@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
color: #ff0000;
}

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

@mixin define-emoji($name, $glyph) {
span.emoji-#{$name} {
font-family: IconFont;
}
}

@mixin styles {
code {
border-radius: $-border-radius;
box-shadow: -box-shadow();
}
}

@mixin rtl($property, $ltr-value, $rtl-value) {
#{$property}: $ltr-value;

[dir=rtl] & {
#{$property}: $rtl-value;
}
}

@mixin replace-text($image, $x: 50%, $y: 50%) {
text-indent: -99999em;
overflow: hidden;
text-align: left;

background: {
image: $image;
repeat: no-repeat;
position: $x $y;
}
}

@mixin btn($args...) {
@warn "The btn() mixin is deprecated. Include button() instead.";
@import url("http://fonts.googleapis.com/css?family=#{$family}");
@include button($args...);
}

@mixin hover {
&:not([disabled]):hover {
@content;
}
}

@mixin adjust-location($x, $y) {
@if unitless($x) {
@error "$x may not be unitless, was #{$x}.";
@warn "Assuming #{$x} to be in pixels";
$x: 1px * $x;
}
@if unitless($y) {
@error "$y may not be unitless, was #{$y}.";
@warn "Assuming #{$y} to be in pixels";
$y: 1px * $y;
}
position: relative; left: $x; top: $y;
}

@mixin avatar($size, $circle: false) {
width: $size;
height: $size;

@if $circle != 0 {
border-radius: math.div($size, 2);
}
}

@mixin theme-colors($light-theme: true) {
@if $light-theme {
background-color: $light-background;
color: $light-text;
} @else {
background-color: $dark-background;
color: $dark-text;
}
}

@mixin configure($black: null, $border-radius: null, $box-shadow: null) {
@if $black {
$-black: $black !global;
}
@if $border-radius {
$-border-radius: $border-radius !global;
}
}

@mixin does-parent-exist {
@if & {
&:hover {
color: red;
}
} @else {
a {
color: red;
}
}
}

@mixin order($height, $selectors...) {
@for $i from 0 to length($selectors) {
#{nth($selectors, $i + 1)} {
position: absolute;
height: $height;
margin-top: $i * $height;
}
}
}

@mixin syntax-colors($args...) {
@debug meta.keywords($args);
// (string: #080, comment: #800, variable: #60b)

@each $name, $color in meta.keywords($args) {
pre span.stx-#{$name} {
color: $color;
}
}
}

@mixin media($types...) {
@each $type in $types {
@media #{$type} {
@content($type);
}
}
}

@mixin reflexive-position($property, $value) {
@if $property != left and $property != right {
@error "Property #{$property} must be either left or right.";
}

$left-value: if($property == right, initial, $value);
$right-value: if($property == right, $value, initial);

left: $left-value;
right: $right-value;
[dir=rtl] & {
left: $right-value;
right: $left-value;
}
}

@mixin prefix($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if not index($known-prefixes, $prefix) {
@warn "Unknown prefix #{$prefix}.";
}

-#{$prefix}-#{$property}: $value;
}
#{$property}: $value;
}

@mixin inset-divider-offset($offset, $padding) {
$divider-offset: (2 * $padding) + $offset;
@debug "divider offset: #{$divider-offset}";

margin-left: $divider-offset;
width: calc(100% - #{$divider-offset});
}


@mixin sticky-position {
position: fixed;
@supports (position: sticky) {
position: sticky;
}
}


@at-root (without: media) {
color: #111;
}
@at-root (with: rule) {
font-size: 1.2em;
}

@mixin unify-parent($child) {
@at-root #{selector.unify(&, $child)} {
@content;
}
@at-root #{selector-unify(&, $child)} {
@content;
}
}

@media print {
.page {
width: 8in;
@at-root (without: media) {
color: red;
}
}
}

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

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

@media (min-width: $layout-breakpoint-small) {
.hide-extra-small {
display: none;
}
}

@media (hover: hover) {
.button:hover {
border: 2px solid black;

@media (color) {
border-color: #036;
}
}
}

@media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
}


@extend .error;

.hoverlink {
@extend a:hover;
@extend %extreme;
@extend .message;
@extend .notice !optional;
border-width: 3px;
}

.error {
border: 1px #f00;
background-color: #fdd;

&--serious {
@extend .error;
border-width: 3px;
}
}


p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}

p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}


@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}

@each $name, $glyph in $icons {
.icon-#{$name}:before {
display: inline-block;
font-family: "Icon Font";
content: $glyph;
}
}

@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}

@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}


@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}

@for $i from 1 to 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}


@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}


@include order(150px, $form-selectors...);
@include order(150px, "input.name", "input.address", "input.zip");
@include unify-parent("input") { }
@include google-font("Droid Sans");
@include library.styles;
@include library.configure(
$black: #222,
$border-radius: 0.1rem
);
@include firefox-message(".header");
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
}

@include media(screen, print) using ($type) {
h1 {
font-size: 40px;
@if $type == print {
font-family: Calluna;
}
}
}

p { @include sexy-border(blue, 1in); }
h1 { @include sexy-border($color: blue, $width: 2in); }
nav ul {
@include corners.rounded;
padding: 5px + corners.$radius;
@include horizontal-list;
@include rtl(float, left, right);
@include hover {
border-width: 2px;
}
@include replace-text(url("/images/mail.svg"), 0);
@include square(100px, $radius: 4px);
// Oops, we typo'd "webkit" as "wekbit"!
@include prefix(transform, rotate(15deg), wekbit ms);
}

.primary {
@include colors($value-map...);
}
.box { @include border-radius(10px); }

.wrapper .field {
@include unify-parent("input") {
/* ... */
}
@include unify-parent("select") {
/* ... */
}
}

.banner {
@include theme-colors($light-theme: true);
body.dark & {
@include theme-colors($light-theme: false);
}
}



@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}

@function scale-below($value, $base, $ratio: 1.618) {
@while $value > $base {
$value: math.div($value, $ratio);
}
@return $value;
}

/// If the user has configured `$-box-shadow`, returns their configured value.
/// Otherwise returns a value derived from `$-black`.
@function -box-shadow() {
@return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
}

@function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
$result: $result * $base;
}
@return $result;
}

@function invert($color, $amount: 100%) {
$inverse: change-color($color, $hue: hue($color) + 180);
@return mix($inverse, $color, $amount);
}

@function sum($numbers...) {
$sum: 0;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}

@function fg($args...) {
@warn "The fg() function is deprecated. Call foreground() instead.";
@return foreground($args...);
}

@function str-insert($string, $insert, $index) {
// Avoid making new strings if we don't need to.
@if string.length($string) == 0 {
@return $insert;
}

$before: string.slice($string, 0, $index);
$after: string.slice($string, $index);
@return $before + $insert + $after;
}


// Variable define

$image-path: "../../static/images";
$-text-color: #333 !default; // Default can be overrided
$default-font-size: 16px !default;
$default-font-family: Roboto, "Droid Sans", sans-serif;
$default-font-weight: 400;
$default-line-height: $default-font-size * 1.8;
$shadow-transparence: 0.25;
$box-shadow: 0 0 3px rgba(0,0,0,$shadow-transparence);
$page-width: 100rem; // kabab-case
$gapOfArticle: 20px; // camelCase
$body_background_color: white; // snake_case
$-box-shadow: null;
$sizes: 40px, 50px, 80px;
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
$map: (key1: value1, key2: value2, key3: value3);
$icons:
"eye" "\f112" 12px,
"start" "\f12e" 16px,
"stop" "\f12f" 10px;
$known-prefixes: webkit, moz, ms, o;
$primary-color: #036;
$form-selectors: "input.name", "input.address", "input.zip" !default;
$color1: hsl(120deg, 100%, 50%);
$color2: rgb($red, $green, blue($color1));
$color3: mix($color1, $color2, [$weight]);
$translucent-red: rgba(255, 0, 0, 0.5);
$name: foo;
$attr: border;
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
$values: #ff0000, #00ff00, #0000ff;
library.$color: blue;


// Nesting

#home-page {

header {
width: 80%;
margin: 0 auto;

.cover {
@include border-radius(20px);
max-width: 100%;

&:hover {
background: #ffffff;
}

.like-button {
font-size: $default-font-size * 0.8;

@media (max-width: 300px) and (min-width: 200px) {
font-size: $default-font-size * 0.8;

.icon {
width: 20px;
height: 20px;
}
}

@media print {
display: none;
}
}
}
}
}


@use "sass:selector";
@use 'library';
@use "src/corners" as *;
@use "src/corners" as c;
@use 'opinionated' with ($black: #333);
@use 'library' with (
$black: #222,
$border-radius: 0.1rem
);

@forward "src/list" hide list-reset, $horizontal-list-gap;
@forward "src/list" as list-*;
@forward 'library' with (
$black: #222 !default,
$border-radius: 0.1rem !default
);

@import url("http://fonts.googleapis.com/css?family=#{$family}");
@import 'foundation/code', 'foundation/lists';
@import "http://fonts.googleapis.com/css?family=Droid+Sans";

@error "Property #{$property} must be either left or right.";
@error var(--abcd);

@debug 10em + 12em;
@debug library.$color; //=> blue
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)
@debug -webkit-flex; // -webkit-flex


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

#{$x}% {
margin-left: 90%;
width: 150%;
}

70% {
margin-left: 90%;
width: 150%;
}
}