:root {
  --c-fg: #3d3830;
  --c-mid: #968d7d;
  --c-bg: #e8e0d3;

  --fg: var(--c-fg);
  --bg: var(--c-mid);
}

.on {
   --fg: var(--c-fg);
   --bg: var(--c-bg);
}

.off {
   --fg: var(--c-bg);
   --bg: var(--c-fg);
}

.mid {
   --fg: var(--c-fg);
   --bg: var(--c-mid);
}

* {
   margin: 0px;
   padding: 0px;
   text-align: center;
   color: var(--fg);
   box-sizing: border-box;
}

html, body, main {
   height: 100%;
   background-color: var(--bg);
   line-height: 1.5;
   font-family: "Fira Sans", sans-serif;
   font-size: 12pt;
}

main {
   padding: 1rem;
   margin: auto;
   max-width: 60rem;

   animation-name: fade-in;
   animation-duration: 0.5s;
}

@keyframes fade-in {
  0%   {opacity: 0;}
  50%  {opacity: 0;}
  100% {opacity: 1;}
}

h1 {
   margin-top: 4rem;
   margin-bottom: 2rem;
}

h2 {
   margin-top: 2rem;
   margin-bottom: 1rem;
}

input,
button {
   border: 2px solid var(--fg);
   background-color: var(--bg);
   border-radius: 1rem;
   padding: 0.375rem 0.75rem;
}

input[type="file"] {
   width: 0px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

fieldset {
   border: none;
   display: flex;
   justify-content: flex-start;
}

fieldset > * {
   margin-left: 1rem;
   margin-right: 1rem;
}

fieldset > *:first-child {
   margin-left: 0rem;
}

fieldset > *:last-child {
   margin-right: 0rem;
}

fieldset > input[type="text"] {
   flex-grow: 1;
}

.login {
   margin: 5rem auto;
   max-width: 30rem;
}

section.group {
   display: flex;
   flex-direction: column;
}

section.group h2 {
   border-bottom: 2px solid var(--fg);
}

div.widgets {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
   grid-auto-rows: 10rem;
   grid-gap: 0.5rem;
}

@media screen and (max-width: 30rem) {
   div.widgets {
      display: flex;
      overflow-x: auto;
   }

   div.widgets > * {
      width: 10rem;
      height: 10rem;
      flex-shrink: 0;
   }
}

div.widgets > * {
   border: 2px solid var(--fg);
}

div.card {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: var(--bg);
}

div.card > * {
   margin: 0rem auto;
}


div.card > p {
   padding-left: 1rem;
   padding-right: 1rem;
}

div.card > .name {
   font-size: 100%;
}

div.card > .small {
   font-size: 75%;
}

div.card > .medium {
   font-size: 100%;
}

div.card > .large {
   font-size: 150%;
}

div.card > .bold {
   font-weight: bolder;
}

div.card > .mono {
   font-family: "Fira Mono", monospace;
}