body, html {
  height: 100%;
  color: aliceblue;
  font-family: monospace;

}

.bg {
  /* The image used */
  /*background-image: url("10-images-home/00-background_wip-scene-01.png");*/
  background-color: black;
  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#wrap-mainDiv {
  position: absolute;
}

#mainDiv {
  width: auto;
}

#header {
  margin-left: 3em;
}

.blocks {
  display: block;
  position: relative;
}



#title-header {
    white-space: pre;
    z-index: 0;
}

#title-header:hover {
  cursor: URL(10-images-home/hello-kitty-help-select.cur);
}

#wrap-subtitle {
  opacity: 50%;
  position:relative;
  top: -5em;
  color: #00d800;
}

@keyframes float {
  0% {
    line-height: 100%;
    /*letter-spacing: 0rem;*/
  }
  100% {
    line-height: 140%;
    /*letter-spacing: 0.3rem;*/
  }
}

#wrap-subtitle span{
  /*animation-name: float;*/
  animation: 3s linear 1s infinite alternate float;
}

.click-targets {
  background-color: 0,0,0,0;
  position: relative;
  display: block;
  min-height:20px; min-width:100px;

}

/*.click-targets img {
       max-width: 250px;
}*/

#target-01 {
  top: 1em;
  left: -3em;
  z-index: 1;
}

#canna-fire {
  position: sticky;
  margin-top: -50em;
  margin-left: 51em;
  z-index: -4;
}

#target-03 {
  left: 5em;
  z-index: -1;
}

#anim-psyche {
  z-index: -4;
  left: 45em;
  top: 59em;
}

#target-03 img {
  width: 30%;
}

#target-05 {
  bottom: 15em;
  left: -2em;
}

.click-targets a:hover{
  cursor: URL(10-images-home/hello-kitty-help-select.cur);
}

#radio-player {
  position: absolute;
  margin-top: -5em;
  z-index: 3;
}

#block-ascii {
  position:absolute;
  top: 0px;
}

.ascii {
  display:block;
  position: absolute;
  white-space: pre;
}

.ascii div {
  margin-top: -5em;
  font-size: 1em;
  margin-left: 0em;
  letter-spacing: 0rem;
  line-height: 120%;
}

@keyframes wiggle {
  from {font-size: 1em;
    margin-top: -10em;
    margin-left: 0em;
    line-height: 120%;
    letter-spacing: 0rem;
    transform: scale(1) rotate(0deg);
  }
  to {font-size: 0.5em;
    margin-top: -10em;
    margin-left: -10em;
    line-height: 200%;
    letter-spacing: 0.5rem;
    transform: scale(1.5) rotate(-20deg);
  }
}

.ascii div:hover { 
  animation: 4s linear 1s infinite alternate wiggle;
  /*-webkit-transform: scale(1.5);
  -webkit-transform: rotate(-20deg);*/
}

#ascii-kuromi {
  top: 18em;
  left: 20em;
  z-index: -3;
  font-size: 0.8em;
}

#ascii-noeud {
  margin-top: 96em;
  left: 28em;
}

#ascii-manga {
  color: #003008;
  top: 15em;
  left: 85em;
  font-size: 6px;
}
#ascii-kuromi02 {
  top: 90em;
  left: 90em;
}

#ascii-cringe {
  color: #003008;
  top: -10em;
  z-index: -2;
}

#ascii-paris {
  color: #003008;
  top: 60em;
  left: 76em;
  z-index: -2;
  font-size: 7px;
  line-height: 0.8em;
}

#ascii-cringe2 {
  color: #003008;
  top: 67em;
  z-index: -2;
}

#ascii-cringe2 img {
  position: absolute;
  top: 20em;
}

#ascii-selfie {
  color: #000000;
  top: 52em;
  left: 23em;
  z-index: -4;
}

#ascii-selfie div p{
  background-color: #003008;
  line-height: 0.9em;
}

#ascii-marijuana-leaf {
  color: whitesmoke;
  line-height: 0.8em;
  top: 70em;
  left: 56em;
  max-width: 300px;
    
}

#ascii-spliffs {
  color: whitesmoke;
  top: 25em;
  left: 57em;
  max-width: 400px;
  max-height: 400px;
    
}

#ascii-spliffs div {
  margin-top: -10em;
}

#ascii-bart {
  color: #003008;
  z-index: -2;
  top: 2em;
  left:80em;
}

#ascii-cat {
  color: #003008;
  z-index: -2;
  top: 130em;
  left:60em;
  line-height: 1.2em;
}

#block-contributors {
  width: 400px;
  padding-top: 20em;
  font-family: monospace, -webkit-pictograph;
  font-size: 1.2em;
  /*display: inline-block;*/
  color: #00d800;
  text-align: center;
  z-index: +1;
  opacity: 0.7;
}

#ascii-list-contrib {
  position: relative;
  background-color: rgba(0,0,0,0);
}

#block-artists {
  max-width: 500px;
  font-family: monospace, -webkit-pictograph;
  font-size: 1em;
  /*display: inline-block;*/
  color: #00d800;
  z-index: +1;
  opacity: 0.7;
  line-height: 1.5;
}

#ascii-list-artists {
  width: auto;
  margin-top: 2.5em; 
}

#ascii-list-artists a:link {
  color: #00d800;
  text-decoration: none;
}

#ascii-list-artists a:hover {
  color: #00d800;
  text-decoration: underline;
}

#ascii-list-artists a:visited {
  text-decoration: none;
    color: #0c8e21;
}

#block-events {
  max-width: 400px;
  font-family: monospace, -webkit-pictograph;
  font-size: 0.8em;
  /*display: inline-block;*/
  color: #00d800;
  z-index: +1;
  opacity: 0.7;
  line-height: 2;
  left: 30em;
  margin-top: 5em;
}

.events-title {
  line-height: 1em;
}

#ascii-list-events {
  width: auto;
}

#ascii-list-events a:link {
  color: #00d800;
  text-decoration: none;
}

#ascii-list-events a:hover {
  color: #00d800;
  text-decoration: underline;
}

#ascii-list-events a:visited {
  text-decoration: none;
    color: #0c8e21;
}

#radio-player {
  position: fixed;
  bottom: 10px;
  background-color: rgba(0,0,0,0);
  width: 100%;
  padding: 2em;
}

#radio-player button{
  border: none;
  color: #00d800;
  padding: 0.2em;
  background-color: rgba(0,0,0,0);
  font-family: monospace;
  font-size: 2em;
  height: 130px;
}