gun/examples/style.css

html, body {
	margin: 0;
	padding: 0;
	position: relative;
  line-height: 1.5;
  font-size: 18pt;
  f-ont-size: max(18pt, 2?vw);
}

div, ul, ol, li, p, span, form, button, input, textarea, img {
  margin: 0;
  padding: 0;
  position: relative;
  vertical-align: inherit;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  box-sizing: border-box;
  font: inherit;
}

a, button, input, textarea {
  background: inherit;
  border: inherit;
  color: inherit;
  text-decoration: inherit;
  outline: none;
}
a:focus, button:focus, input[type=button]:focus, input[type=submit]:focus {
  animation: pulse 2s infinite;
}

input:not([type=button]):not([type=submit]), textarea {
	width: 100%;
}
::placeholder, .hint {
  color: inherit;
  opacity: 0.3;
}

ul, li {
  list-style: none;
}

p {
  padding: 0;
}
p + p {
  padding-top: 0;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
}

.model, .none { display: none }
.hide { 
  opacity: 0;
  visibility: hidden;
  transition: all 2s;
}

.full, .page {
  width: 100%;
  min-height: 100vh;
}

.max {
  max-width: 48em;
}
.min {
  min-width: 12em;
}
.pad {
  width: 95%;
  margin: 5% auto;
  max-width: 48em;
  min-width: 12em;
}

.right {
  float: right;
  text-align: right;
}
.left {
  float: left;
  text-align: left;
}
.center {
  text-align: center;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
}
.mid { 
  margin-left: auto;
  margin-right: auto; 
}
.top {
  vertical-align: top;
}
.low {
  vertical-align: bottom;
}

.rim { margin: 1%; }
.gap {
  padding: 3%;
  padding: clamp(0.5em, 3%, 1.5em);
}
.stack { line-height: 0; }
.crack { margin-bottom: 1%; }
.sit { margin-bottom: 0; }

.row { width: 100%; }
.col {
  max-width: 24em;
  min-width: 12em;
}

.focus {
  margin-left: auto;
  margin-right: auto;
  float: none;
  clear: both;
}

.leak { overflow: visible; }
.hold { overflow: hidden; }

.act {
  /*display: block;*/
  font-weight: normal;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}

.unit, .symbol {
  display: inline-block;
  vertical-align: inherit;
}
.sap { border-radius: 0.1em; }
.jot { border-bottom: 1px dashed #95B2CA; }

.loud {
  font-size: 150%;
}
.shout {
  font-size: 36pt;
  font-size: 6.5vmax;
}

.red { background: #ea3224; }
.green { background: #33cc33; }
.blue { background: #4D79D8; }
.yellow { background: #d3a438; }
.black { background: black; }
.white { background: white; }

.shade { background: rgba(0%, 0%, 0%, 0.1); }
.tint { background: rgba(100%, 100%, 100%, 0.1); }

.redt { color: #ea3224; }
.greent { color: #33cc33; }
.bluet { color: #4D79D8; }
.yellowt { color: #d3a438; }
.blackt { color: black; }
.whitet { color: white; }

.hue {
  background: #4D79D8;
  -webkit-animation: hue 900s infinite;
  animation: hue 900s infinite;
} @keyframes hue {
  0%   {background-color: #4D79D8;}
  25%  {background-color: #33cc33;}
  50%  {background-color: #d3a438;}
  75%  {background-color: #ea3224;}
  100% {background-color: #4D79D8;}
} @-webkit-keyframes hue {
  0%   {background-color: #4D79D8;}
  25%  {background-color: #33cc33;}
  50%  {background-color: #d3a438;}
  75%  {background-color: #ea3224;}
  100% {background-color: #4D79D8;}
}

.huet {
  color: #4D79D8;
  -webkit-animation: huet 900s infinite;
  animation: huet 900s infinite;
} @keyframes huet {
  0%   {color: #4D79D8;}
  25%  {color: #33cc33;}
  50%  {color: #d3a438;}
  75%  {color: #ea3224;}
  100% {color: #4D79D8;}
} @-webkit-keyframes huet {
  0%   {color: #4D79D8;}
  25%  {color: #33cc33;}
  50%  {color: #d3a438;}
  75%  {color: #ea3224;}
  100% {color: #4D79D8;}
}

.hue2 {
  background: #ea3224;
  -webkit-animation: hue2 900s infinite;
  animation: hue2 900s infinite;
} @keyframes hue2 {
  0%	 {background-color: #ea3224;}
  25%  {background-color: #4D79D8;}
  50%  {background-color: #33cc33;}
  75%  {background-color: #d3a438;}
  100% {background-color: #ea3224;}
} @-webkit-keyframes hue2 {
  0%	 {background-color: #ea3224;}
  25%  {background-color: #4D79D8;}
  50%  {background-color: #33cc33;}
  75%  {background-color: #d3a438;}
  100% {background-color: #ea3224;}
}

.huet2 {
  color: #ea3224;
  -webkit-animation: huet2 900s infinite;
  animation: huet2 900s infinite;
} @keyframes huet2 {
  0%	 {color: #ea3224;}
  25%  {color: #4D79D8;}
  50%  {color: #33cc33;}
  75%  {color: #d3a438;}
  100% {color: #ea3224;}
} @-webkit-keyframes huet2 {
  0%	 {color: #ea3224;}
  25%  {color: #4D79D8;}
  50%  {color: #33cc33;}
  75%  {color: #d3a438;}
  100% {color: #ea3224;}
}

.hue3 {
  background: #33cc33;
  -webkit-animation: hue3 900s infinite;
  animation: hue3 900s infinite;
} @keyframes hue3 {
  0%	 {background-color: #33cc33;}
  25%  {background-color: #d3a438;}
  50%  {background-color: #ea3224;}
  75%  {background-color: #4D79D8;}
  100% {background-color: #33cc33;}
} @-webkit-keyframes hue3 {
  0%	 {background-color: #33cc33;}
  25%  {background-color: #d3a438;}
  50%  {background-color: #ea3224;}
  75%  {background-color: #4D79D8;}
  100% {background-color: #33cc33;}
}

.huet3 {
  color: #33cc33;
  -webkit-animation: huet3 900s infinite;
  animation: huet3 900s infinite;
} @keyframes huet3 {
  0%	 {color: #33cc33;}
  25%  {color: #d3a438;}
  50%  {color: #ea3224;}
  75%  {color: #4D79D8;}
  100% {color: #33cc33;}
} @-webkit-keyframes huet3 {
  0%	 {color: #33cc33;}
  25%  {color: #d3a438;}
  50%  {color: #ea3224;}
  75%  {color: #4D79D8;}
  100% {color: #33cc33;}
}

.hue4 {
  background: #d3a438;
  -webkit-animation: hue4 900s infinite;
  animation: hue4 900s infinite;
} @keyframes hue4 {
  0%   {background-color: #d3a438;}
  25%  {background-color: #ea3224;}
  50%  {background-color: #4D79D8;}
  75%	 {background-color: #33cc33;}
  100% {background-color: #d3a438;}
} @-webkit-keyframes hue4 {
  0%   {background-color: #d3a438;}
  25%  {background-color: #ea3224;}
  50%  {background-color: #4D79D8;}
  75%	 {background-color: #33cc33;}
  100% {background-color: #d3a438;}
}

.huet4 {
  color: #d3a438;
  -webkit-animation: huet4 900s infinite;
  animation: huet4 900s infinite;
} @keyframes huet4 {
  0%   {color: #d3a438;}
  25%  {color: #ea3224;}
  50%  {color: #4D79D8;}
  75%	 {color: #33cc33;}
  100% {color: #d3a438;}
} @-webkit-keyframes huet4 {
  0%   {color: #d3a438;}
  25%  {color: #ea3224;}
  50%  {color: #4D79D8;}
  75%	 {color: #33cc33;}
  100% {color: #d3a438;}
}

.pulse {
  animation: pulse 2s infinite;
} @keyframes pulse {
  0% {opacity: 1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}

.joy {
  width: 100px;
  height: 100px;
  position: absolute;
  background: url(https://cdn.jsdelivr.net/npm/gun/examples/pop.png) no-repeat;
  background-position: -2800px 0;
  pointer-events: none;
  z-index: 999999999;
  animation: joy 1s steps(28);
} @keyframes joy {
  0% {background-position: 0 0;}
  100% {background-position: -2800px 0;}
}

.visually-hidden {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}