daggrcss/dist/daggr.css

A light-weight CSS style framework that focuses on useful responsive default styling and utilities. Daggr leaves the creative parts to the user.

/**
Centric.css
Opinionated CSS Reset
By Zach Moore
*/

*,
*::before,
*::after{
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
}

html {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    font-size: 1px;/*for using REM units*/
    cursor: default;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    word-break: normal;
}

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 18rem;
    font-weight: 400;
    text-rendering: optimizeSpeed;
    line-height: 1.3;
    color: #222;
    margin: 0;
    padding: 0;
}

*:not(body):not(html) {
    border-width: 0;
    outline-width: 0;
    padding: 0;
    margin: auto;
    text-align: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    background-color:transparent; 
}

img, h1, h2, h3, h4, h5, h6 {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

img {
    border-style: none;
}

a, button, input[type=submit], input[type=button] {
    text-decoration:none; 
    color:inherit; 
    cursor:pointer;
}

figure, textarea, input::-moz-focus-inner, fieldset, h1, h2, h3, h4, h5, h6, nav, ul, ol, dd {
    margin:0;
}

nav, ul, ol, dd {
    list-style:none;
}

h1, h2, h3, h4, h5, h6 {
    font-size:inherit; 
    font-weight:inherit;
}

b, strong {
    font-weight: bolder;
}

cite {
    font-style:normal;
}
	
blockquote, q {
    quotes: none;
}
	
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
	content: none;
}
	
table {
    border-collapse: collapse;
	border-spacing: 0;
}

small {
    font-size: 80%;
}

progress {
    display: inline-block;
    vertical-align: baseline;
}

/* Force svg fill to match text color */
svg:not([fill]) {
    fill: currentColor; 
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; 
}

textarea {
    overflow: auto;
    resize: vertical;
}

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

[type="search"] {
    -webkit-appearance: textfield;
}

::-webkit-search-decoration {
    -webkit-appearance: none; 
}

code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    word-break: break-all;
    word-wrap: break-word;
}

/*
Accessibility
*/

[aria-busy="true"] {
    cursor: progress; 
}

[aria-controls] {
    cursor: pointer; 
}

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed; 
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
         -o-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --desktop-container-width: 70%;
  --mobile-font-size: 22pt;
  --indent-size: 1.5em; }

.m-none, .gutters-none {
  margin: 0; }

.m-auto, .gutters-auto {
  margin: auto; }

.ml-auto {
  margin-left: auto; }

.mt-auto {
  margin-top: auto; }

.mb-auto {
  margin-bottom: auto; }

.mr-auto {
  margin-right: auto; }

.p-none {
  margin: 0; }

.p-auto {
  margin: auto; }

.pl-auto {
  padding-left: auto; }

.pt-auto {
  padding-top: auto; }

.pb-auto {
  padding-bottom: auto; }

.pr-auto {
  padding-right: auto; }

@media (min-width: 991px) {
  body .desktop-m-none, body .desktop-gutters-none {
    margin: 0; }
  body .desktop-m-auto, body .desktop-gutters-auto {
    margin: auto; }
  body .desktop-p-none {
    padding: 0; }
  body .desktop-p-auto {
    padding: auto; } }

.m-xs {
  margin: 12px; }

.ml-xs, .mx-xs {
  margin-left: 12px; }

.mt-xs, .my-xs {
  margin-top: 12px; }

.mr-xs, .mx-xs {
  margin-right: 12px; }

.mb-xs, .my-xs {
  margin-bottom: 12px; }

.p-xs {
  padding: 12px; }

.pl-xs, .px-xs {
  padding-left: 12px; }

.pt-xs, .py-xs {
  padding-top: 12px; }

.pr-xs, .px-xs {
  padding-right: 12px; }

.pb-xs, .py-xs {
  padding-bottom: 12px; }

.gutters-l-xs > :not(:first-child) {
  margin-left: 12px; }

.gutters-t-xs > :not(:first-child) {
  margin-top: 12px; }

.gutters-r-xs > :not(:last-child) {
  margin-right: 12px; }

.gutters-b-xs > :not(:last-child) {
  margin-bottom: 12px; }

@media (min-width: 991px) {
  body .desktop-m-xs {
    margin: 12px; }
  body .desktop-ml-xs, body .desktop-mx-xs {
    margin-left: 12px; }
  body .desktop-mt-xs, body .desktop-my-xs {
    margin-top: 12px; }
  body .desktop-mr-xs, body .desktop-mx-xs {
    margin-right: 12px; }
  body .desktop-mb-xs, body .desktop-my-xs {
    margin-bottom: 12px; }
  body .desktop-p-xs {
    padding: 12px; }
  body .desktop-pl-xs, body .desktop-px-xs {
    padding-left: 12px; }
  body .desktop-pt-xs, body .desktop-py-xs {
    padding-top: 12px; }
  body .desktop-pr-xs, body .desktop-px-xs {
    padding-right: 12px; }
  body .desktop-pb-xs, body .desktop-py-xs {
    padding-bottom: 12px; }
  body .desktop-gutters-l-xs > :not(:first-child) {
    margin-left: 12px; }
  body .desktop-gutters-t-xs > :not(:first-child) {
    margin-top: 12px; }
  body .desktop-gutters-r-xs > :not(:last-child) {
    margin-right: 12px; }
  body .desktop-gutters-b-xs > :not(:last-child) {
    margin-bottom: 12px; } }

.m-sm {
  margin: 48px; }

.ml-sm, .mx-sm {
  margin-left: 48px; }

.mt-sm, .my-sm {
  margin-top: 48px; }

.mr-sm, .mx-sm {
  margin-right: 48px; }

.mb-sm, .my-sm {
  margin-bottom: 48px; }

.p-sm {
  padding: 48px; }

.pl-sm, .px-sm {
  padding-left: 48px; }

.pt-sm, .py-sm {
  padding-top: 48px; }

.pr-sm, .px-sm {
  padding-right: 48px; }

.pb-sm, .py-sm {
  padding-bottom: 48px; }

.gutters-l-sm > :not(:first-child) {
  margin-left: 48px; }

.gutters-t-sm > :not(:first-child) {
  margin-top: 48px; }

.gutters-r-sm > :not(:last-child) {
  margin-right: 48px; }

.gutters-b-sm > :not(:last-child) {
  margin-bottom: 48px; }

@media (min-width: 991px) {
  body .desktop-m-sm {
    margin: 48px; }
  body .desktop-ml-sm, body .desktop-mx-sm {
    margin-left: 48px; }
  body .desktop-mt-sm, body .desktop-my-sm {
    margin-top: 48px; }
  body .desktop-mr-sm, body .desktop-mx-sm {
    margin-right: 48px; }
  body .desktop-mb-sm, body .desktop-my-sm {
    margin-bottom: 48px; }
  body .desktop-p-sm {
    padding: 48px; }
  body .desktop-pl-sm, body .desktop-px-sm {
    padding-left: 48px; }
  body .desktop-pt-sm, body .desktop-py-sm {
    padding-top: 48px; }
  body .desktop-pr-sm, body .desktop-px-sm {
    padding-right: 48px; }
  body .desktop-pb-sm, body .desktop-py-sm {
    padding-bottom: 48px; }
  body .desktop-gutters-l-sm > :not(:first-child) {
    margin-left: 48px; }
  body .desktop-gutters-t-sm > :not(:first-child) {
    margin-top: 48px; }
  body .desktop-gutters-r-sm > :not(:last-child) {
    margin-right: 48px; }
  body .desktop-gutters-b-sm > :not(:last-child) {
    margin-bottom: 48px; } }

.m-md {
  margin: 108px; }

.ml-md, .mx-md {
  margin-left: 108px; }

.mt-md, .my-md {
  margin-top: 108px; }

.mr-md, .mx-md {
  margin-right: 108px; }

.mb-md, .my-md {
  margin-bottom: 108px; }

.p-md {
  padding: 108px; }

.pl-md, .px-md {
  padding-left: 108px; }

.pt-md, .py-md {
  padding-top: 108px; }

.pr-md, .px-md {
  padding-right: 108px; }

.pb-md, .py-md {
  padding-bottom: 108px; }

.gutters-l-md > :not(:first-child) {
  margin-left: 108px; }

.gutters-t-md > :not(:first-child) {
  margin-top: 108px; }

.gutters-r-md > :not(:last-child) {
  margin-right: 108px; }

.gutters-b-md > :not(:last-child) {
  margin-bottom: 108px; }

@media (min-width: 991px) {
  body .desktop-m-md {
    margin: 108px; }
  body .desktop-ml-md, body .desktop-mx-md {
    margin-left: 108px; }
  body .desktop-mt-md, body .desktop-my-md {
    margin-top: 108px; }
  body .desktop-mr-md, body .desktop-mx-md {
    margin-right: 108px; }
  body .desktop-mb-md, body .desktop-my-md {
    margin-bottom: 108px; }
  body .desktop-p-md {
    padding: 108px; }
  body .desktop-pl-md, body .desktop-px-md {
    padding-left: 108px; }
  body .desktop-pt-md, body .desktop-py-md {
    padding-top: 108px; }
  body .desktop-pr-md, body .desktop-px-md {
    padding-right: 108px; }
  body .desktop-pb-md, body .desktop-py-md {
    padding-bottom: 108px; }
  body .desktop-gutters-l-md > :not(:first-child) {
    margin-left: 108px; }
  body .desktop-gutters-t-md > :not(:first-child) {
    margin-top: 108px; }
  body .desktop-gutters-r-md > :not(:last-child) {
    margin-right: 108px; }
  body .desktop-gutters-b-md > :not(:last-child) {
    margin-bottom: 108px; } }

.m-lg {
  margin: 192px; }

.ml-lg, .mx-lg {
  margin-left: 192px; }

.mt-lg, .my-lg {
  margin-top: 192px; }

.mr-lg, .mx-lg {
  margin-right: 192px; }

.mb-lg, .my-lg {
  margin-bottom: 192px; }

.p-lg {
  padding: 192px; }

.pl-lg, .px-lg {
  padding-left: 192px; }

.pt-lg, .py-lg {
  padding-top: 192px; }

.pr-lg, .px-lg {
  padding-right: 192px; }

.pb-lg, .py-lg {
  padding-bottom: 192px; }

.gutters-l-lg > :not(:first-child) {
  margin-left: 192px; }

.gutters-t-lg > :not(:first-child) {
  margin-top: 192px; }

.gutters-r-lg > :not(:last-child) {
  margin-right: 192px; }

.gutters-b-lg > :not(:last-child) {
  margin-bottom: 192px; }

@media (min-width: 991px) {
  body .desktop-m-lg {
    margin: 192px; }
  body .desktop-ml-lg, body .desktop-mx-lg {
    margin-left: 192px; }
  body .desktop-mt-lg, body .desktop-my-lg {
    margin-top: 192px; }
  body .desktop-mr-lg, body .desktop-mx-lg {
    margin-right: 192px; }
  body .desktop-mb-lg, body .desktop-my-lg {
    margin-bottom: 192px; }
  body .desktop-p-lg {
    padding: 192px; }
  body .desktop-pl-lg, body .desktop-px-lg {
    padding-left: 192px; }
  body .desktop-pt-lg, body .desktop-py-lg {
    padding-top: 192px; }
  body .desktop-pr-lg, body .desktop-px-lg {
    padding-right: 192px; }
  body .desktop-pb-lg, body .desktop-py-lg {
    padding-bottom: 192px; }
  body .desktop-gutters-l-lg > :not(:first-child) {
    margin-left: 192px; }
  body .desktop-gutters-t-lg > :not(:first-child) {
    margin-top: 192px; }
  body .desktop-gutters-r-lg > :not(:last-child) {
    margin-right: 192px; }
  body .desktop-gutters-b-lg > :not(:last-child) {
    margin-bottom: 192px; } }

.m-xl {
  margin: 300px; }

.ml-xl, .mx-xl {
  margin-left: 300px; }

.mt-xl, .my-xl {
  margin-top: 300px; }

.mr-xl, .mx-xl {
  margin-right: 300px; }

.mb-xl, .my-xl {
  margin-bottom: 300px; }

.p-xl {
  padding: 300px; }

.pl-xl, .px-xl {
  padding-left: 300px; }

.pt-xl, .py-xl {
  padding-top: 300px; }

.pr-xl, .px-xl {
  padding-right: 300px; }

.pb-xl, .py-xl {
  padding-bottom: 300px; }

.gutters-l-xl > :not(:first-child) {
  margin-left: 300px; }

.gutters-t-xl > :not(:first-child) {
  margin-top: 300px; }

.gutters-r-xl > :not(:last-child) {
  margin-right: 300px; }

.gutters-b-xl > :not(:last-child) {
  margin-bottom: 300px; }

@media (min-width: 991px) {
  body .desktop-m-xl {
    margin: 300px; }
  body .desktop-ml-xl, body .desktop-mx-xl {
    margin-left: 300px; }
  body .desktop-mt-xl, body .desktop-my-xl {
    margin-top: 300px; }
  body .desktop-mr-xl, body .desktop-mx-xl {
    margin-right: 300px; }
  body .desktop-mb-xl, body .desktop-my-xl {
    margin-bottom: 300px; }
  body .desktop-p-xl {
    padding: 300px; }
  body .desktop-pl-xl, body .desktop-px-xl {
    padding-left: 300px; }
  body .desktop-pt-xl, body .desktop-py-xl {
    padding-top: 300px; }
  body .desktop-pr-xl, body .desktop-px-xl {
    padding-right: 300px; }
  body .desktop-pb-xl, body .desktop-py-xl {
    padding-bottom: 300px; }
  body .desktop-gutters-l-xl > :not(:first-child) {
    margin-left: 300px; }
  body .desktop-gutters-t-xl > :not(:first-child) {
    margin-top: 300px; }
  body .desktop-gutters-r-xl > :not(:last-child) {
    margin-right: 300px; }
  body .desktop-gutters-b-xl > :not(:last-child) {
    margin-bottom: 300px; } }

.col, .col-1, body .desktop-col-1, .col-2, body .desktop-col-2, .col-3, body .desktop-col-3, .col-4, body .desktop-col-4, .col-5, body .desktop-col-5, .col-6, body .desktop-col-6, .col-7, body .desktop-col-7, .col-8, body .desktop-col-8, .col-9, body .desktop-col-9, .col-10, body .desktop-col-10, .col-11, body .desktop-col-11, .col-12, body .desktop-col-12 {
  position: relative;
  width: 100%; }

@media (min-width: 991px) {
  .container {
    max-width: var(--desktop-container-width); } }

.row {
  display: flex;
  flex-wrap: wrap; }

.col {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%; }

.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%; }

.order-1 {
  order: 1; }

@media (min-width: 991px) {
  body .desktop-col-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; } }

body .desktop-order-1 {
  order: 1; }

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.order-2 {
  order: 2; }

@media (min-width: 991px) {
  body .desktop-col-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; } }

body .desktop-order-2 {
  order: 2; }

.col-3 {
  flex: 0 0 25%;
  max-width: 25%; }

.order-3 {
  order: 3; }

@media (min-width: 991px) {
  body .desktop-col-3 {
    flex: 0 0 25%;
    max-width: 25%; } }

body .desktop-order-3 {
  order: 3; }

.col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.order-4 {
  order: 4; }

@media (min-width: 991px) {
  body .desktop-col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; } }

body .desktop-order-4 {
  order: 4; }

.col-5 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%; }

.order-5 {
  order: 5; }

@media (min-width: 991px) {
  body .desktop-col-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; } }

body .desktop-order-5 {
  order: 5; }

.col-6 {
  flex: 0 0 50%;
  max-width: 50%; }

.order-6 {
  order: 6; }

@media (min-width: 991px) {
  body .desktop-col-6 {
    flex: 0 0 50%;
    max-width: 50%; } }

body .desktop-order-6 {
  order: 6; }

.col-7 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%; }

.order-7 {
  order: 7; }

@media (min-width: 991px) {
  body .desktop-col-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; } }

body .desktop-order-7 {
  order: 7; }

.col-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%; }

.order-8 {
  order: 8; }

@media (min-width: 991px) {
  body .desktop-col-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; } }

body .desktop-order-8 {
  order: 8; }

.col-9 {
  flex: 0 0 75%;
  max-width: 75%; }

.order-9 {
  order: 9; }

@media (min-width: 991px) {
  body .desktop-col-9 {
    flex: 0 0 75%;
    max-width: 75%; } }

body .desktop-order-9 {
  order: 9; }

.col-10 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%; }

.order-10 {
  order: 10; }

@media (min-width: 991px) {
  body .desktop-col-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; } }

body .desktop-order-10 {
  order: 10; }

.col-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%; }

.order-11 {
  order: 11; }

@media (min-width: 991px) {
  body .desktop-col-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; } }

body .desktop-order-11 {
  order: 11; }

.col-12 {
  flex: 0 0 100%;
  max-width: 100%; }

.order-12 {
  order: 12; }

@media (min-width: 991px) {
  body .desktop-col-12 {
    flex: 0 0 100%;
    max-width: 100%; } }

body .desktop-order-12 {
  order: 12; }

.order-first {
  order: -1; }

@media (min-width: 991px) {
  body .desktop-order-first {
    order: -1; } }

.flex {
  display: flex; }

.align-top {
  align-items: flex-start; }

.align-center {
  align-items: center; }

.align-bottom {
  align-items: flex-end; }

.justify-left {
  justify-content: flex-start; }

.justify-center {
  justify-content: center; }

.justify-right {
  justify-content: flex-end; }

@media (min-width: 991px) {
  body .desktop-align-top {
    align-items: flex-start; }
  body .desktop-align-center {
    align-items: center; }
  body .desktop-align-bottom {
    align-items: flex-end; }
  body .desktop-justify-left {
    justify-content: flex-start; }
  body .desktop-justify-center {
    justify-content: center; }
  body .desktop-justify-right {
    justify-content: flex-end; } }

.pos-fixed {
  position: fixed; }

.pos-abs {
  position: absolute; }

.pos-sticky {
  position: -webkit-sticky;
  position: sticky; }

.pos-rel {
  position: fixed; }

.d-inline {
  display: inline; }

.d-none {
  display: none; }

.d-block {
  display: block; }

.d-iblock {
  display: inline-block; }

@media (min-width: 991px) {
  .desktop-d-none {
    display: none; }
  .desktop-d-block {
    display: block; }
  .desktop-d-inline {
    display: inline; }
  .desktop-d-iblock {
    display: inline-block; } }

@media (min-width: 991px) {
  .mobile-only {
    display: none !important; } }

@media (max-width: 991px) {
  .desktop-only {
    display: none !important; } }

.z-1 {
  z-index: 1; }

.z-2 {
  z-index: 2; }

.z-3 {
  z-index: 3; }

.z-4 {
  z-index: 4; }

.z-5 {
  z-index: 5; }

.z-6 {
  z-index: 6; }

.z-7 {
  z-index: 7; }

.z-8 {
  z-index: 8; }

.z-9 {
  z-index: 9; }

.z-10 {
  z-index: 10; }

.z-max {
  z-index: 100; }

.z-least {
  z-index: -100; }

.text-right {
  text-align: right; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

h6, h5, h4, h3, h2, h1 {
  text-transform: capitalize;
  font-weight: bolder; }

h6 {
  font-size: 0.6em; }

h5 {
  font-size: 1.2em; }

h4 {
  font-size: 1.8em; }

h3 {
  font-size: 2.4em; }

h2 {
  font-size: 3em; }

h1 {
  font-size: 3.6em; }

@media (max-width: 991px) {
  html, body {
    font-size: var(--mobile-font-size); } }

.text-capitalize {
  text-transform: capitalize; }

.text-upper {
  text-transform: uppercase; }

.text-lower {
  text-transform: lowercase; }

.indent {
  text-indent: var(--indent-size); }

.italic {
  font-style: italic; }

.bold {
  font-weight: bold; }

.bolder {
  font-weight: bolder; }

.w-10 {
  width: 10%; }

.h-10 {
  height: 10%; }

.w-20 {
  width: 20%; }

.h-20 {
  height: 20%; }

.w-30 {
  width: 30%; }

.h-30 {
  height: 30%; }

.w-40 {
  width: 40%; }

.h-40 {
  height: 40%; }

.w-50 {
  width: 50%; }

.h-50 {
  height: 50%; }

.w-60 {
  width: 60%; }

.h-60 {
  height: 60%; }

.w-70 {
  width: 70%; }

.h-70 {
  height: 70%; }

.w-80 {
  width: 80%; }

.h-80 {
  height: 80%; }

.w-90 {
  width: 90%; }

.h-90 {
  height: 90%; }

.w-100 {
  width: 100%; }

.h-100 {
  height: 100%; }

@media (min-width: 991px) {
  .desktop-w-10 {
    width: 10%; }
  .desktop-h-10 {
    height: 10%; }
  .desktop-w-20 {
    width: 20%; }
  .desktop-h-20 {
    height: 20%; }
  .desktop-w-30 {
    width: 30%; }
  .desktop-h-30 {
    height: 30%; }
  .desktop-w-40 {
    width: 40%; }
  .desktop-h-40 {
    height: 40%; }
  .desktop-w-50 {
    width: 50%; }
  .desktop-h-50 {
    height: 50%; }
  .desktop-w-60 {
    width: 60%; }
  .desktop-h-60 {
    height: 60%; }
  .desktop-w-70 {
    width: 70%; }
  .desktop-h-70 {
    height: 70%; }
  .desktop-w-80 {
    width: 80%; }
  .desktop-h-80 {
    height: 80%; }
  .desktop-w-90 {
    width: 90%; }
  .desktop-h-90 {
    height: 90%; }
  .desktop-w-100 {
    width: 100%; }
  .desktop-h-100 {
    height: 100%; } }

.full-screen-width {
  width: 100vw; }

.full-screen-height {
  height: 100vh; }

body input[type=text],
body input[type=date],
body input[type=datetime],
body input[type=number],
body input[type=search],
body input[type=time],
body input[type=url],
body input[type=email],
body textarea,
body select {
  border: 1px solid #aaa;
  padding: 5px;
  text-align: left; }
  body input[type=text]:focus, body input[type=text]:active, body input[type=text]:enabled, body input[type=text]:disabled,
  body input[type=date]:focus,
  body input[type=date]:active,
  body input[type=date]:enabled,
  body input[type=date]:disabled,
  body input[type=datetime]:focus,
  body input[type=datetime]:active,
  body input[type=datetime]:enabled,
  body input[type=datetime]:disabled,
  body input[type=number]:focus,
  body input[type=number]:active,
  body input[type=number]:enabled,
  body input[type=number]:disabled,
  body input[type=search]:focus,
  body input[type=search]:active,
  body input[type=search]:enabled,
  body input[type=search]:disabled,
  body input[type=time]:focus,
  body input[type=time]:active,
  body input[type=time]:enabled,
  body input[type=time]:disabled,
  body input[type=url]:focus,
  body input[type=url]:active,
  body input[type=url]:enabled,
  body input[type=url]:disabled,
  body input[type=email]:focus,
  body input[type=email]:active,
  body input[type=email]:enabled,
  body input[type=email]:disabled,
  body textarea:focus,
  body textarea:active,
  body textarea:enabled,
  body textarea:disabled,
  body select:focus,
  body select:active,
  body select:enabled,
  body select:disabled {
    border: 1px solid #000; }
  body input[type=text]:disabled,
  body input[type=date]:disabled,
  body input[type=datetime]:disabled,
  body input[type=number]:disabled,
  body input[type=search]:disabled,
  body input[type=time]:disabled,
  body input[type=url]:disabled,
  body input[type=email]:disabled,
  body textarea:disabled,
  body select:disabled {
    background: #aaa; }