/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: 'LibreBarcode39';
  src: url(https://daedalusmachine.neocities.org/FONTS/LB39.ttf);
}

@font-face {
  font-family: 'Courier';
  src: url(https://daedalusmachine.neocities.org/FONTS/COUR.ttf);
}

@font-face {
  font-family: 'Helvetica';
  src: url(https://daedalusmachine.neocities.org/FONTS/HELV.ttf);
}

@font-face {
  font-family: 'EBGaramond';
  src: url(https://daedalusmachine.neocities.org/FONTS/EBG.ttf);
}

.NAME {
  font-family: LibreBarcode39; 
  cursor: crosshair;
}

* {
  box-sizing: border-box;
}

figure {
  display: inline-block; 
}

body {
  background-color: black;
  font-family: Helvetica, sans-serif;
  opacity: 0;
  transition: opacity .5s;
}

.SANGUINE {
  color: #de1300;
  font-weight: bold;
  font-family: Courier, monospace;
}

.SUMMARY {
  color: #444444;
  font-family: EBGaramond, serif;
}

.coolLink {
  color: #3881ea;
  cursor: pointer;
}

.coolLink:hover {
  color: #ed2839;
}

.coolLink:visited {
  color: #444444;
}

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 12s linear infinite;
}

.marquee2 span {
  animation-delay: 6s;
}

.marquee3 span {
  animation-delay: 24s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/* tree */

.LEAF1 {
  animation: LeafAnim1 6s linear infinite;
  border:0.05em solid #E02040;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #E02040;
  color:#E02040;
  position:absolute;
  z-index: 4;
}

.LEAF2 {
  animation: LeafAnim2 7.5s linear infinite;
  border:0.05em solid #C00080;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #C00080;
  color:#C00080;
  position:absolute;
  z-index: 3;
}

.LEAF3 {
  animation: LeafAnim3 9s linear infinite;
  border:0.05em solid #A00080;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #A00080;
  color:#A00080;
  position:absolute;
  z-index: 2;
  
}

.LEAF4 {
  animation: LeafAnim4 6s linear infinite;
  border:0.05em solid #E02040;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #E02040;
  color:#E02040;
  position:absolute;
  z-index: 4;
}

.LEAF5 {
animation: LeafAnim4 6s linear infinite;
  border:0.05em solid #C00080;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #C00080;
  color:#C00080;
  position:absolute;
  z-index: 3;
}

.LEAF6 {
animation: LeafAnim4 6s linear infinite;
  border:0.05em solid #A00080;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #A00080;
  color:#A00080;
  position:absolute;
  z-index: 2;
  
}

@keyframes LeafAnim1 {
  0%, 100% {
    transform: translate(-0.1em,-0.1em);
  }
  25% {
    transform: translate(-0.1em,0.1em);
  }
  50% {
    transform: translate(0.1em,0.1em);
  }
  75% {
    transform: translate(0.1em,-0.1em);
  }
}

@keyframes LeafAnim2 {
  0%, 100% {
    transform: translate(-0.2em,-0.2em);
  }
  25% {
    transform: translate(-0.2em,0.2em);
  }
  50% {
    transform: translate(0.2em,0.2em);
  }
  75% {
    transform: translate(0.2em,-0.2em);
  }
}

@keyframes LeafAnim3 {
  0%, 100% {
    transform: translate(-0.3em,-0.3em);
  }
  25% {
    transform: translate(-0.3em,0.3em);
  }
  50% {
    transform: translate(0.3em,0.3em);
  }
  75% {
    transform: translate(0.3em,-0.3em);
  }
}

@keyframes LeafAnim4 {
  0%, 100% {
    transform: translate(0em,0em);
  }
}

.BOUGH {
  border:0.05em solid #C00080;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #202040;
  color:#202040;
  position:absolute;
  z-index: 1;
}