core.scss

/*!
/*   ▄▄^▄▄   *\   
  '█▀ o_° ▀█' 
 '█▄▄▄▄▄▄▄▄▄█⁣'
 '█𝘮𝘶𝘧𝘧𝘪𝘯.𝙘𝙨𝙨█'
   █▄▄▄▄▄▄▄█   
\*   ©2018b   */

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡⚡ scss.funktionen
$prefix-list: '-webkit-', '-apple-', '-khtml-', '-icab-', '-moz-', '-wap-', '-ms-', '-xv-', '-o-', '';
@function even($number){@return$number%2==0;}@function str-replace($string,$search,$replace:''){$index:str-index($string,$search);@if$index{@return str-slice($string,1,$index - 1)+$replace+str-replace(str-slice($string,$index+str-length($search)),$search,$replace)}@return$string}@function to-string($value){@return#inspect($value)}@function contains($input,$check){$value:str-index(inspect($input),$check);$bool:false;@if($value==1){$bool:true}@return$bool}@function format($input,$num){$output:"";@if(even($num)&&$num!=20){$output:inspect($input)+"0"}@if($num==20){$output:inspect($input)+""}@else{$output:str-replace(inspect($input),'.','')}@return$output}
//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡Mixins
@mixin border-radius($value) {
@each$prefix in $prefix-list {
            #{$prefix}border-radius:$value;
        }
}
@mixin calc($value) {
@each$prefix in $prefix-list {
            #{$prefix}calc:$value;
        }
}
@mixin translate($v1, $v2) {
@each$prefix in $prefix-list {
            #{$prefix}transform: translate($v1,$v2);
        }
}
@mixin translateX($value) {
@each$prefix in $prefix-list {
            #{$prefix}transform: translateX($value);
        }
}
@mixin translateY($value) {
@each$prefix in $prefix-list {
            #{$prefix}transform: translateY($value);
        }
}
//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡css.reset
*, *:after, *:before, *::after, *::before, :root { -webkit-tap-highlight-color: transparent;@each$prefix in$prefix-list { $i: index($prefix-list, $prefix); #{$prefix}box-sizing: border-box } overflow:visible; margin:0; padding:0; background-color:transparent; border:none; text-decoration:none; user-select:none; list-style:none; position:relative } body,form, html {overflow: hidden; @each$prefix in$prefix-list { $i: index($prefix-list, $prefix); #{$prefix}text-rendering: optimizeLegibility; #{$prefix}font-smoothing: antialiased; #{$prefix}text-size-adjust: 100%; } font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif"; font-weight: 200;font-size: 100%; word-wrap: normal;word-break:normal; height:100%; position: absolute; width:100%; -webkit-tap-highlight-cellor:transparent; font-family:sans-serif; margin:0; padding:0; } article, p, ul { all: unset }
//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ debug
[debug] {
    background: cyan!important;
    z-index: 2018!important;
    color: black!important;
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ something fancy
[hover-shine]{
  outline: transparent;
  transition: outline 350ms!important;
}
[hover-shine]:hover{
  @include border-radius(0);
  outline: 200vw solid rgba(0,0,0,0.45);
  z-index: 2018;
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡helpers
[right] {
    float: right;
    clear: right;
}
[left] {
    float: left;
    clear: left;
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ cursor
meta[bg] {
    cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'%3E%3Cimage id='image0' width='32' height='32' x='0' y='0' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJN%0AAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN%0ARQfiAhYAKyo1IX+1AAACUElEQVRIx6XVS2hVVxQG4O/eHOOr1FsfUSxRMeio2qoIilpRihBxUKtQ%0AxLkOHIgDJ4JgBRHRga+BE0HxAQ7UQXXgIKC2IIikBpvE+FggouALo9QKPnI7SGJyT+45N9A12///%0Ar3/vtc4+a9fJi+W2W+2Th9mSJNdghtVoz5MU/c+oy2RmWWGVGSgo+uxVdVmhCjbGWhs1GTEI++iR%0A0857V9tgid/MzDjVI7tcyzMo2mybBGVPtbjtOSb53kqNCuhx1GE9WXVvFUJo0Zxqb8FPrvSx27PS%0Af3ZfCPuNrcqPsUcID/xajZ6qVQi7c75M0Q4htJk2lNwnhDM1rlbBcSEcTBMNOoROTWpFo7+Fexr7%0AD9UbzUbiSt6t74vHLiGxptLgRwVcrJkOF8DS3kViJEaYjX90DBE3KXiQwu7rVjJTyXsSnV+IN16m%0ApM0OYZvLFWi3V0omax1cAnxSThkslEgsTKFlHwYWiScomKKoXp3PFdJzluNcyqBoFHo8G7jSRS1C%0Au2+H1cRJ7gjX1Q+U0KMLo80dlsF3xuJhbyH9PbiqjPXDMlgH6d/6a7eFexbUTJ/jrtBuQn/1vfHW%0AKST2+io3fbS96nF26Igb5w8hnDAqM73eMSHcML4avVSnEM6aWjV9spNC6LIya4df3BVCqy0aKpiJ%0ANrnVl75hMJEeqqvsMw78q02bZ8oa/GBuX2/e2eH3PAOm221Zxglv2CkqoWrvQtFiGy1SGoS9ddNp%0Af2bP46FRMs8BIRwx3zdZsuy3sdtf7oAOrV5nyfJH6FUv0JUn+Q8FOZ4hbT6MyQAAACV0RVh0ZGF0%0AZTpjcmVhdGUAMjAxOC0wMi0yMlQwMDo0Mzo0Mi0wNzowMOenxmwAAAAldEVYdGRhdGU6bW9kaWZ5%0AADIwMTgtMDItMjJUMDA6NDM6NDItMDc6MDCW+n7QAAAAAElFTkSuQmCC' /%3E%3C/svg%3E"), auto!important
}

section {
    cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'%3E%3Cimage id='image0' width='32' height='32' x='0' y='0' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJN%0AAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABtlBMVEUAAACFnsaNp9KcuOid%0AuumcueiXtOKBmcArM0Cat+aeu+ueu+ucuOiVsN2Gn8iduuqduuqZteR7krkAAACQqteeu+ubuOeO%0AqNQAAACWst+duumVsd8AAACWsd+eu+uZtuRrf6AAAACXsuCeu+ubuOeKo84AAACYtOKcuemUsN0A%0AAACZteSduuqVsd9cbYmatuWduuqWsuBXZ4EAAACbt+edu+qVsd8AAACcueiduuqRrNkkKjacueic%0AuemDm8RDT2ScueiZteMAAABOXHScuOiduuqHoMpVZX+cuOiWsd9RX3mZtuQAAABAS1+cuOhNW3Md%0AIyycuOicuehoe5uYteOcuOhfcY+UsN2buOctNkSMptGVsN50ia2duuqIocsAAACVsd6at+ZUY310%0Aia2duumHoMmKo86Tr9wmLTkkKzWOqNSWsuBSYXovOEaIocucuemeuuqPqtVPXnYAAAAAAAAWGiFr%0Af6CRrNicueiduuqVsN57krcrMkAAAAAAAAAeJC5aa4aBmcGNp9GUr9yWsd+PqdWEncVgcpArM0AA%0AAAAAAAAAAAAAAAAAAAAAAAAAAACeu+v///+xbV1yAAAAkHRSTlMAARKTwZQ3AwOp/vqrJi3262UF%0AAWn8pxcDk9s9Bq71dQQIvv2qEgrJ1jEM0exKAdfzVgEN3PVTDuLyOBHm3BcX6ZoCGur1Kx3rhBzG%0ABxnpExLk7iLS7iOz4xWEvEX5ehXG6S1Y+YabxSIltNc6KZ74/bs8CwUfYcX5/Nd9KQkPKVOPuMrO%0Av5tbMAQWIScoJBmYKcGqAAAAAWJLR0SRDw2+mgAAAAd0SU1FB+ICFgAmIo5UicoAAAE2SURBVDjL%0AfdJlU8NAEAbg4BCcIgWCQ4HiFKdYcAjuWtzd3V33JzNFsrm7Le/X95m9mb2VpN+4Sf/G3cPTy9vH%0Ade/rJwP4BwS6BEHB4ExIaBjdm8LlbwARkVEkMEfDX2JiKaDE6QDiExJFkJSMAFJS0wRgSQdjMjJ5%0AYM1iAGTn5HIgjwWQX1DIAFsRB6C4hAGlZTyA8gojqLQLAKqqDaCmVgRynYqgvkEE0NiEoLmFANCK%0AI9pI0K7poKOTAvYuHXT3UKC3D/fQT4GBQfysIQoMj+A9jFJgzKYDdXyC2NSkgotwTIlgesaEQJud%0AEwbM4wvOEQsyBxaXVCMwL6+wYnVNk5go6xubWG9t7+zyd7m3f3B49FMfn5yenYu3r15cXl3f3N7d%0APzw+OZ4lKqrl5fXt/ePTaqy/AJ9qE/3cjTmqAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAyLTIy%0AVDAwOjM4OjM0LTA3OjAwX2kUOwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMi0yMlQwMDozODoz%0ANC0wNzowMC40rIcAAAAASUVORK5CYII=' /%3E%3C/svg%3E"), auto!important
}

content, outer {
    cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'%3E%3Cimage id='image0' width='32' height='32' x='0' y='0' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJN%0AAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABrVBMVEUAAAAzX6dHg+dIhepG%0Aguc/dM0AAABGguVJh+5Jh+5IhuxGg+c9csg3Z7ZIhuxJh+5IhetEfd1CetdJhu1GguUwWJwAAABF%0Af+BJh+5HhOk/dc8AAABFgOJIhuxEft8AAABFgONJhu1GgeQVJ0UAAABGgeRHhOg8b8UAAABGguZI%0AhetAdtEAAABHg+dIhexCetcAAABHhOlIhuxBedUAAABIhetIhes8b8UKEyJIhuxHhOkoSoMaMVdI%0AhetFgOEiP3BIhetIhuw3Z7YmR31IhetEft4nSYFIhetGguYAAAAhPWxIhesYLE4UJUFIhetIhesu%0AVZYAAABHhOhIhesvWJtFgOFIhesgO2kAAABDfNtGgeQAAAA8b8NJh+1CetccNFtHg+dJhu00Yao+%0Ac8xDe9oAAAATIz5Ff+FHg+grT4wqTolGguZIhes3ZbMsUpFFgOJHg+c2ZbIAAAAiP3A/dc9IhepI%0AhuxDfNorUI4DBgspTYg9cchFf+BHg+dHhOlFgOE+dMwvWJsQHTQAAAAAAAALFCMgO2gmR30oSoIi%0AP3ATIz0AAAAAAABJh+7///95P4MaAAAAjXRSTlMAATpmOQUBbfz+0FQFF+n9sSFV5FQCAob6lA0F%0ApcksB7nrVwEJxowIC8+5FQzVzR4N29MeDuDMERDlqgUV6GUZ6uEUHOtlHeyxBBrfDRTn7R4P2u8k%0AwOkaCJbNA139lCHi+EaCsRQjzek8QuT2ZUzY62wVOqXz+8FNH0+a0vD026NfKAoaLEBKTEQxHQbd%0AMq6mAAAAAWJLR0SOggWzbwAAAAd0SU1FB+ICFgAeKQ4Z7LkAAAE6SURBVDjLddJVU8NAFAXgYIHF%0AioZCgSLBCwQo7u5SNBAcirsUd5f7n2E6sFnLeT3fzM7cPZLkT0BgUHCIZB05NAxQeESkJYiKht/Y%0AYmKtQBwCf+ITEoW9kgR/sSeniIAjFXDS0gXAmWECyMzK5oCaQwCw5+axIL8AqBQWMcBVTAMoKaWB%0AVsYAKK+ggLuSBVBVTYKaWg5AXT0BGhp5YGsiQHMLD6C1zQTtHQKAOk3Q1S0A0NOLQZ/oCegfwGBw%0ASASGRzDwjIrA2Lh56gkRmJzCQJ8WgRkPBsbsnADMqxjIC4t8v7RsEINYQdydVr3katfWWbCx6SD/%0AU9/apvudXTezmb19sj84PJKZ2WnHJ6f/te/s3Ktw09YvLq+ub3zo9u7+4dElS3yUp+eX17f3j88v%0AzZAsonzrqpNufwDAhg8GiVwZZAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wMi0yMlQwMDozMDo0%0AMS0wNzowMBRDcnEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDItMjJUMDA6MzA6NDEtMDc6MDBl%0AHsrNAAAAAElFTkSuQmCC'/%3E%3C/svg%3E%0A"), auto!important
}

input,
label,
outer:active,
button {
    cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'%3E%3Cimage id='image0' width='32' height='32' x='0' y='0' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJN%0AAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABwlBMVEUAAAAuVZdEf+BIhOpH%0Ag+g/dc8mR31Ef+BJhu1Jh+5Iheo/ds9CetdIhuxHg+c2ZLE1Yq1Hg+hJh+5Eft8QHzgPGy9DfNtJ%0Ah+1Ihes8cMY4aLhHhOlFgOIkQnUUJkRDfNxJh+5Ihuw+dMw4Z7ZHhOlGgeQrUIwTJEBDfNxIhu1A%0AdtA2ZbNHhOlGguUrUI0AAABDfdxJhu1AdtExW6BHhOlGguYiQHBDfNs/dM0sUY9HhOlFgOMHDRhB%0AedY0YKoZMFVCe9k3ZrVIhuwOGi5BeNRJh+5IheoqTokDBw1DfNtIhuw6a7wLFCREft5Jhu07bsIJ%0AEiBDfdw6bL8CBAhBeNU1Y64AAAA8b8RJh+1Hg+coS4QsUpBHhOlCetgKEyEJEB1BedVIhuw2Y7AA%0AAAAAAAAtU5JHhOhDe9kRIDkAAAA5abpGguYrUI4AAAAIDxo7bsJIhetGguYyXaQAAAAAAAAOGi02%0AZLBGgeRJhu1DfdwtVJQFCRAFChIlRXs9ccdFgONEft44abkbM1kAAAAAAAAFChMcNV0tVJQ2ZLA7%0AbsE8b8M1Y7AqTYkWKkoFCQ8AAAAAAAAAAAAAAAIAAABJh+7///8TbY1YAAAAlHRSTlMAATaJag0B%0AXPL+wRo87K0KDr77agEBZPvfIBbTjQMBb/ztMRfZpAYBcvU+FtuzBwFx+UQR3LgGaj4N1KMDVB0G%0AZyfxBWH95RUDkPY2B6r6SwisUAeWQQRu/OYnNu6yEBKs+l0GBUTtvhsQeudFAhuP+OlgDwMed+b9%0Az1cTFkih5dmKNQ4JHj1kgZibgVw1GA0TGBgL4nqaIgAAAAFiS0dElQhgeoMAAAAHdElNRQfiAhYA%0ALwiELftVAAABQklEQVQ4y3XSZVvDMBQF4OAE9+FsuI1iw2G4uwyXMlyHu7sPuD+YYettkp6v5016%0Ac58SguPi6ubuQbTj6eUN1MdXG/j5AwANCNTqg4LhOyGhYeI+PEL3AyAySgyiY357oLFxoj4+Qf8H%0AwJAoAknJ/z3QlFS+T0unTgAZmTzIygYUYw7bS7kUg7x8FhQUgiqmIuaCYqoGuhI1KC0DJuUVKlCp%0AZ4GhCvdmE9sDrZYQqKnlABjr0Ij1DTxobFJAcwvfQ2ubAto7BKCzSwHdPSLQq0zZ1y/6xIACLIND%0APBgeQa8YHeP3MD6B9jA5RVkgT1sRmJmdY8H8At4kWVyS1f3yCr6AkNW1dRvuNza3mB9me2d3zznH%0A/sHhkURYcXxyeiY7DLWdX1xecb3jrdc3t3f3D49Pzy+vViKMZH2zv3/YPy34+BehcgU5HcjdEAAA%0AACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wMi0yMlQwMDo0NzowOC0wNzowMM52N6IAAAAldEVYdGRh%0AdGU6bW9kaWZ5ADIwMTgtMDItMjJUMDA6NDc6MDgtMDc6MDC/K48eAAAAAElFTkSuQmCC' /%3E%3C/svg%3E%0A"), auto!important
}

input:focus,
input:active {
    cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'%3E%3Cimage id='image0' width='32' height='32' x='0' y='0' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJN%0AAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABp1BMVEUAAABEfd09cMZIhetH%0Ag+czX6dBd9JIhepJh+5Jh+5HhOg7bsJCetZIhetJh+5IhOk7bsFDe9pIhuxIhOk7bb9CedZIhuxH%0AhOk5aLg+c8tIhetHhOg1Yq04Z7ZIhepGguUnR30qTYhHg+dFgOIAAABFgOJJh+1De9lCethJhu1I%0Ahes7bcA2Y69IhepHguYGDBZFgOJJh+1CedY4aLhIhutHg+gNGSxEft5Jhu0/dc4HDRhHg+dFgOEA%0AAAAqTolIhepGgeQAAAAvV5pIhepGgeQAAAAjQXJIhOlFf+AAAAADBQlGguVDfdwAAABDe9o9cMYA%0AAAA5ablJhu1IhOkoS4QSIjxGgONBedUAAAAAAAA3ZrRJhuxHhOgpTIUAAAAAAABAd9JJhu05arsA%0AAAAWKEdDe9lJhu0+cskAAAAZLU9BeNNIheo7bsIAAgQNGCo4Z7ZGgeNEfd0wWp4DBgsAAAAcM1s4%0AZ7ZCe9lGguVIhuxIhetGgeNBeNMzXqYSITsAAAADBQkaMVYmRnwpTIYpTIUlRHcVJ0YAAAAAAAAA%0AAAAAAABJh+7///+og5aYAAAAi3RSTlMAAw2ccAQXuv78jwgex/2fCyHPqQwe0aUJFcudBgy9gwME%0AnmABbfU6N/PXFA3JlgJy9jsX4rUFavYzBbyBAhXjswYg68IJGuS1Cg/NlQebYwRU++oqG86cDwhf%0A+uk1Axeh+nAOKLr8jxktrPSIHiR43spcGhU3fMDo+/jgsmksEyU6SlpWRzUhEAULXlHmuAAAAAFi%0AS0dEjGwL0kMAAAAHdElNRQfiAhkPDiRpVdU+AAABM0lEQVQ4y5WSZVMDMRBAg6dYcZcCxd31KAWK%0AHwTvIcWLu7tb908zDOn1creF4X19bzaZbAj5JwF/+MCg4JDffGgYNYVH+PeRURQg2hzjz8fGwTc0%0APgH3iUnwA01OwXxqGnih6RlGn5kFGrItep+Tq/VgyrOK3ppPhQAKCsWgqBh0lJRqfVm53gOtqNQc%0AUEUNAVTX+ILaOkCob1AHNFIsaGr2Bi2tgNIm8aDdhgcddh50duFBt4MHPb140NfPg4FBPBiSeeAY%0ARj0dYTxgo2NYMD6hLmxyCgumnepLKjOzRj837/LtYmHR8JZLyyuabbLVNV3hXt8Qvoy8uSVcdHtn%0A10UE5L39A3WI+/DomBEd7OT07PziEuDq+ub2zikRI/b7h8en55fXt/cPRnCkT8XjUZhwuy+M+gL+%0A9ZOExgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wMi0yNVQxNToxNDozNi0wNzowMPd/9k0AAAAl%0AdEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDItMjVUMTU6MTQ6MzYtMDc6MDCGIk7xAAAAAElFTkSuQmCC' /%3E%3C/svg%3E%0A"), auto!important
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ waves.js fix
.waves-effect:not(button) {
    position: relative;
    cursor: initial;
    display: block!important;
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ config.ratio
$aspect-ratio: 15/9; //3/2 / 16/10 / 16/9
//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ font sizes
$default-fontsize: 2/$aspect-ratio + vmin;
$default-lineheight: 3/$aspect-ratio + vmin;
$size-list:xs sm md lg xl;
*{
  font-size: $default-fontsize;
}
@each$size in $size-list {
    $i: index($size-list, $size);
    [#{$size}] {
      
    @each$prefix in $prefix-list {

      font-size: $i/$aspect-ratio + vmin;
      line-height: 1.3*$i/$aspect-ratio + vmin;
      margin: .3*$i/$aspect-ratio + vmin
    }
      
        
    }
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ colorz
[bg-empty] {
    background: #e5e5e5!important
}

[bg-transparent] {
    background: transparent!important
}

[bg-slate] {
    background: #E6E9ED!important
}

[bg-pink] {
    background: #D770AD!important
}

[bg-red] {
    background: #DA4453!important
}

[bg-orange] {
    background: #E9573F!important
}

[bg-yellow] {
    background: #FCBB42!important
}

[bg-green] {
    background: #8CC152!important
}

[bg-mint] {
    background: #37BC9B!important
}

[bg-aqua] {
    background: #3BAFDA!important
}

[bg-blue] {
    background: #4A89DC!important
}

[bg-purple] {
    background: #967ADC!important
}

[bg-light] {
    background: #E6E9ED!important
}

[bg-gray] {
    background: #AAB2BD!important
}

[bg-dark] {
    background: #434A54!important
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ canvas(bg)
meta[bg] {
    display: block!important;
    cursor: crosshair;
    width: 200vw;
    position: fixed!important;
    top: 0vw;
    left: -100vw;
    background-color: #ecf0f1;
    height: 200vh;
    background-position: 4.5% 7%;
    background-size: 10vh 10vh;
    @each$prefix in $prefix-list {
        background-image:#{$prefix}linear-gradient(90deg,
        rgba(0,
        0,
        0,
        .25) 0,
        rgba(0,
        0,
        0,
        0) .3vh),
        #{$prefix}linear-gradient(0deg,
        rgba(0,
        0,
        0,
        .25) 0,
        rgba(0,
        0,
        0,
        0) .3vh);
    }
}

meta[bg][dark] {
    background-color: #535c68!important;
    @each$prefix in $prefix-list {
        background-image:#{$prefix}linear-gradient(90deg,
        rgba(0,
        0,
        0,
        .25) 0,
        rgba(0,
        0,
        0,
        0) .3vh),
        #{$prefix}linear-gradient(0deg,
        rgba(0,
        0,
        0,
        .25) 0,
        rgba(255,
        255,
        255,
        0) .3vh);
    }
}

//clicky (highlighting of main area)
meta[bg]:active+main>content {
    @each$prefix in $prefix-list {
        //#{$prefix}box-shadow: inset 0 0 0 .75vh#9C27B0, 0 0 0 .75vh#4A148C!important;
        #{$prefix}box-shadow: 0 2vh 7.5vh 1.5vh #9C27B0, 0 2vh 10vh 10vh rgba(236, 240, 241, 1);
    }
}

meta[bg][dark]:active+main>content {
    @each$prefix in $prefix-list {
        #{$prefix}box-shadow: 0 2vh 7.5vh 1.5vh #9C27B0, 0 2vh 10vh 10vh rgba(83, 92, 104, 1)!important;
    }
}

;
//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ main (content outer)
main {
    height: 100%;
    width: auto;
    font-size: $default-fontsize;
    line-height: 100%;
    display: block;
    position: relative;
    margin: auto; //padding-bottom: (150vh/$aspect-ratio);
    @each$prefix in $prefix-list {
        $i: index($prefix-list, $prefix);
        max-width: #{$prefix}calc(#{100vmin*$aspect-ratio});
        max-height: #{$prefix}calc(#{100vmin*$aspect-ratio});
    }
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ content (main inner)
content {
    margin: auto;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    @each$prefix in $prefix-list {
        $i: index($prefix-list, $prefix);
        height: #{$prefix}calc(100% - 2vw);
        width: #{$prefix}calc(100% - 2vw);
    } // rastershadow außen
    @each$prefix in $prefix-list {
        #{$prefix}box-shadow: 0 2vw 10vw .5vw rgba(0, 0, 0, 0.5), 0 2vw 10vw 10vw rgba(236, 240, 241, 1);
    }
}

meta[bg][dark]+main>content {
    @each$prefix in $prefix-list {
        #{$prefix}box-shadow: 0 2vw 7.5vw 1.5vw rgba(0, 0, 0, 0.5), 0 2vw 10vw 10vw rgba(83, 92, 104, 1)!important;
    }
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ section Eigenschaften
$gridcolor: rgb(192,
57,
43);
/// allgemein
section {
    &[absolute]{
      position: absolute;
    }
    &[fixed]{
      position: fixed;
    }
    &[center]{
      text-align:center;
      padding: 25% auto;
    }
    &[left]{
      text-align:left;
      padding: auto 75% auto auto;
    }
    &[right]{
      text-align:right;
      padding: auto auto auto 75%;
    }
    >section {
        float: left;
        display: inline-block;
    }
    vertical-align: middle;
    display: inline-block;
    background-color: rgb(231,
    76,
    60);
    background-size: 10vmin 10vmin;
    background-position: 0 0,
    5vmin 5vmin;
    @each$prefix in $prefix-list {
        $i: index($prefix-list, $prefix);
        background-image: unquote($prefix) + linear-gradient(0deg, transparent 24%, $gridcolor 25%, $gridcolor 26%, transparent 27%, transparent 74%, $gridcolor 75%, $gridcolor 76%, transparent 77%, transparent), unquote($prefix) + linear-gradient(90deg, transparent 24%, $gridcolor 25%, $gridcolor 26%, transparent 27%, transparent 74%, $gridcolor 75%, $gridcolor 76%, transparent 77%, transparent);
    } // framed  hintergrund
    &[framed] {
        background: ghostwhite;
        padding: .5rem .5rem;
    } // framed outer schatten
    &[framed]>outer {
        @each$prefix in $prefix-list {
            //#{$prefix}box-shadow: 0 .1rem .1rem rgba(0, 0, 0, .12), 0 .1rem .1rem rgba(0, 0, 0, .24);
          #{$prefix}box-shadow: 0 .2rem .2rem 0 rgba(0,0,0,.08), 0 .3rem .1pt -.2rem rgba(0,0,0,.04), 0 .1rem .5rem 0 rgba(0,0,0,.01);
          
            #{$prefix}transition: #{$prefix}box-shadow .2s ease-out;
        } // hover-schatten bei framed
        &:hover {
            @each$prefix in $prefix-list {
               // #{$prefix}box-shadow: 0 .1rem .1rem rgba(0, 0, 0, .24), 0 .1rem 1rem rgba(0, 0, 0, .19)
                #{$prefix}box-shadow: 0 .2rem .2rem 0 rgba(0,0,0,.14), 0 .3pt .1rem -.2rem rgba(0,0,0,.12), 0 .1rem .5rem 0 rgba(0,0,0,.08);
            }
        }
    } //outer
    &[framed]>outer {
        @include border-radius(8pt);
        padding: 0 1vw;   
        background: white;
        display: block;
    }
    outer {
        height: 100%;
        width: 100%;
    }
    inner,
    outer {
        display: block
    }
    inner {
        position: relative;
        top: 50%;
        @include translateY(-50%);
    }
}

/// dimensionen
// Höhe
@for$i from+0 through+21 {
    $value: percentage(0.1*$i/2);
    $name: $i/2;
    $name: format($name, $i);
    [h#{$name}] {
        height: $value+!important;
    }
}

// Weite
@for$i from+0 through+21 {
    $value: percentage(0.1*$i/2);
    $name: $i/2;
    $name: format($name, $i);
    [w#{$name}] {
        width: $value+!important;
    }
}

/// offsets
// Höhe
@for$i from+0 through+21 {
    $value: percentage(0.1*$i/2);
    $name: $i/2;
    $name: format($name, $i);
    content>section[o-h#{$name}] {
        position: absolute;
        top: $value!important;
        left: 0;
    }
    inner>section[o-h#{$name}] {
        position: relative;
        margin-top: $value!important;
        margin-left: 0;
    }
}

// Weite
@for$i from+0 through+21 {
    $value: percentage(0.1*$i/2);
    $name: $i/2;
    $name: format($name, $i);
    content>section[o-w#{$name}] {
        position: absolute;
        left: $value!important;
        top: 0;
    }
    inner>section[o-w#{$name}] {
        position: relative;
        margin-left: $value!important;
        margin-top: 0;
    }
}

//⚡ HÖHE framed inner
@for$i from+1 through+20 {
    $value: percentage(0.01*$i/2);
    //$value: $i+vw;
    $name: $i/2;
    $name: format($name, $i);
    [h#{$name}][framed]>outer {
        //padding-top: 50%;
        padding-top: $value;
        padding-bottom: $value; //height: $value;
    }
}

//⚡ WEITE framed inner
@for$i from+1 through+20 {
    $value: percentage(0.02*$i/2); //$value: $i/4+vh;
    $name: $i/2;
    $name: format($name, $i);
    [w#{$name}][framed]>outer>inner {
        padding-left: $value;
        padding-right: $value;
    }
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ forms
[form] {
    background: rgba(0, 0, 0, .1)!important; //label default
    label {
        display: block;
        width: 100%;
        padding-top: .8vw;
        padding-left: .8vw;
    }
    input {
        @include border-radius(.2vw);
        background: mintcream;
        width: 91%;
        border-bottom: .15vw solid darkgray;
        padding: .1vw .4vw;
        display: block-inline;
        height: 100%;
        margin-left: 4%;
        margin-bottom: 2%;
    }
    input:active,
    input:focus {
        outline: none;
        background: white;
        border-bottom: .2vmin solid dimgray;
    }
}

[form][inline] {
    >label {
        display: inline-block;
        float: left;
        width: 20%;
        padding-top: .2vw;
        padding-left: .8vw;
        margin-left: 0;
        display: inline-block;
        float: left;
        position: absolute;
    }
    >input {
        margin-left: 20%;
        width: 75%
    }
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ tables
section[tabelle] {
    empty-cells: show;
    border-collapse: separate;
    background: transparent!important;
    font-size: $default-fontsize;
    line-height: $default-lineheight;
    display: table;
    row,
    header {
        display: table-row;
    }
    header {
        border: .15rem solid darkgray;
        font-weight: bold;
        background: #212529!important;
        color: #fff;
        cell {
          border-left: none;
            background: #2f3542;
        }
        cell:nth-child(1n+1):not(:last-child) {       border-left: none;
            border-right: .15rem solid dimgray;
        }
      cell:first-child {
        border-left: none;
        
    }
        
    }
    cell {
        display: table-cell;
        vertical-align: top;
        padding: .2vmin;
        text-align: center;
        background: mintcream;
       
    }
    cell:first-child {
        border-left: .15rem solid darkgray;
      
    }
    row {
        border: .15rem solid darkgray;
        border-top: none;
        cell:nth-child(1n+1) {
            border-right: .15rem solid darkgray; border-bottom: .15rem solid darkgray;
      
        }
    }
    &[inline] {
      header{
        border: none;
        cell{
          border-bottom: .15rem solid #2f3542;
        }
      }
        border-right: .15rem solid darkgray;
        border-top: none;
        border-left: none;
        header {
            z-index: 1;
            border-top: none;
            border-right: none;
            cell {
                border-right: none;
                border-left: .15rem solid transparent;
                border-right: .15rem solid transparent;
                display: block!important;
            }
            cell:nth-child(1n+1):not(:last-child) {
                border-bottom: .15rem dimgray solid;
                border-right: none;
                text-align: center;
            }
            display: block!important;
            float: left;
        }

        row {
            border: none!important;
            display: block!important;
          
            cell {
                border-right: none;
                text-indent: .4rem;
                border-right:none!important;
                display: block!important;
                text-align: left;
              
            }
            cell:nth-child(1n+1):not(:last-child) {
                border-bottom: .15rem solid darkgray;
            }
        }
      
    }
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
// listen
[liste] {
    margin: 1vmin 0;
    ul,
    ol {
        padding-left: 0;
        list-style: none;
        list-style-position: inside;
        li:nth-child(1n+1):not(:last-child) {
            margin-bottom: .5vmin;
        }
    }
    &[inline] {
        list-style: none;
        ul,
        ol {
            padding-left: 0;
            li {
                float: left;
            }
            li:nth-child(1n+1):not(:last-child) {
                margin-bottom: 0;
                margin-right: .8rem;
            }
        }
    }
}

li[button] {
    border-bottom: .1rem solid dimgray;
}

li[button]:hover {
    border-bottom: .1rem solid mintcream;
}

li[star]:before {
    content: " \2605 ";
}

li[line]:before {
    content: "\268A";
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//🚧 button
button {
    color: black;
    background-color: white;
    border: none;
    @each$prefix in $prefix-list {
        #{$prefix}box-shadow: 0 .1rem .1rem black;
        #{$prefix}transition: #{$prefix}box-shadow .2s ease-out;
    }
    color: black;
    cursor: pointer;
    margin: 0 .5vw;
    opacity: .75;
    outline-color: black;
    outline-style: solid;
    outline-width: .175rem;
    position: relative;
    &:before {
        content: "";
        position: absolute;
        display: block;
        width: 0;
        background-color: rgba(255, 255, 255, .4);
        @each$prefix in $prefix-list {
            #{$prefix}transition: width .1s ease-out;
            #{$prefix}border-radius: 0;
        }
    }
    &:hover {
        @each$prefix in $prefix-list {
            #{$prefix}box-shadow: inset 0 0 100rem rgba(255, 255, 255, .3), 0 .1rem .5rem black;
        }
    }
    &:active:before {
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        @include translate(-50%, -50%);
    }
}

button[link] {
    background: transparent;
    outline-color: transparent;
    @each$prefix in $prefix-list {
        #{$prefix}box-shadow: none;
    }
}

button[slate] {
    background: #F5F7FA;
    outline-color: #E6E9ED;
}

button[pink] {
    background: #EC87C0;
    outline-color: #D770AD;
}

button[red] {
    background-color: #ED5565;
    outline-color: #DA4453;
}

button[orange] {
    background-color: #FC6E51;
    outline-color: #E9573F;
}

button[yellow] {
    background-color: #FFCE54;
    outline-color: #FCBB42;
}

button[green] {
    background-color: #A0D468;
    outline-color: #8CC152;
}

button[mint] {
    background-color: #48CFAD;
    outline-color: #37BC9B;
}

button[aqua] {
    background-color: #4FC1E9;
    outline-color: #3BAFDA;
}

button[blue] {
    background-color: #5D9CEC;
    outline-color: #4A89DC;
}

button[purple] {
    background-color: #AC92EC;
    outline-color: #967ADC;
}

button[light] {
    background-color: #F5F7FA;
    outline-color: #E6E9ED;
}

button[gray] {
    background-color: #CCD1D9;
    outline-color: #AAB2BD;
}

button[dark] {
    background-color: #656D78;
    outline-color: #434A54;
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ text
text {
    line-height: $default-lineheight;
    display: inline;
    text-shadow: .01rem .01rem rgba(0, 0, 0, .2);
    &[center] {
        display: block;
        @each$prefix in $prefix-list {
            #{$prefix}text-align: center;
        }
    } //links alignen
    &[left] {
        float: none;
        @each$prefix in $prefix-list {
            #{$prefix}text-align: left;
        }
    } //rechts align
    &[right] {
        float: none;
        @each$prefix in $prefix-list {
            #{$prefix}text-align: right;
        }
    }
    &[i],
    i {
        font-style: italic;
    }
    &[o],
    o {
        font-style: oblique;
    }
    &[u],
    u {
        text-decoration: underline!important;
    }
    &[b],
    b {
        text-weight: bold!important;
    }
}

text[slate] {
    hover {
        color: #F5F7FA;
    }
    color: #E6E9ED;
}

text[pink] {
    hover {
        color: #EC87C0;
    }
    color: #D770AD;
}

text[red] {
    &:hover {
        color: #ED5565;
    }
    color:#DA4453;
}

text[orange] {
    &:hover {
        color: #FC6E51;
    }
    color: #E9573F;
}

text[yellow] {
    &:hover {
        color: #FFCE54;
    }
    color: #FCBB42;
}

text[green] {
    &:hover {
        color: #A0D468;
    }
    color: #8CC152;
}

text[mint] {
    &:hover {
        color: #48CFAD;
    }
    color: #37BC9B;
}

text[aqua] {
    &:hover {
        color: #4FC1E9;
    }
    color: #3BAFDA;
}

text[blue] {
    &:hover {
        color: #5D9CEC;
    }
    color: #4A89DC;
}

text[purple] {
    &:hover {
        color: #AC92EC;
    }
    color: #967ADC;
}

text[light] {
    &:hover {
        color: #F5F7FA;
    }
    color: #E6E9ED;
}

text[gray] {
    &:hover {
        color: #CCD1D9;
    }
    color: #AAB2BD;
}

text[dark] {
    &:hover {
        color: #656D78;
    }
    color: #434A54;
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ Text
text{
  display: block;
}

//▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
//⚡ Bilderbox
section[lightbox] {

    @each$prefix in $prefix-list {
        #{$prefix}box-shadow: none!important;
    }
  &+text{
    
  }
    img{
        width: 100%;
        outline: 1pt solid dimgray;
    }
    @for$i from+1 through+20 {
        $value: percentage(0.1*$i/2);
        $name: $i/2;
        $name: format($name, $i);
        img[s#{$name}] {
            width: $value+!important;
        }
    }
    text {
        line-height: $default-lineheight - .5!important;
        outline: .1rem solid lightgray;
        background: rgba(0,0,0,0.05);
        color: dimgray!important;
    }
    background: mintcream;
    @each$prefix in $prefix-list {
        #{$prefix}box-shadow: 0 0 .05rem .05rem darkgray;
    }
}

//$size-list:xs sm md lg xl;
//$i1: .4vh;
//$i2: 0vh;
//@each$size in $size-list {
//    $i: index($size-list, $size);
//    button[#{$size}] {
//        $i1: $i1 + .2;
//        $i2: $i2 + 1; //padding: $i1 $i2;
//    }
//}