body {
   background-color: black;
}

@media only screen and (orientation:landscape) {
   .title {
      display: flex;
      user-select: none;
      position: fixed;
      top: 20px;
      right: 20px;
      color: white;
      font-family: sans-serif;
      font-size: 5vw;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
      z-index:10
   }  
   .copyright {
      display: flex;
      user-select: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      color: white;
      font-family: sans-serif;
      font-size: 2vw;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
      z-index:10
   }
   .links {
      display: flex;
      user-select: none;
      position: fixed;
      bottom: 20px;
      left: 20px;
      color: white;
      font-family: sans-serif;
      font-size: 2vw;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
      z-index:10
   }  
   .copy {
      user-select: none;
      display: flex;
      user-select: none;
      position: fixed;
      bottom: 80px;
      left: 50vw;
      transform: translateX(-50%);
      color: white;
      font-family: sans-serif;
      font-size: 2.5vw;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
   }  
   .description {
      user-select: none;
      display: flex;
      user-select: none;
      position: fixed;
      top: 50vh;
      left: 50vw;
      transform: translate(-50%, -50%);
      color: white;
      font-family: sans-serif;
      font-size: 3.5vmin;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
      display: none;
      z-index:10;
   }  
   .img {
      height: 50vh;
      border-radius: 50%;
      display: flex;
      user-select: none;
      position: fixed;
      top: calc(50% - 25vh);
      left: calc(50% - 25vh);
   	translate3d(0,0,0);
   	transition: all 0.5s ease-out;
   	z-index: -20;
   }
   .divspace {
      height: 2500vh;
   }
   .tree1 {
      width: 30vw;
      display: flex;
      user-select: none;
      position: fixed;
      left: 10%;
      bottom: 0;
      display: none;
      z-index:0;
      filter: invert(6%) sepia(75%) saturate(6366%) hue-rotate(39deg) brightness(30%) contrast(106%);
   	transition: all 0.5s ease-out;
   }
   .tree2 {
      width: 30vw;
      display: flex;
      user-select: none;
      position: fixed;
      left: 0;
      bottom: 0;
      display: none;
      z-index:1;
      filter: invert(6%) sepia(75%) saturate(6366%) hue-rotate(39deg) brightness(35%) contrast(106%);
   	transition: all 0.5s ease-out;
   }
   .tree3 {
      width: 30vw;
      display: flex;
      user-select: none;
      position: fixed;
      right: 10%;
      bottom: 0;
      display: none;
      z-index:0;
      filter: invert(6%) sepia(75%) saturate(6366%) hue-rotate(39deg) brightness(30%) contrast(106%);
   	transition: all 0.5s ease-out;
   }
   .tree4 {
      width: 30vw;
      display: flex;
      user-select: none;
      position: fixed;
      right: 0;
      bottom: 0;
      display: none;
      z-index:1;
      filter: invert(6%) sepia(75%) saturate(6366%) hue-rotate(39deg) brightness(35%) contrast(106%);
   	transition: all 0.5s ease-out;
   }
   .tree6 {
      width: 30vw;
      display: flex;
      user-select: none;
      position: fixed;
      right: -25px;
      bottom: 0;
      display: none;
      z-index:2;
      filter: invert(14%) sepia(85%) saturate(2530%) hue-rotate(111deg) brightness(25%) contrast(103%);
   	transition: all 0.5s ease-out;
   }
   .tree6r {
      width: 30vw;
      display: flex;
      user-select: none;
      position: fixed;
      left: -25px;
      bottom: 0;
      display: none;
      z-index:2;
      filter: invert(14%) sepia(85%) saturate(2530%) hue-rotate(111deg) brightness(25%) contrast(103%);
   	transition: all 0.5s ease-out;
   }
   .treec1 {
      width: 30vw;
      display: flex;
      user-select: none;
      position: fixed;
      left: 25%;
      bottom: 0;
      display: none;
      z-index:0;
      filter: invert(14%) sepia(85%) saturate(2530%) hue-rotate(111deg) brightness(25%) contrast(103%);
   	transition: all 0.5s ease-out;
   }
   .treec2 {
      width: 30vw;
      display: flex;
      user-select: none;
      position: fixed;
      right: 25%;
      bottom: 0;
      display: none;
      z-index:0;
      filter: invert(14%) sepia(85%) saturate(2530%) hue-rotate(111deg) brightness(25%) contrast(103%);
   	transition: all 0.5s ease-out;
   }
   .mountains {
      width: 100%;
      display: flex;
      user-select: none;
      position: fixed;
      left: 0;
      bottom: -20%;
      display: none;
      z-index:-10;
      filter: blur(3px);
   	transition: all 0.5s ease-out;
   }
   .clouds {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .5;
      top: 3%;
      left: 0%;
      display: none;
      z-index:-20;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft 45s linear infinite;
   }
   .clouds2 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .5;
      top: 3%;
      left: 0%;
      display: none;
      z-index:-20;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft2 45s linear infinite;
   }
   .clouds3 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .3;
      top: 20%;
      left: 0%;
      display: none;
      z-index:-30;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft 60s linear infinite;
   }
   .clouds4 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .3;
      top: 20%;
      left: 0%;
      display: none;
      z-index:-30;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft2 60s linear infinite;
   }
   .clouds5 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .2;
      top: 35%;
      left: 0%;
      display: none;
      z-index:-20;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft 75s linear infinite;
   }
   .clouds6 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .2;
      top: 35%;
      left: 0%;
      display: none;
      z-index:-20;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft2 75s linear infinite;
   }
   @keyframes moveleft {
      from {transform:translateX(0);}
      to   {transform:translateX(100%);}
   }
   @keyframes moveleft2 {
      from {transform:translateX(-100%);}
      to   {transform:translateX(0);}
   }
}
@media only screen and (orientation:portrait) {
   .title {
      user-select: none;
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-family: sans-serif;
      font-size: 8vw;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
      z-index:10
   }  
   .copyright {
      user-select: none;
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-family: sans-serif;
      font-size: 3.5vw;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
      z-index:10
   }
   .links {
      user-select: none;
      position: fixed;
      top: 6em;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-family: sans-serif;
      font-size: 2.5vw;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
      z-index:10
   }  
   .copy {
      user-select: none;
      display: flex;
      user-select: none;
      position: fixed;
      bottom: 4em;
      left: 50vw;
      transform: translateX(-50%);
      color: white;
      font-family: sans-serif;
      font-size: 3vw;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
   }  
   .description {
      user-select: none;
      display: flex;
      user-select: none;
      position: fixed;
      top: 50vh;
      left: 50vw;
      transform: translate(-50%, -50%);
      color: white;
      font-family: sans-serif;
      font-size: 3.5vmin;
      text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
      display: none;
      z-index:10;
   }  
   .img {
      width: 60vw;
      border-radius: 50%;
      display: flex;
      user-select: none;
      position: fixed;
      top: calc(50% - 30vw);
      left: calc(50% - 30vw);
   	translate3d(0,0,0);
   	transition: all 0.5s ease-out;
   	z-index: -20;
   }
   .divspace {
      height: 2000vh;
   }
   .tree1 {
      width: 40vh;
      display: flex;
      user-select: none;
      position: fixed;
      left: 0%;
      bottom: 0;
      display: none;
      z-index:0;
      filter: invert(6%) sepia(75%) saturate(6366%) hue-rotate(39deg) brightness(35%) contrast(106%);
   	transition: all 0.5s ease-out;
   }
   .tree2 {
      width: 40vh;
      display: flex;
      user-select: none;
      position: fixed;
      left: 0;
      bottom: 0;
      display: none;
      z-index:1;
      filter: invert(6%) sepia(75%) saturate(6366%) hue-rotate(39deg) brightness(40%) contrast(106%);
   	transition: all 0.5s ease-out;
   }
   .tree3 {
      width: 40vh;
      display: flex;
      user-select: none;
      position: fixed;
      right: 10%;
      bottom: 0;
      display: none;
      z-index:0;
      filter: invert(6%) sepia(75%) saturate(6366%) hue-rotate(39deg) brightness(35%) contrast(106%);
   	transition: all 0.5s ease-out;
   }
   .tree4 {
      width: 40vh;
      display: flex;
      user-select: none;
      position: fixed;
      right: 0;
      bottom: 0;
      display: none;
      z-index:1;
      filter: invert(6%) sepia(75%) saturate(6366%) hue-rotate(39deg) brightness(40%) contrast(106%);
   	transition: all 0.5s ease-out;
   }
   .tree6 {
      width: 40vh;
      display: flex;
      user-select: none;
      position: fixed;
      right: -25px;
      bottom: 0;
      display: none;
      z-index:2;
      filter: invert(14%) sepia(85%) saturate(2530%) hue-rotate(111deg) brightness(30%) contrast(103%);
   	transition: all 0.5s ease-out;
   }
   .tree6r {
      width: 40vh;
      display: flex;
      user-select: none;
      position: fixed;
      left: -25px;
      bottom: 0;
      display: none;
      z-index:2;
      filter: invert(14%) sepia(85%) saturate(2530%) hue-rotate(111deg) brightness(30%) contrast(103%);
   	transition: all 0.5s ease-out;
   }
   .treec1 {
      width: 40vh;
      display: flex;
      user-select: none;
      position: fixed;
      left: 25%;
      bottom: 0;
      display: none;
      z-index:0;
      filter: invert(14%) sepia(85%) saturate(2530%) hue-rotate(111deg) brightness(30%) contrast(103%);
   	transition: all 0.5s ease-out;
   }
   .treec2 {
      width: 40vh;
      display: flex;
      user-select: none;
      position: fixed;
      right: 25%;
      bottom: 0;
      display: none;
      z-index:0;
      filter: invert(14%) sepia(85%) saturate(2530%) hue-rotate(111deg) brightness(30%) contrast(103%);
   	transition: all 0.5s ease-out;
   }
   .mountains {
      width: 100%;
      display: flex;
      user-select: none;
      position: fixed;
      left: 0;
      bottom: -10%;
      display: none;
      z-index:-10;
      filter: blur(3px);
   	transition: all 0.5s ease-out;
   }
   .clouds {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .5;
      top: 6%;
      left: 0%;
      display: none;
      z-index:-20;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft 45s linear infinite;
   }
   .clouds2 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .5;
      top: 6%;
      left: 0%;
      display: none;
      z-index:-20;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft2 45s linear infinite;
   }
   .clouds3 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .3;
      top: 20%;
      left: 0%;
      display: none;
      z-index:-30;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft 60s linear infinite;
   }
   .clouds4 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .3;
      top: 20%;
      left: 0%;
      display: none;
      z-index:-30;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft2 60s linear infinite;
   }
   .clouds5 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .2;
      top: 35%;
      left: 0%;
      display: none;
      z-index:-20;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft 75s linear infinite;
   }
   .clouds6 {
      width: 100%;
      user-select: none;
      position: fixed;
      opacity: .2;
      top: 35%;
      left: 0%;
      display: none;
      z-index:-20;
      filter: invert(9%) sepia(44%) saturate(5175%) hue-rotate(236deg) brightness(80%) contrast(124%);
   	animation: moveleft2 75s linear infinite;
   }
   @keyframes moveleft {
      from {transform:translateX(0);}
      to   {transform:translateX(100%);}
   }
   @keyframes moveleft2 {
      from {transform:translateX(-100%);}
      to   {transform:translateX(0);}
   }
}
.linkyRed{
   color: white;
   text-decoration: none;
   user-select: none;
   text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
   cursor: pointer;
}
.linkyRed:hover {
   animation: flickerAnimation .5s infinite;
}
::-webkit-scrollbar {
      display: none;
}
@keyframes flickerAnimation{
   0%   { color: #5555FF; }
   9%   { color: #FF5555; }
   18%  { color: #FF55FF; }
   27%  { color: #55FF55; }
   36%  { color: #55FFFF; }
   45%  { color: #FFFF55; }
   54%  { color: #FFFF55; }
   63%  { color: #55FFFF; }
   72%  { color: #55FF55; }
   81%  { color: #FF55FF; }
   90%  { color: #FF5555; }
   100% { color: #5555FF; }
}
.animate-flicker {
   animation: flickerAnimation .5s infinite;
}