*{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


@font-face {
  font-family: 'nafees_web_naskhshipped';
  src: url('../font/nafees_web_naskhshipped.woff') format('woff'),
}
body{
	font-family: "nafees_web_naskhshipped";
}
ul{
	margin: 0;
  padding: 0;
  list-style: none;
}
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}
canvas{
  background-color: #0b1761;
}
.top{
	position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.layer, .layer a{
	font-size: 60px;
}
li, a{
	color: #fff;
}
@media only screen and (min-width: 1000px){
  /*-----O---------------------*/
li.layer:nth-child(1){
  position: absolute;
  top: 3%;
  left: -0.5%;
}
/*-----O---------------------*/
li.layer:nth-child(2){
  position: absolute;
  top: 8.5%;
  right: -0.5%;
}
/*-----O---------------------*/
li.layer:nth-child(3){
  position: absolute;
  bottom: 5%;
  right: -0.5%;
}
/*-----O---------------------*/
li.layer:nth-child(4){
  position: absolute;
  bottom: 2%;
  left: 0.5%;
}
/*-----O---------------------*/
li.layer:nth-child(5){
  position: absolute;
  left: 43%;
  top: 0%;
}
/*-----O---------------------*/
li.layer:nth-child(6){
  position: absolute;
  left: 41%;
  top: 26%;
  line-height: 0.7;
  font-size: 130px !important;
}
/*-----O---------------------*/
li.layer:nth-child(7){
  position: absolute;
  left: 40%;
  bottom: 0%;
}
}

@media only screen and (max-width: 999px){
  /*-----O---------------------*/
li.layer:nth-child(1){
  position: absolute;
  top: 1%;
  left: 1%;
}
/*-----O---------------------*/
li.layer:nth-child(2){
  position: absolute;
  top: 1%;
  right: 1%;
}
/*-----O---------------------*/
li.layer:nth-child(3){
  position: absolute;
  bottom: 1%;
  right: 1%;
}
/*-----O---------------------*/
li.layer:nth-child(4){
  position: absolute;
  bottom: 1%;
  left: 1%;
}
/*-----O---------------------*/
li.layer:nth-child(5){
  position: absolute;
  left: 48%;
  top: 0%;
}
/*-----O---------------------*/
li.layer:nth-child(6){
  position: absolute;
  left: 41%;
  top: 26%;
  line-height: 0.7;
  font-size: 130px !important;
}
/*-----O---------------------*/
li.layer:nth-child(7){
  position: absolute;
  left: 43%;
  bottom: 0%;
}
}

@media only screen and (max-width: 600px){
  /*-----O---------------------*/
li.layer:nth-child(1){
  position: absolute;
  top: 1%;
  left: 1%;
}
/*-----O---------------------*/
li.layer:nth-child(2){
  position: absolute;
  top: 1%;
  right: 1%;
}
/*-----O---------------------*/
li.layer:nth-child(3){
  position: absolute;
  bottom: 1%;
  right: 1%;
}
/*-----O---------------------*/
li.layer:nth-child(4){
  position: absolute;
  bottom: 1%;
  left: 1%;
}
/*-----O---------------------*/
li.layer:nth-child(5){
  position: absolute;
  left: 40%;
  top: 0%;
}
/*-----O---------------------*/
li.layer:nth-child(6){
  position: absolute;
  left: 35%;
  top: 26%;
  line-height: 0.7;
  font-size: 130px !important;
}
/*-----O---------------------*/
li.layer:nth-child(7){
  position: absolute;
  left: 38%;
  bottom: 0%;
}
}

/*Makes the coin shiny*/
.main {
  position: absolute;
  width: 100px;
  height: 100%;
  top:0; 

  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.glow {
  position: relative;
  top: 55%;
  
  opacity: 0.5;
  -webkit-box-shadow: 0px 0px 300px 100px #ffffff;
  -moz-box-shadow: 0px 0px 300px 100px #ffffff;
  box-shadow: 0px 0px 300px 100px #ffffff;
}

.glow{
  animation: glow 6s infinite;
}

@keyframes glow {
  0% {
    display: none;
    opacity: 0.5;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-moz-keyframes glow {
  0% {
    display: none;
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-ms-keyframes glow {
  0% {
    display: none;
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes  glow {
  0% {
    display: none;
    opacity: 0.5;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}