/* =============================================================================
   My CSS

   ========================================================================== */
@font-face {
  font-family: "Old";
  src: url("OLD.ttf");
}

#Layer1 {
  position: absolute;
  width: 200px;
  height: 115px;
  z-index: 19;
  top: 40;
  right: 35;
}

partial @font-face {
  font-family: "Old";
  src: url("OLD.ttf");
}

body,
td,
th {
  color: #ffffff;
  position: absolute;
  font-size: 25px;
}

.style5 {
	color: #00ffff;
	font-size: 24px;
	font-family: "Old English Text MT";
	position: absolute;
	top: 17px;
	left: 71px;
	bottom: -9px;
}

.logoh {
  font-family: "Old English Text MT";
  font-size: 180px;
  top: 8px;
  position: absolute;
}

.logohs {
  color: #00ffff;
  left: 10px;
}

.logot {
  color: #ffff00;
}

#Layer1 {
  position: absolute;
  width: 163px;
  height: 74px;
  z-index: 0;
  left: -1px;
  top: -2px;
}

#Layer2 {
  position: relative;
  width: 22%;
  height: 114px;
  z-index: 1;
  left: 275px;
  top: 31%;
}

#Layer22 {
  position: relative;
  width: 229px;
  height: 114px;
  z-index: 1;
  top: 0px;
  right: 0px;
  font: 30px;
  left: 230px;
}

a:link {
  color: #ffffff;
  text-decoration: none;
}

a:visited {
  color: #ffffff;
  text-decoration: none;
}

a:hover {
  color: #00ffff;
  text-decoration: none;
}

a:active {
  color: #ffff00;
  text-decoration: none;
}

#Layer3 {
  position: absolute;
  z-index: 2;
  font-size: 877px;
  left: -60px;
}

#Layer4 {
  position: absolute;
  width: 200px;
  height: 307px;
  z-index: 2;
  left: 583px;
  top: 359px;
}

#Layer5 {
  position: absolute;
  width: 1018px;
  height: 115px;
  z-index: 1;
  left: 214px;
  top: 147px;
}

#Layer6 {
  position: absolute;
  width: 640px;
  height: 245px;
  z-index: 1;
  left: -15px;
  top: 320px;
}

#logoh {
  position: absolute;
  width: 200px;
  height: 115px;
  z-index: 2;
  left: 53px;
  top: 553px;
}

#loghs {
  position: absolute;
  width: 908px;
  height: 391px;
  z-index: 2;
  left: 528px;
  top: 25px;
}

#logot {
  position: absolute;
  width: 289px;
  height: 184px;
  z-index: 2;
  left: 548px;
  top: 98px;
}

#Layer10 {
  position: absolute;
  width: 450px;
  height: 150px;
  z-index: 333;
  top: 480px;
  left: -20px;
}

#Layer11 {
  position: absolute;
  width: 300px;
  height: 155px;
  left: 0;
  top: 500px;
  z-index: 4;
}

#Layer12 {
  position: absolute;
  z-index: 334;
  margin-right: 5px;
  left: 825px;
  top: 16px;
}

#Layer13 {
  position: absolute;
  width: 982px;
  height: 210px;
  z-index: -335;
  left: 231px;
  top: 873px;
}

#Layer14 {
  position: absolute;
  width: 200px;
  height: 115px;
  z-index: 335;
  left: 201px;
  top: 2px;
}

#Layer15 {
  position: absolute;
  width: 200px;
  height: 115px;
  z-index: 336;
  top: 206px;
}

.style16 {
  color: #ffffff;
}

.style8 {
  color: #00ffff;
  left: 10px;
}
body {
  background-color: #000;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0 deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.filla {
  transform: translatey(0px);
  animation: float 7s ease-in-out infinite;

  position: absolute;
  top: calc(5% 30px);
  left: calc(5% 30px);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,
    0 0 50px #ffff, 10px 0 80px #f0f, 10px 0 80px #0ff;
}
.fillow {
  position: absolute;
  top: calc(1% 30px);
  left: calc(1% 30px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px rgb(2, 255, 255),
    inset 20px 0 80px rgb(1, 207, 243), inset -20px 0 80px rgb(102, 228, 0),
    inset 20px 0 300px rgb(255, 51, 0), inset -20px 0 300px rgb(4, 0, 255),
    0 0 50px rgb(255, 255, 255), -10px 0 80px #3ff,
    -10px 0 80px rgb(229, 0, 250);
}
.fillon {
  position: absolute;
  top: calc(5% 30px);
  left: calc(2% 30px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px rgb(219, 255, 18),
    inset 20px 0 80px rgb(251, 255, 0), inset -20px 0 80px rgb(158, 255, 1),
    inset 20px 0 300px rgba(253, 249, 3, 0.952),
    inset -20px 0 300px rgb(218, 255, 6), 0 0 50px rgb(124, 255, 2),
    -10px 0 80px rgb(75, 255, 180), -10px 0 80px rgb(229, 255, 0);
}



.fillor {
  
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px rgb(219, 255, 18),
    inset 20px 0 80px rgb(251, 255, 0), inset -20px 0 80px rgb(158, 255, 1),
    inset 20px 0 300px rgba(253, 249, 3, 0.952),
    inset -20px 0 300px rgb(218, 255, 6), 0 0 50px rgb(124, 255, 2),
    -10px 0 80px rgb(75, 255, 180), -10px 0 80px rgb(229, 255, 0);
    
    transform: translate(-50%,-100%) translateY(-140px);
    
}

.fillbin {
 position: absolute;
  top: calc(1% 30px);
  left: calc(1% 30px);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px rgb(2, 255, 255),
    inset 20px 0 80px rgb(1, 207, 243), inset -20px 0 80px rgb(102, 228, 0),
    inset 20px 0 300px rgb(255, 51, 0), inset -20px 0 300px rgb(4, 0, 255),
    0 0 50px rgb(255, 255, 255), -10px 0 80px #3ff,
    -10px 0 80px rgb(229, 0, 250);
	
	  transform: translate(-50%,-100%) translateY(-140px);
	
}




.fillsec {
  transform: translatey(0px);
  position: absolute;
  top: calc(5% 30px);
  left: calc(5% 30px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,
    0 0 50px #ffff, 10px 0 80px #f0f, 10px 0 80px #0ff;
		  transform: translate(-50%,-100%) translateY(-140px);
}



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


/* remove canvas default margin */
canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
  width: 50%;
  height: 100%;
  z-index:5;
}

h1 {
  font-size: 4rem;
  position: absolute;
  top: 50%;
  left: 57px;
  color: #fff;
  font-family: old;
  font-weight: 200;
  text-shadow: 2px 2px #00ffff;
  text-transform: lowercase;
  bottom: -21px;
}

body {
  margin-left: 0px;
  margin-top: 0px;
}

#Layer16 {
  position: absolute;
  width: 450px;
  height: 450px;
  z-index: 99993;
  left: 24px;
  top: 23px;
}

#Layer5 {
  position: absolute;
  width: 200px;
  height: 115px;
  z-index: 3;
}
#Layer16 {
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 0;
  left: 24px;
  top: 23px;
}
body,
td,
th {
  color: #ffffff;
}

#Layer5 {
  position: absolute;
  width: 200px;
  height: 115px;
  z-index: 3;
}
#Layer16 {
  position: absolute;
  width: 350px;
  height: 350px;
  z-index: 99993;
  left: 50px;
  top: 30px;
}
body,
td,
th {
  color: #00ffff;
}
#Layer17 {
  position: absolute;
  width: 200px;
  height: 115px;
  left: 45px;
  top: 10px;
  z-index: 99994;
}
#Layer18 {
  position: absolute;
  width: 200px;
  height: 115px;
  left: 45px;
  top: 240px;
  z-index: 1;
}
#Layer19 {
  position: absolute;
  width: 200px;
  height: 115px;
  left: 15px;
  top: 00px;
  z-index: 1;
}
#Layer20 {
  position: absolute;
  width: 247px;
  height: 68px;
  z-index: 1;
  left: 45px;
  top: 620px;
}
#utclocal {
  font-size: 14px;
}