body {
  /* background-color: #dddddd; */
  background-color: rgba(110, 108, 90, 1);


  /* overflow: hidden; */
  /* border: solid yellow; */
  color: white;
  font-family: sans-serif;

  user-select: none;


}

p {
  text-align: justify;
}

html, body {
  height: calc(100%);
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.background {
  background: rgb(110,108,90);
  background: linear-gradient(180deg, rgba(110,108,90,1) 0%, rgba(70,69,57,1) 87%, rgba(65,64,53,1) 90%, rgba(0,0,0,1) 100%);
}

.twitch-video {
  width: 142vw;
  height: 115vh;
  left: -321px;
  top: -50px;
  position: fixed;
  pointer-events: none;
}

.hide {display: none;}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@font-face {
  font-family: Blob;
  src: url(blobs.ttf) format('truetype');
}

@font-face {
  font-family: Young;
  src: url(youngserif-regular.ttf) format('truetype');
  font-weight: regular;
}

h1 {
  /* font-family: Blobs;
  text-shadow: rgba(219,212,153,0.74) 0px 0px 13px;
  text-align: center; */
  font-size: 3em;

  box-shadow: 2px -3px 18px 6px rgba(129,205,50,0.5), 2px -3px 17px 21px rgba(66,103,25,0.1);

  text-shadow: rgba(129,205,50,0.9) 0px 0px 9px;

  margin-top: 40px;
}

.mailto {

  font-family: sans-serif;
  font-family: sans-serif;
  font-size: 1em;
  width: fit-content;
  top: 50vh;
  left: 50%;
  border-radius: 20px;
  position: fixed;
  /* bottom: 31px; */
  /* right: calc(15vw + 409px); */
  /* bottom: 7px; */
  /* left: -50px; */
  transform: translateX(-50%);
  text-shadow: rgba(255,255,255,0.9) 0px 0px 9px;
  /* box-shadow: 0px 0px 8px 3px rgb(255 255 255 / 50%); */
  border: none;
  /* padding-left: 10px; */
  /* padding-right: 10px; */
  /* padding-top: 2.5px; */
  /* padding-bottom: 2.5px; */
  /* border-radius: 20px; */
  transition: transform 0.25s ease;
  /* user-select: all; */
  z-index: 100;
}

.mailselect {
  user-select: text;
}

.blobby-image {
  position: absolute;
  top: 50px;
  left: 50px;
  height: 300px;
  width: 300px;
  /* border: solid blue; */
  object-fit: contain;
}

/* .marquee {
-moz-animation: marquee 20s linear infinite;
-webkit-animation: marquee 20s linear infinite;
animation: marquee 20s linear infinite;
white-space: nowrap;
}

@keyframes marquee {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%) }
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
} */

/* .marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-text {
  display: inline-block;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
} */




.marquee {
  overflow: hidden;
  white-space: nowrap;

  text-shadow: rgba(255,255,255,0.9) 0px 0px 9px;

  z-index: 2;

}

#span1{
  position: fixed;
  /* display: block; */
  /* width: 100%; */
  /* border: solid red; */

  /* position: absolute;
  overflow: visible; */

  animation: marquee 250s linear infinite;
}

#span2{
  position: fixed;
  /* border: solid blue; */
  /* display: block; */
  /* width: 100%; */
  /* left: 100%; */
  /* border: solid pink; */

  /* position: absolute;
  overflow: visible; */

  animation: marquee2 250s linear infinite;
  /* animation-delay: 5s; */
}

#span3{
  position: fixed;
  border: solid blue;
  /* display: block; */
  /* width: 100%; */
  /* left: 100%; */
  /* border: solid pink; */

  /* position: absolute;
  overflow: visible; */

  animation: marquee3 150s linear infinite;
  /* animation-delay: 5s; */
}

@keyframes marquee {
  0% { transform: translateX(calc(100vw + 0%)); }
  100% { transform: translateX(calc(100vw - 200%)); }
}

/* @keyframes marquee {
  0% { left: 0%; }
  100% { left: -200%; }
} */

@keyframes marquee2 {
  0% { transform: translateX(calc(100vw + 100%)); }
  100% { transform: translateX(calc(100vw - 100%)); }
}

/* @keyframes marquee2 {
  0% { left: 100%; }
  100% { left: -100%; }
} */

@keyframes marquee3 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes marquee3 {
  0% { left: 1000%; }
  100% { left: 0%; }
}