gun/examples/style.css

@import url(https://fonts.googleapis.com/css?family=Oxygen);

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Oxygen', 'Trebuchet MS', arial;
	position: relative;
  background: black;
  color: white;
}

body {
	font-size: 18pt;
}

div, ul, ol, li, p, span, form, button, input, textarea {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.5em;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  box-sizing: border-box;
}

button, input, textarea {
  background: white;
  border: none;
  color: black;
}

a {
  color: white;
}

input, textarea {
	width: 100%;
}

ul, li {
  list-style: none;
}

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

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

.pad {
  margin: 5% auto;
  min-width: 250px;
  width: 95%;
  max-width: 50em;
}

.right {
  float: right;
}
.left {
  float: left;
}
.center {
  text-align: center;
}
.mid { 
  margin-left: auto;
  margin-right: auto; 
}
.flush {
  line-height: 0em;
}

.rim {
  margin: 2%;
}
.gap {
  padding: 3%;
}
.gully {
  margin-bottom: 1%;
}

.sit { margin-bottom: 0; }
.row { width: 100%; }
.col { max-width: 33em; }
.act {
  display: block;
  font-weight: normal;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}
.symbol {
  display: inline-block;
}

.loud {
  font-size: 150%;
}
.jot {
  border-bottom: 1px dashed #95B2CA;
}
.sap {
  border-radius: 0.1em;
}


.red {
	background: #ea3224;
}
.green {
	background: #33cc33;
}
.blue {
	background: #4D79D8;
}
.yellow {
	background: #f2b919;
}
.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: #f2b919;
}
.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: #f2b919;}
  75%  {background-color: #ea3224;}
  100% {background-color: #4D79D8;}
} @-webkit-keyframes hue {
  0%   {background-color: #4D79D8;}
  25%  {background-color: #33cc33;}
  50%  {background-color: #f2b919;}
  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: #f2b919;}
  75%  {color: #ea3224;}
  100% {color: #4D79D8;}
} @-webkit-keyframes huet {
  0%   {color: #4D79D8;}
  25%  {color: #33cc33;}
  50%  {color: #f2b919;}
  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: #f2b919;}
  100% {background-color: #ea3224;}
} @-webkit-keyframes hue2 {
  0%	 {background-color: #ea3224;}
  25%  {background-color: #4D79D8;}
  50%  {background-color: #33cc33;}
  75%  {background-color: #f2b919;}
  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: #f2b919;}
  100% {color: #ea3224;}
} @-webkit-keyframes huet2 {
  0%	 {color: #ea3224;}
  25%  {color: #4D79D8;}
  50%  {color: #33cc33;}
  75%  {color: #f2b919;}
  100% {color: #ea3224;}
}

.hue3 {
  background: #33cc33;
  -webkit-animation: hue3 900s infinite;
  animation: hue3 900s infinite;
}

@keyframes hue3 {
  0%	 {background-color: #33cc33;}
  25%  {background-color: #f2b919;}
  50%  {background-color: #ea3224;}
  75%  {background-color: #4D79D8;}
  100% {background-color: #33cc33;}
} @-webkit-keyframes hue3 {
  0%	 {background-color: #33cc33;}
  25%  {background-color: #f2b919;}
  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: #f2b919;}
  50%  {color: #ea3224;}
  75%  {color: #4D79D8;}
  100% {color: #33cc33;}
} @-webkit-keyframes huet3 {
  0%	 {color: #33cc33;}
  25%  {color: #f2b919;}
  50%  {color: #ea3224;}
  75%  {color: #4D79D8;}
  100% {color: #33cc33;}
}

.hue4 {
  background: #f2b919;
  -webkit-animation: hue4 900s infinite;
  animation: hue4 900s infinite;
}

@keyframes hue4 {
  0%   {background-color: #f2b919;}
  25%  {background-color: #ea3224;}
  50%  {background-color: #4D79D8;}
  75%	 {background-color: #33cc33;}
  100% {background-color: #f2b919;}
} @-webkit-keyframes hue4 {
  0%   {background-color: #f2b919;}
  25%  {background-color: #ea3224;}
  50%  {background-color: #4D79D8;}
  75%	 {background-color: #33cc33;}
  100% {background-color: #f2b919;}
}

.huet4 {
  color: #f2b919;
  -webkit-animation: huet4 900s infinite;
  animation: huet4 900s infinite;
}

@keyframes huet4 {
  0%   {color: #f2b919;}
  25%  {color: #ea3224;}
  50%  {color: #4D79D8;}
  75%	 {color: #33cc33;}
  100% {color: #f2b919;}
} @-webkit-keyframes huet4 {
  0%   {color: #f2b919;}
  25%  {color: #ea3224;}
  50%  {color: #4D79D8;}
  75%	 {color: #33cc33;}
  100% {color: #f2b919;}
}

.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;
  animation: joy 1s steps(28);
}
@keyframes joy {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2800px 0;
  }
}