:root {
  /* theme */
  --theme-root-font-size:                               14px;
  --theme-accent:                                       250, 130, 0;
  --theme-radius:                                       0.2rem;
  --theme-black:                                        0, 0, 0;
  --theme-white:                                        255, 255, 255;
  --theme-shade-neg-10:                                 25, 25, 25;
  --theme-shade-neg-09:                                 25, 25, 25;
  --theme-shade-neg-08:                                 25, 25, 25;
  --theme-shade-neg-07:                                 25, 25, 25;
  --theme-shade-neg-06:                                 25, 25, 25;
  --theme-shade-neg-05:                                 25, 25, 25;
  --theme-shade-neg-04:                                 25, 25, 25;
  --theme-shade-neg-03:                                 25, 25, 25;
  --theme-shade-neg-02:                                 25, 25, 25;
  --theme-shade-neg-01:                                 25, 25, 25;
  --theme-shade:                                        25, 25, 25;
  --theme-shade-pos-01:                                 25, 25, 25;
  --theme-shade-pos-02:                                 25, 25, 25;
  --theme-shade-pos-03:                                 25, 25, 25;
  --theme-shade-pos-04:                                 25, 25, 25;
  --theme-shade-pos-05:                                 25, 25, 25;
  --theme-shade-pos-06:                                 25, 25, 25;
  --theme-shade-pos-07:                                 25, 25, 25;
  --theme-shade-pos-08:                                 25, 25, 25;
  --theme-shade-pos-09:                                 25, 25, 25;
  --theme-shade-pos-10:                                 25, 25, 25;
  --theme-preset-background-nighttab-01:                25, 25, 25;
  --theme-preset-background-nighttab-02:                25, 25, 25;
  --theme-preset-background-nighttab-03:                25, 25, 25;
  --theme-preset-background-nighttab-04:                25, 25, 25;
  --theme-preset-accent-nighttab:                       25, 25, 25;
  --theme-preset-background-midnight-01:                25, 25, 25;
  --theme-preset-background-midnight-02:                25, 25, 25;
  --theme-preset-background-midnight-03:                25, 25, 25;
  --theme-preset-background-midnight-04:                25, 25, 25;
  --theme-preset-accent-midnight:                       25, 25, 25;
  --theme-preset-background-bluegum-01:                 25, 25, 25;
  --theme-preset-background-bluegum-02:                 25, 25, 25;
  --theme-preset-background-bluegum-03:                 25, 25, 25;
  --theme-preset-background-bluegum-04:                 25, 25, 25;
  --theme-preset-accent-bluegum:                        25, 25, 25;
  --theme-preset-background-sharpmint-01:               25, 25, 25;
  --theme-preset-background-sharpmint-02:               25, 25, 25;
  --theme-preset-background-sharpmint-03:               25, 25, 25;
  --theme-preset-background-sharpmint-04:               25, 25, 25;
  --theme-preset-accent-sharpmint:                      25, 25, 25;
  --theme-preset-background-snowblue-01:                25, 25, 25;
  --theme-preset-background-snowblue-02:                25, 25, 25;
  --theme-preset-background-snowblue-03:                25, 25, 25;
  --theme-preset-background-snowblue-04:                25, 25, 25;
  --theme-preset-accent-snowblue:                       25, 25, 25;
  --theme-preset-background-chocorum-01:                25, 25, 25;
  --theme-preset-background-chocorum-02:                25, 25, 25;
  --theme-preset-background-chocorum-03:                25, 25, 25;
  --theme-preset-background-chocorum-04:                25, 25, 25;
  --theme-preset-accent-chocorum:                       25, 25, 25;
  --theme-preset-background-sunbloom-01:                25, 25, 25;
  --theme-preset-background-sunbloom-02:                25, 25, 25;
  --theme-preset-background-sunbloom-03:                25, 25, 25;
  --theme-preset-background-sunbloom-04:                25, 25, 25;
  --theme-preset-accent-sunbloom:                       25, 25, 25;
  --theme-preset-background-coralgreen-01:              25, 25, 25;
  --theme-preset-background-coralgreen-02:              25, 25, 25;
  --theme-preset-background-coralgreen-03:              25, 25, 25;
  --theme-preset-background-coralgreen-04:              25, 25, 25;
  --theme-preset-accent-coralgreen:                     25, 25, 25;
  --theme-preset-background-purplegem-01:               25, 25, 25;
  --theme-preset-background-purplegem-02:               25, 25, 25;
  --theme-preset-background-purplegem-03:               25, 25, 25;
  --theme-preset-background-purplegem-04:               25, 25, 25;
  --theme-preset-accent-purplegem:                      25, 25, 25;
  --theme-preset-background-hotpepper-01:               25, 25, 25;
  --theme-preset-background-hotpepper-02:               25, 25, 25;
  --theme-preset-background-hotpepper-03:               25, 25, 25;
  --theme-preset-background-hotpepper-04:               25, 25, 25;
  --theme-preset-accent-hotpepper:                      25, 25, 25;
  --theme-preset-background-steelgrey-01:               25, 25, 25;
  --theme-preset-background-steelgrey-02:               25, 25, 25;
  --theme-preset-background-steelgrey-03:               25, 25, 25;
  --theme-preset-background-steelgrey-04:               25, 25, 25;
  --theme-preset-accent-steelgrey:                      25, 25, 25;
  --theme-preset-background-outrun-01:                  25, 25, 25;
  --theme-preset-background-outrun-02:                  25, 25, 25;
  --theme-preset-background-outrun-03:                  25, 25, 25;
  --theme-preset-background-outrun-04:                  25, 25, 25;
  --theme-preset-accent-outrun:                         25, 25, 25;
  --theme-preset-background-pumpkin-01:                 25, 25, 25;
  --theme-preset-background-pumpkin-02:                 25, 25, 25;
  --theme-preset-background-pumpkin-03:                 25, 25, 25;
  --theme-preset-background-pumpkin-04:                 25, 25, 25;
  --theme-preset-accent-pumpkin:                        25, 25, 25;
  --theme-preset-background-whoosh-01:                  25, 25, 25;
  --theme-preset-background-whoosh-02:                  25, 25, 25;
  --theme-preset-background-whoosh-03:                  25, 25, 25;
  --theme-preset-background-whoosh-04:                  25, 25, 25;
  --theme-preset-accent-whoosh:                         25, 25, 25;
  --theme-preset-preview-size:                          6em;
  /* header */
  --header-area-width:                                  100%;
  --header-shade-color:                                 var(--theme-color-01);
  --header-shade-opacity:                               0.95;
  --header-search-width:                                0%;
  --header-border-top:                                  0;
  --header-border-bottom:                               0;
  --header-date-size:                                   1em;
  --header-clock-size:                                  1em;
  --header-search-size:                                 1em;
  --header-button-size:                                 1em;
  --header-greeting-size:                               1em;
  --header-transitional-size:                           1em;
  /* group */
  --group-name-size:                                    1em;
  --group-border:                                       0;
  /* link */
  --link-area-width:                                    100%;
  --link-item-color-theme:                              var(--theme-color-02);
  --link-item-color-custom:                             rgb(0, 0, 0);
  --link-item-size:                                     1em;
  --link-item-display-space:                            0.25em;
  --link-item-display-gutter:                           2;
  --link-item-display-letter-size:                      2em;
  --link-item-display-icon-size:                        2.5em;
  --link-item-display-rotate:                           0deg;
  --link-item-display-translate-x:                      0em;
  --link-item-display-translate-y:                      0em;
  --link-item-display-name-size:                        0.9em;
  --link-item-border:                                   1;
  /* layout */
  --layout-size:                                        1;
  --layout-width:                                       80%;
  --layout-line-width:                                  0.2em;
  --layout-space:                                       0.5em;
  --layout-padding:                                     4;
  --layout-gutter:                                      4;
  --layout-duration-01:                                 0.1s;
  --layout-duration-02:                                 0.2s;
  --layout-duration-03:                                 0.3s;
  --layout-duration-04:                                 0.4s;
  --layout-duration-05:                                 0.5s;
  --layout-duration-06:                                 0.6s;
  --layout-duration-07:                                 0.7s;
  --layout-duration-08:                                 0.8s;
  --layout-duration-09:                                 0.9s;
  --layout-duration-10:                                 1s;
  --layout-timing-extra-fast:                           var(--layout-duration-02) ease-in-out;
  --layout-timing-fast:                                 var(--layout-duration-04) ease-in-out;
  --layout-timing-medium:                               var(--layout-duration-06) ease-in-out;
  --layout-timing-slow:                                 var(--layout-duration-08) ease-in-out;
  --layout-timing-extra-slow:                           var(--layout-duration-10) ease-in-out;
  --layout-shadow-small:                                0 0 0.25em rgba(0, 0, 0, 0.2),
                                                        0 0 0.5em rgba(0, 0, 0, 0.1);
  --layout-shadow-medium:                               0 0 0.5em rgba(0, 0, 0, 0.2),
                                                        0 0 1em rgba(0, 0, 0, 0.1);
  --layout-shadow-large:                                0 0 1em rgba(0, 0, 0, 0.2),
                                                        0 0 2em rgba(0, 0, 0, 0.1);
  --horizontal-rule:                                    calc(var(--layout-line-width) / 2) solid rgb(var(--theme-color-02));
  /* background */
  --background-color-theme:                             var(--theme-color-01);
  --background-color-custom:                            rgb(0, 0, 0);
  --background-image:                                   none;
  --background-opacity:                                 1;
  --background-scale:                                   1;
  --background-accent:                                  0;
  --background-blur:                                    0;
  /* form */
  --form-label:                                         var(--theme-color-16);
  --form-label-hover:                                   var(--theme-color-20);
  --form-label-focus-active:                            var(--theme-style-text);
  --form-label-checked:                                 var(--theme-style-text);
  --form-label-disabled:                                var(--theme-color-04);
  --form-input-text:                                    var(--theme-color-16);
  --form-input-text-hover:                              var(--theme-color-18);
  --form-input-text-focus-active:                       var(--theme-style-text);
  --form-input-text-disabled:                           var(--theme-color-04);
  --form-input-background:                              var(--theme-color-02);
  --form-input-background-hover:                        var(--theme-color-02);
  --form-input-background-focus-active:                 var(--theme-color-01);
  --form-input-background-disabled:                     var(--theme-color-01);
  --form-input-border:                                  var(--theme-color-02);
  --form-input-border-hover:                            var(--theme-color-02);
  --form-input-border-focus-active:                     var(--theme-color-01);
  --form-input-border-disabled:                         var(--theme-color-01);
  --form-group-text-background:                         var(--theme-color-02);
  --form-group-text-background-focus-hover:             var(--theme-color-02);
  --form-group-text-background-active:                  var(--theme-color-02);
  --form-group-text-background-disabled:                var(--theme-color-01);
  --form-group-text-border:                             var(--theme-color-02);
  --form-group-text-border-focus-hover:                 var(--theme-color-02);
  --form-group-text-border-active:                      var(--theme-color-02);
  --form-group-text-border-disabled:                    var(--theme-color-01);
  --form-border-disabled:                               var(--theme-color-02);
  --form-icon:                                          var(--theme-color-08);
  --form-icon-hover:                                    var(--theme-color-16);
  --form-icon-focus:                                    var(--theme-color-18);
  --form-icon-active:                                   var(--theme-style-text);
  --form-icon-checked:                                  var(--theme-style-text);
  --form-icon-disabled:                                 var(--theme-color-04);
  --form-icon-symbol:                                   var(--theme-color-01);
  --form-icon-symbol-active:                            var(--theme-color-01);
  --form-icon-symbol-disabled:                          var(--theme-color-01);
  --form-placeholder:                                   var(--theme-color-06);
  --form-placeholder-focus-hover:                       var(--theme-color-10);
  --form-placeholder-disabled:                          var(--theme-color-03);
  --form-checkbox-radio-label:                          var(--theme-color-12);
  --form-checkbox-radio-checked-label:                  var(--theme-color-16);
  --form-checkbox-radio-disabled-label:                 var(--theme-color-04);
  --form-feedback-text:                                 var(--theme-color-16);
  --form-feedback-text-muted:                           var(--theme-color-12);
  --form-feedback-text-disabled:                        var(--theme-color-04);
  --form-feedback-background:                           var(--theme-color-02);
  --form-feedback-background-disabled:                  var(--theme-color-01);
  --form-feedback-border:                               var(--theme-color-04);
  --form-feedback-border-disabled:                      var(--theme-color-02);
  --form-helper:                                        var(--theme-color-12);
  --form-helper-disabled:                               var(--theme-color-04);
  --form-thumb-size:                                    1.25em;
  --form-range-thumb-background:                        var(--theme-color-16);
  --form-range-thumb-background-hover:                  var(--theme-color-18);
  --form-range-thumb-background-focus:                  var(--theme-style-text);
  --form-range-thumb-background-active:                 var(--theme-style-text);
  --form-range-thumb-background-disabled:               var(--theme-color-03);
  --form-range-track-background:                        var(--theme-color-06);
  --form-range-track-background-focus-hover:            var(--theme-color-04);
  --form-range-track-background-active:                 var(--theme-color-03);
  --form-range-track-background-disabled:               var(--theme-color-02);
  --form-range-progress-background:                     var(--theme-color-08);
  --form-range-progress-background-active:              var(--theme-accent);
  --form-range-progress-background-disabled:            var(--theme-color-02);
  --form-grid-background:                               var(--theme-color-02);
  --form-grid-background-hover:                         var(--theme-color-02);
  --form-grid-background-focus:                         var(--theme-color-02);
  --form-grid-background-disabled:                      var(--theme-color-01);
  --form-grid-border:                                   var(--theme-color-08);
  --form-grid-border-hover-focus:                       var(--theme-color-20);
  --form-grid-border-active:                            var(--theme-accent);
  --form-grid-border-checked:                           var(--theme-accent);
  --form-grid-border-disabled:                          var(--theme-color-04);
  --form-dropdown-background:                           var(--theme-color-02);
  --form-ring-hover:                                    0 0 0 var(--layout-line-width) rgb(var(--theme-color-06));
  --form-ring-focus:                                    0 0 0 var(--layout-line-width) rgb(var(--theme-color-10)),
                                                        0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25);
  --form-ring-accent:                                   0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
                                                        0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
  /* button */
  --button-background:                                  var(--theme-color-02);
  --button-background-focus-hover:                      var(--theme-color-03);
  --button-background-active:                           var(--theme-color-04);
  --button-background-disabled:                         var(--theme-color-01);
  --button-border:                                      var(--theme-color-02);
  --button-border-focus-hover:                          var(--theme-color-06);
  --button-border-active:                               var(--theme-accent);
  --button-border-disabled:                             var(--theme-color-01);
  --button-text:                                        var(--theme-color-12);
  --button-text-focus-hover:                            var(--theme-color-20);
  --button-text-active:                                 var(--theme-style-text);
  --button-text-disabled:                               var(--theme-color-04);
  --button-link-text:                                   var(--theme-color-12);
  --button-link-text-focus-hover:                       var(--theme-style-text);
  --button-link-text-active:                            var(--theme-style-text);
  --button-link-text-disabled:                          var(--theme-color-04);
  /* edge */
  --edge-shadow:                                        inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
                                                        inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1),
                                                        inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
  /* font */
  --font-regular:                                       "Open Sans Regular", sans-serif;
  --font-bold:                                          "Open Sans Bold", sans-serif;
  --font-light:                                         "Open Sans Light", sans-serif;
  --font-fjalla:                                        "Fjalla One Regular", sans-serif;
  /* z index */
  --z-index-background:                                 1000;
  --z-index-link:                                       2000;
  --z-index-header:                                     3000;
  --z-index-tip:                                        4000;
  --z-index-shade:                                      5000;
  --z-index-modal:                                      6000;
  --z-index-menu:                                       7000;
  --z-index-auto-suggest:                               8000;
  --z-index-dropdown:                                   9000;
  --z-index-edge:                                       10000;
  /* breakpoint */
  /* can not be used in @media as of yet */
  --breakpoint-sm:                                      550px;
  --breakpoint-md:                                      700px;
  --breakpoint-lg:                                      900px;
  --breakpoint-xl:                                      1100px;
  --breakpoint-xxl:                                     1600px;
}

.is-theme-style-dark {
  /* theme */
  --theme-color:                                        var(--theme-shade);
  --theme-color-01:                                     var(--theme-shade-neg-10);
  --theme-color-02:                                     var(--theme-shade-neg-09);
  --theme-color-03:                                     var(--theme-shade-neg-08);
  --theme-color-04:                                     var(--theme-shade-neg-07);
  --theme-color-05:                                     var(--theme-shade-neg-06);
  --theme-color-06:                                     var(--theme-shade-neg-05);
  --theme-color-07:                                     var(--theme-shade-neg-04);
  --theme-color-08:                                     var(--theme-shade-neg-03);
  --theme-color-09:                                     var(--theme-shade-neg-02);
  --theme-color-10:                                     var(--theme-shade-neg-01);
  --theme-color-11:                                     var(--theme-shade-pos-01);
  --theme-color-12:                                     var(--theme-shade-pos-02);
  --theme-color-13:                                     var(--theme-shade-pos-03);
  --theme-color-14:                                     var(--theme-shade-pos-04);
  --theme-color-15:                                     var(--theme-shade-pos-05);
  --theme-color-16:                                     var(--theme-shade-pos-06);
  --theme-color-17:                                     var(--theme-shade-pos-07);
  --theme-color-18:                                     var(--theme-shade-pos-08);
  --theme-color-19:                                     var(--theme-shade-pos-09);
  --theme-color-20:                                     var(--theme-shade-pos-10);
  --theme-style-text:                                   var(--theme-white);
}

.is-theme-style-light {
  /* theme */
  --theme-color:                                        var(--theme-shade);
  --theme-color-01:                                     var(--theme-shade-pos-10);
  --theme-color-02:                                     var(--theme-shade-pos-09);
  --theme-color-03:                                     var(--theme-shade-pos-08);
  --theme-color-04:                                     var(--theme-shade-pos-07);
  --theme-color-05:                                     var(--theme-shade-pos-06);
  --theme-color-06:                                     var(--theme-shade-pos-05);
  --theme-color-07:                                     var(--theme-shade-pos-04);
  --theme-color-08:                                     var(--theme-shade-pos-03);
  --theme-color-09:                                     var(--theme-shade-pos-02);
  --theme-color-10:                                     var(--theme-shade-pos-01);
  --theme-color-11:                                     var(--theme-shade-neg-01);
  --theme-color-12:                                     var(--theme-shade-neg-02);
  --theme-color-13:                                     var(--theme-shade-neg-03);
  --theme-color-14:                                     var(--theme-shade-neg-04);
  --theme-color-15:                                     var(--theme-shade-neg-05);
  --theme-color-16:                                     var(--theme-shade-neg-06);
  --theme-color-17:                                     var(--theme-shade-neg-07);
  --theme-color-18:                                     var(--theme-shade-neg-08);
  --theme-color-19:                                     var(--theme-shade-neg-09);
  --theme-color-20:                                     var(--theme-shade-neg-10);
  --theme-style-text:                                   var(--theme-black);
}

.is-link-style-block {
  /* link */
  --link-item-width:                                    11em;
  --link-item-height:                                   10em;
  --link-item-url-height:                               20%;
  --link-item-edit-height:                              50%;
}

.is-link-style-list {
  /* link */
  --link-item-width:                                    20em;
  --link-item-height:                                   4em;
  --link-item-url-height:                               30%;
  --link-item-edit-height:                              50%;
}

@media (min-width: 700px) {
  :root {
    /* theme */
    --theme-root-font-size:                             16px;
  }
}
