: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-01:                                     38, 40, 49;
  --theme-shade-02:                                     47, 51, 62;
  --theme-shade-03:                                     57, 62, 75;
  --theme-shade-04:                                     67, 73, 88;
  --theme-shade-05:                                     77, 84, 101;
  --theme-shade-06:                                     87, 95, 114;
  --theme-shade-07:                                     97, 106, 127;
  --theme-shade-08:                                     107, 117, 140;
  --theme-shade-09:                                     117, 128, 153;
  --theme-shade-10:                                     127, 139, 166;
  --theme-shade-11:                                     137, 151, 180;
  --theme-shade-12:                                     149, 162, 187;
  --theme-shade-13:                                     162, 173, 195;
  --theme-shade-14:                                     174, 184, 203;
  --theme-shade-15:                                     187, 195, 211;
  --theme-shade-16:                                     199, 206, 218;
  --theme-shade-17:                                     212, 217, 226;
  --theme-shade-18:                                     224, 228, 234;
  --theme-shade-19:                                     237, 239, 242;
  --theme-shade-20:                                     250, 250, 250;
  /* header */
  --header-area-width:                                  100%;
  --header-shade-color:                                 var(--theme-gray-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-size:                                     1em;
  --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-02:                                 0.2s;
  --layout-duration-04:                                 0.4s;
  --layout-duration-06:                                 0.6s;
  --layout-duration-08:                                 0.8s;
  --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-gray-02));
  /* background */
  --background-color-theme:                             var(--theme-gray-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-gray-16);
  --form-label-hover:                                   var(--theme-gray-20);
  --form-label-focus-active:                            var(--theme-style-text);
  --form-label-checked:                                 var(--theme-style-text);
  --form-label-disabled:                                var(--theme-gray-04);
  --form-input-text:                                    var(--theme-gray-16);
  --form-input-text-hover:                              var(--theme-gray-18);
  --form-input-text-focus-active:                       var(--theme-style-text);
  --form-input-text-disabled:                           var(--theme-gray-04);
  --form-input-background:                              var(--theme-gray-02);
  --form-input-background-hover:                        var(--theme-gray-02);
  --form-input-background-focus-active:                 var(--theme-gray-01);
  --form-input-background-disabled:                     var(--theme-gray-01);
  --form-input-border:                                  var(--theme-gray-02);
  --form-input-border-hover:                            var(--theme-gray-02);
  --form-input-border-focus-active:                     var(--theme-gray-01);
  --form-input-border-disabled:                         var(--theme-gray-01);
  --form-group-text-background:                         var(--theme-gray-02);
  --form-group-text-background-focus-hover:             var(--theme-gray-02);
  --form-group-text-background-active:                  var(--theme-gray-02);
  --form-group-text-background-disabled:                var(--theme-gray-01);
  --form-group-text-border:                             var(--theme-gray-02);
  --form-group-text-border-focus-hover:                 var(--theme-gray-02);
  --form-group-text-border-active:                      var(--theme-gray-02);
  --form-group-text-border-disabled:                    var(--theme-gray-01);
  --form-border-disabled:                               var(--theme-gray-02);
  --form-icon:                                          var(--theme-gray-08);
  --form-icon-hover:                                    var(--theme-gray-16);
  --form-icon-focus:                                    var(--theme-gray-18);
  --form-icon-active:                                   var(--theme-style-text);
  --form-icon-checked:                                  var(--theme-style-text);
  --form-icon-disabled:                                 var(--theme-gray-04);
  --form-icon-symbol:                                   var(--theme-gray-01);
  --form-icon-symbol-active:                            var(--theme-gray-01);
  --form-icon-symbol-disabled:                          var(--theme-gray-01);
  --form-placeholder:                                   var(--theme-gray-06);
  --form-placeholder-focus-hover:                       var(--theme-gray-10);
  --form-placeholder-disabled:                          var(--theme-gray-03);
  --form-checkbox-radio-label:                          var(--theme-gray-12);
  --form-checkbox-radio-checked-label:                  var(--theme-gray-16);
  --form-checkbox-radio-disabled-label:                 var(--theme-gray-04);
  --form-feedback-text:                                 var(--theme-gray-16);
  --form-feedback-text-muted:                           var(--theme-gray-12);
  --form-feedback-text-disabled:                        var(--theme-gray-04);
  --form-feedback-background:                           var(--theme-gray-02);
  --form-feedback-background-disabled:                  var(--theme-gray-01);
  --form-feedback-border:                               var(--theme-gray-04);
  --form-feedback-border-disabled:                      var(--theme-gray-02);
  --form-helper:                                        var(--theme-gray-12);
  --form-helper-disabled:                               var(--theme-gray-04);
  --form-thumb-size:                                    1.25em;
  --form-range-thumb-background:                        var(--theme-gray-16);
  --form-range-thumb-background-hover:                  var(--theme-gray-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-gray-03);
  --form-range-track-background:                        var(--theme-gray-06);
  --form-range-track-background-focus-hover:            var(--theme-gray-04);
  --form-range-track-background-active:                 var(--theme-gray-03);
  --form-range-track-background-disabled:               var(--theme-gray-02);
  --form-range-progress-background:                     var(--theme-gray-08);
  --form-range-progress-background-active:              var(--theme-accent);
  --form-range-progress-background-disabled:            var(--theme-gray-02);
  --form-grid-background:                               var(--theme-gray-02);
  --form-grid-background-hover:                         var(--theme-gray-02);
  --form-grid-background-focus:                         var(--theme-gray-02);
  --form-grid-background-disabled:                      var(--theme-gray-01);
  --form-grid-border:                                   var(--theme-gray-08);
  --form-grid-border-hover-focus:                       var(--theme-gray-20);
  --form-grid-border-active:                            var(--theme-accent);
  --form-grid-border-checked:                           var(--theme-accent);
  --form-grid-border-disabled:                          var(--theme-gray-04);
  --form-dropdown-background:                           var(--theme-gray-02);
  --form-ring-hover:                                    0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
  --form-ring-focus:                                    0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)),
                                                        0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-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-gray-02);
  --button-background-focus-hover:                      var(--theme-gray-03);
  --button-background-active:                           var(--theme-gray-04);
  --button-background-disabled:                         var(--theme-gray-01);
  --button-border:                                      var(--theme-gray-02);
  --button-border-focus-hover:                          var(--theme-gray-06);
  --button-border-active:                               var(--theme-accent);
  --button-border-disabled:                             var(--theme-gray-01);
  --button-text:                                        var(--theme-gray-12);
  --button-text-focus-hover:                            var(--theme-gray-20);
  --button-text-active:                                 var(--theme-style-text);
  --button-text-disabled:                               var(--theme-gray-04);
  --button-link-text:                                   var(--theme-gray-12);
  --button-link-text-focus-hover:                       var(--theme-style-text);
  --button-link-text-active:                            var(--theme-style-text);
  --button-link-text-disabled:                          var(--theme-gray-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-gray-01:                                      var(--theme-shade-01);
  --theme-gray-02:                                      var(--theme-shade-02);
  --theme-gray-03:                                      var(--theme-shade-03);
  --theme-gray-04:                                      var(--theme-shade-04);
  --theme-gray-05:                                      var(--theme-shade-05);
  --theme-gray-06:                                      var(--theme-shade-06);
  --theme-gray-07:                                      var(--theme-shade-07);
  --theme-gray-08:                                      var(--theme-shade-08);
  --theme-gray-09:                                      var(--theme-shade-09);
  --theme-gray-10:                                      var(--theme-shade-10);
  --theme-gray-11:                                      var(--theme-shade-11);
  --theme-gray-12:                                      var(--theme-shade-12);
  --theme-gray-13:                                      var(--theme-shade-13);
  --theme-gray-14:                                      var(--theme-shade-14);
  --theme-gray-15:                                      var(--theme-shade-15);
  --theme-gray-16:                                      var(--theme-shade-16);
  --theme-gray-17:                                      var(--theme-shade-17);
  --theme-gray-18:                                      var(--theme-shade-18);
  --theme-gray-19:                                      var(--theme-shade-19);
  --theme-gray-20:                                      var(--theme-shade-20);
  --theme-style-text:                                   var(--theme-white);
}

.is-theme-style-light {
  /* theme */
  --theme-gray-01:                                      var(--theme-shade-20);
  --theme-gray-02:                                      var(--theme-shade-19);
  --theme-gray-03:                                      var(--theme-shade-18);
  --theme-gray-04:                                      var(--theme-shade-17);
  --theme-gray-05:                                      var(--theme-shade-16);
  --theme-gray-06:                                      var(--theme-shade-15);
  --theme-gray-07:                                      var(--theme-shade-14);
  --theme-gray-08:                                      var(--theme-shade-13);
  --theme-gray-09:                                      var(--theme-shade-12);
  --theme-gray-10:                                      var(--theme-shade-11);
  --theme-gray-11:                                      var(--theme-shade-10);
  --theme-gray-12:                                      var(--theme-shade-09);
  --theme-gray-13:                                      var(--theme-shade-08);
  --theme-gray-14:                                      var(--theme-shade-07);
  --theme-gray-15:                                      var(--theme-shade-06);
  --theme-gray-16:                                      var(--theme-shade-05);
  --theme-gray-17:                                      var(--theme-shade-04);
  --theme-gray-18:                                      var(--theme-shade-03);
  --theme-gray-19:                                      var(--theme-shade-02);
  --theme-gray-20:                                      var(--theme-shade-01);
  --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;
  }
}
