@font-face {font-family:RochestonSkolar; src:url(fonts/RochestonSkolar-Rg.ttf);}
@font-face {font-family:RochestonSkolar-Italic; src:url(fonts/RochestonSkolar-It.ttf);}
@font-face {font-family:RochestonSkolar-Bold; src:url(fonts/RochestonSkolar-Bd.ttf);}
@font-face {font-family:Rocheston Skolar; src:url('fonts/RochestonSkolar-Rg.ttf');}
@font-face {font-family:Rocheston Skolar; src:url('fonts/RochestonSkolar-It.ttf');}
@font-face {font-family:Rocheston Skolar; src:url('fonts/RochestonSkolar-Bd.ttf');}
@font-face {
 font-family: 'Rocheston Skolar';
 src: url('fonts/RochestonSkolarWeb-Rg.eot');
 src: url('fonts/RochestonSkolarWeb-Rg.eot?#iefix') format('embedded-opentype'),
url('fonts/RochestonSkolarWeb-Rg.woff2') format('woff2'),
      url('fonts/RochestonSkolarWeb-Rg.woff') format('woff'),
      url('fonts/RochestonSkolar-Rg.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'Rocheston Skolar';
 src: url('fonts/RochestonSkolarWeb-It.eot');
 src: url('fonts/RochestonSkolarWeb-It.eot?#iefix') format('embedded-opentype'),
url('fonts/RochestonSkolarWeb-It.woff2') format('woff2'),
      url('fonts/RochestonSkolarWeb-It.woff') format('woff'),
      url('fonts/RochestonSkolar-It.ttf') format('truetype');
 font-weight: italic;
 font-style: italic;
}
@font-face {
 font-family: 'Rocheston Skolar';
 src: url('fonts/RochestonSkolarWeb-Bd.eot');
 src: url('fonts/RochestonSkolarWeb-Bd.eot?#iefix') format('embedded-opentype'),
url('fonts/RochestonSkolarWeb-Bd.woff2') format('woff2'),
      url('fonts/RochestonSkolarWeb-Bd.woff') format('woff'),
      url('fonts/RochestonSkolar-Bd.ttf') format('truetype');
 font-weight: bold;
 font-style: bold;
}

html,
body {
	margin: 0;
	padding: 0;
	background: #0e120f;
	color: white;
	font-family: sans-serif;
}



#myearth {
	width: 100%;
	height: 100vh;
	max-height: 100vw;
	overflow: hidden;
	filter: brightness(0);
	transform: scale(0.8);
	transition: filter 3s ease, transform 1.25s ease;
}
#myearth.earth-ready {
	filter: brightness(1.5);
	transform: none;
}

#myearth::before {
	content: none;
}


#glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 100vh;
	height: 100vh;
	max-height: 100vw;
	transform: translate(-50%, -50%);
	
	background: radial-gradient(ellipse at center, rgba(0,156,255,0) 33%,rgba(0,156,255,0.12) 50.5%,rgba(0,156,255,0.05) 51.75%,rgba(0,156,255,0) 70%);
	z-index: 200;
	pointer-events: none;
}


#res {
	width: 0;
	height: 0;
	overflow: hidden;
}



.pulse-overlay {
	width: 7%;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	transform-origin: center center;
	background: radial-gradient(ellipse at center, rgba(50,187,255,0.6) 0%, rgba(50,187,255,0.2) 25%, rgba(50,187,255,0) 70%);
}
.pulse-overlay::before {
	content: '';
	display: block;
	padding-top: 100%;
}

.pulse-now {
	opacity: 1;
}
.earth-occluded.pulse-now {
	opacity: 0.5;
}

.pulse1 {
  background: rgba(243, 13, 77);
  border-radius: 50%;
  height: 6px;
  width: 6px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0px 0px 0px 0px;
  transform: rotateX(55deg);

}
  .pulse1::after{
    content: "";
    border-radius: 50%;
    height: 30px;
    width: 30px;
    position: absolute;
    margin: -13px 0 0 -13px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0 0 1px 2px #d72175;
    /*-webkit-animation-delay: 0.5s;*/
  }
    
.pulse2 {
  background: rgba(17, 145, 27, 1);
  /*border-radius: 50%;*/
  height: 6px;
  width: 6px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0px 0px 0px 0px;
  transform: rotateX(55deg);

}
  .pulse2::after{
    content: "";
    /*border-radius: 50%;*/
    height: 20px;
    width: 20px;
    position: absolute;
    margin: -7px 0 0 -10px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0 0 1px 2px #1eac28;
    /*-webkit-animation-delay: 0.5s;*/
  }
    
@-webkit-keyframes pulsate{
  0%{
    transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50%{
       opacity: 1.0;   
  }

  100%{
     transform: scale(1.2, 1.2);
    opacity: 0 ;
  }
    
    }
    #info{
        position: absolute;
        top: 0;
        margin-left: 32%;
        /*z-index: 1;*/
    }
    #logo{
        position:absolute;
top:0;
left: 0;
width: 200px;
height: auto;
    }

 #logo img {
    
    height: auto;
	padding-top:20px;
	margin-left: -20px;

}
/*    .header-logo {
    display: inline-block;
    width: 200px;
    max-width: none;
    height: auto;
}*/
/*@media (min-width: 60em){
  .header-logo {
    width: 140px;
}   
}*/
.loctime{
    color: #fff;
font-size: 30px;
font-family: "rockb","Gotham SSm B",Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 300;
position: fixed;
right: 20px;
top: 30px;
text-align: right;
text-transform: uppercase;
z-index: 2;
border-top: 3px solid #12ace0;

padding-top: 10px;

}
.attacks-counts {
    text-align: right;
    text-transform: uppercase;
    position: relative;
}

#dstattackip {
  font-family: monospace;
  font-size:10px;
  position:absolute;
  left: 0;
  bottom: 0;
  width:35%;
  height:150px;
  color:white;
 // background-color:black;
  padding:5px;
  bottom:0;
 overflow-y: auto;
 text-align:left;
}
.dst{
    /*color: black;*/
   font-size: 10px;
   text-transform: uppercase;
}
   ::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #0d1633; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

@media only screen and (max-width: 650px) {
	#logo {
              position:absolute;
		width: 100px;
		height: auto; /* define height of image */
	}
        .loctime{
    position:absolute;
    top: 0;
    right: 0;
    color: #fbb03b;
    font-size: 20px;

    text-decoration:underline;

}
}