/* a minimalist set of CSS resets */

/* default to border-box */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* adjust typography defaults */
body {
   margin: auto;
  padding: 10px;
  margin-top: 24px;
  min-height: 100vh;
  max-width: 60ch;
  font-family: monospace;
  line-height: 1.5;
  background-color: #000000;
  /* background-image: linear-gradient(#9999ff, #5555ff); */
  

}

/* images and videos max out at full width */
img,
video {
  height: auto;
  max-width: 100%;
}

h1 {
  background-color: #99999999;
  border-radius: 8px;
  opacity: 1;
  color: #ffffff;
  text-align: center;
  font-family: monospace;
}

h2 {
  background-color: #99999977;
  border-radius: 8px;
  opacity: 1;
  color: #ffffff;
  text-align: center;
  font-family: monospace;
}

h3 {
  background-color: #99999977;
  border-radius: 8px;
  opacity: 1;
  color: #ffffff;
  text-align: center;
  font-family: monospace;
}

h4 {
  background-color: #99999966;
  border-radius: 8px;
  opacity: 1;
  color: #ffffff;
  text-align: center;
  font-family: monospace;
}

h5 {
  background-color: #99999955;
  border-radius: 8px;
  opacity: 1;
  color: #ffffff;
  text-align: center;
  font-family: monospace;
}

h6 {
  background-color: #99999955;
  border-radius: 8px;
  opacity: 1;
  color: #ffffff;
  text-align: center;
  font-family: monospace;
  
}

p {
  text-wrap: wrap;
  background-color: #99999955;
  padding-left: 4px;
   padding-top: 2px;
   padding-bottom: 2px;
  border-radius: 8px;
  opacity: 1;
  font-weight: normal;
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
  overflow-wrap: break-word;

}

dl {
  text-wrap: wrap;
  background-color: #99999955;
  padding-left: 4px;
   padding-top: 2px;
   padding-bottom: 2px;
  border-radius: 8px;
  opacity: 1;
  font-weight: normal;
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
  overflow-wrap: break-word;

}

a {
  background-color: #99999955;
  padding-left: 4px;
  border-radius: 8px;
  opacity: 1;
  font-weight: normal;
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
  padding-right: 4px;
 padding-bottom: 4px;
   padding-top: 4px;
}

input {
   box-sizing: border-box;
  background-color: #99999955;
  border-radius: 8px;
  outline: none;
  opacity: 1;
  font-weight: normal;
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
}

textarea {
   box-sizing: border-box;
  background-color: #99999955;
  border-radius: 8px;
  outline: none;
  opacity: 1;
  font-weight: normal;
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
   resize: none;
}

div {
   box-sizing: border-box;
  background-color: #99999955;
  border-radius: 8px;
  outline: none;
  opacity: 1;
  font-weight: normal;
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
   resize: none;
}

button {
   box-sizing: border-box;
  background-color: #99999955;
  border-radius: 8px;
  outline: none;
  opacity: 1;
  font-weight: normal;
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
}

button {border:0;outline:0;}

input {border:0;outline:0;}

textarea {border:0;outline:0;}
input:focus {outline:none!important;}


@keyframes hover {
  from {bottom: -30px;}
  to {bottom: 0px;}
}

@keyframes hover2 {
  from {bottom: 0px;}
  to {bottom: -30px;}
}

@keyframes in0 {
  0% {font-size: 24px; font-weight: 700;}
  50% {font-size: 20px; font-weight: 700;}
  100% {font-size: 24px; font-weight: 700;}
}

@keyframes in {
  from {background-color:#99999922;opacity:0.6;}
  to {background-color:#99999955;opacity:1;}
}

@keyframes in1 {
  from {font-size: 24px; font-weight: 700;}
  to {font-size: 20px; font-weight: 400;}
}

@keyframes in2 {
  from {font-size: 18px; font-weight: 700;}
  to {font-size: 16px; font-weight: 400;}
}

@keyframes in3 {
  0% {opacity:0.6;}
  50% {opacity:1;}
  100% {opacity:0.6;}
}

@keyframes in4 {
  0% {opacity:1;}
  50% {opacity:1;}
  100% {opacity:0;}
}

@keyframes in5 {
  0% {opacity: 0; width: 7rem; height: 7rem; font-size: 400%;}
  100% {opacity: 1; width: 5rem; height: 5rem; font-size: 300%;}
}

@keyframes in6 {
  0% {opacity: 1; color:#000000}
  50% {opacity: 1; color:#ffffff00}
  100% {opacity: 1; color:#00ff00; background-color:#009900}
}

@keyframes in7 {
  0% {opacity: 1; width: 5rem; height: 5rem; font-size: 300%; background-color:#009900; color:#00ff00;}
  100% {opacity: 0; width: 7rem; height: 7rem; font-size: 400%; background-color:#999999; color:#009900;}
}


.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;

  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
   text-wrap: wrap;
  background-color: #99999955;
  padding-left: 4px;
   padding-top: 2px;
   padding-bottom: 2px;
  border-radius: 8px;
  opacity: 1;
  font-weight: normal;
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
  overflow-wrap: break-word;
}