lnked/react-starter

* {
  -webkit-touch-callout: none;
  -webkit-overflow-scrolling: touch;

  &,
  &:before,
  &:after {
    box-sizing: border-box;
  }
}

html,
body {
  height: 100%;
}

html {
  @include fluid-type(font-size, 320px, 1366px, $font-size-base, $font-size-limit);
  font-family: $font-family-base;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

body {
  width: 100%;
  color: $c-text-color;
  font-kerning: none;
  background-color: #fafafa;
}

p,
div,
body,
input,
button,
select,
textarea {
  font-feature-settings: 'kern', 'onum', 'liga';
}

textarea {
  text-align: left;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

svg {
  color: inherit;
  fill: currentColor;
  shape-rendering: geometricPrecision; /* auto | optimizeSpeed | crispEdges | geometricPrecision | inherit; */

  &:not(:root) {
    overflow: hidden;
  }
}

::selection {
  color: $c-select-color;
  background-color: $c-select-background;
  text-shadow: none;
}

[hidden],
template {
  display: none;
}

[role = 'button'] {
  cursor: pointer;
}

:global {
  .layout-wrapper {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .is-overflow {
    overflow: hidden;
  }

  .bulletin {
    position: absolute 0;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .headline {
    font-weight: 700;
    margin-bottom: 5px;
  }
}