@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);

body {
    margin:0px;
    background: url(img/star.gif);
  }


.container {
    width: 1024px;
    height: 576px;
    margin: 0 auto;
    position: relative;
    margin-top: 0px;
    border: oldlace;
    border-style: solid;
    border-width: 0px;
  }

  #box {
    /*background-color: #fff;*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    z-index: 1;
  }

  /* from url: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
  .centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
  }

  .radial-gradient {
      background: radial-gradient(white 0%, transparent 100%);
  }

 .Buddha {
     text-align: center;
 }

  #earth {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 460px;
    left: 477px;
  }

  #lotus {
      width: 220px;
      height: 122px;
      position: absolute;
      top: 324px;
      left: 402px;
  }

  #lotus_front {
      width: 220px;
      height: 122px;
      position: absolute;
      top: 324px;
      left: 402px;
  }

  #sunburst {
      /* width: 500px; */
      position: absolute;
      top: 60px;
      left: 262px;
  }

 #star {
      position: absolute;
      /* width: 100px;*/
      top: 266px;
      left: 480px;
  }

  #om {
      position: absolute;
      top: 136px;
      left: 462px;
  }

  #vajrasatta {
      width: 180px;
      position: absolute;
      top: 170px;
      left: 422px;
  }

  #pventer {
    text-align: center;
  }

  #venter {
    /*font-family: 'cwtexkai', Arial;*/
    font-family: Arial;
    font-weight: bold;
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    text-shadow: 2px 2px 3px #666;

  }

  #venter:hover {
      color: gold;
  }

  #BWhite {
      position: absolute;
      width: 96px;
      left: 464px;
      top: 13px;
  }

  #BRed {
      position: absolute;
      width: 96px;
      left: 345px;
      top:34px;
  }

  #BYellow {
      position: absolute;
      width: 96px;
      left: 226px;
      top: 55px;
  }

  #BBlue {
      position: absolute;
      width: 96px;
      left: 583px;
      top:34px;
  }

  #BGreen {
      position: absolute;
      width: 96px;
      left: 702px;
      top: 55px;
  }

#LProtector {
    position: absolute;
    left: 357px;
    top: 430px;
}

#RProtector {
    position: absolute;
    left: 597px;
    top: 430px;
}

.circle {
    display: block;
    border-radius: 50%;
    /*height: 86px;
    width: 86px;*/
    margin: 0;
    position: absolute;
}

.Stars {
    position: absolute;
    height: 100px;
    width: 100px;
}

.BBStar {
    position: absolute;
    height: 16px;
    width: 16px;
    /* filter: invert(100%); */
}


#YStar {
    left:225px;
    top:18px;
}

#BYStar {
    left:267px;
    top:60px;
}

#YBall {
    left:239px;
    top:76px;
    height: 70px;
    width: 70px;
    background: radial-gradient(circle at 35px 35px,rgba(246, 205, 27, 0.8),rgba(246, 205, 27, 0.4),transparent,transparent);
}



#RStar {
    left:343px;
    top:-5px;
}

#BRStar {
    left:385px;
    top:38px;
    /* visibility: hidden;     */
}

#RBall {
    left:358px;
    top:56px;
    height: 70px;
    width: 70px;
    background: radial-gradient(circle at 35px 35px,rgba(231, 77, 56, 0.8),rgba(231, 77, 56, 0.4),transparent,transparent);
}



#WStar {
    left:461px;
    top:-25px;
}

#BWStar {
    left:503px;
    top:17px;
}

#WBall {
    left:477px;
    top:35px;
    height: 70px;
    width: 70px;
    background: radial-gradient(circle at 35px 35px,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.4),transparent,transparent);
}

#BStar {
    left:580px;
    top:-4px;
}

#BBStar {
    left:622px;
    top:38px;
}

#BBall {
    left:596px;
    top:56px;
    height: 70px;
    width: 70px;
    background: radial-gradient(circle at 35px 35px,rgba(59, 79, 138, 0.8),rgba(59, 79, 138, 0.4),transparent,transparent);
}

#GStar {
    left:700px;
    top:16px;
}

#BGStar {
    left:741.5px;
    top:59px;
}

#GBall {
    left:715px;
    top:76px;
    height: 70px;
    width: 70px;
    background: radial-gradient(circle at 35px 35px,rgba(84, 158, 63, 0.8),rgba(84, 158, 63, 0.4),transparent,transparent);
}


#WhiteBallL {
    left: 118px;
    top: 449px;
    height: 88px;
    width: 88px;
    background: radial-gradient(circle at 43px 43px,rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.6),transparent,transparent);
    visibility: hidden;
}

#BallToWheel {
    left: 118px;
    top: 449px;
    height: 88px;
    width: 88px;
    background: radial-gradient(circle at 43px 43px,rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.6),transparent,transparent);
    visibility: hidden;
}

#WhiteBallR {
    left: 827px;
    top: 450px;
    height: 88px;
    width: 88px;
    background: radial-gradient(circle at 43px 43px,rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.6),transparent,transparent);
    visibility: hidden;
}

#BallToDorje {
    left: 827px;
    top: 450px;
    height: 88px;
    width: 88px;
    background: radial-gradient(circle at 43px 43px,rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.6),transparent,transparent);
    visibility: hidden;
}

#ProtectorBallL {
    left: 339px;
    top: 434px;
    height: 110px;
    width: 110px;
    background: radial-gradient(circle at 55px 55px,rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.4),transparent,transparent);
}

#ProtectorBallR {
    left: 578px;
    top: 434px;
    height: 110px;
    width: 110px;
    background: radial-gradient(circle at 55px 55px,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.4),transparent,transparent);
}

#DhramaWheel {
    position: absolute;
    left:128px;
    top:460px;
    height: 66px;
    width: 66px;
    visibility: hidden;
}

#DoubleDorje {
    position: absolute;
    left:838px;
    top:460px;
    height: 66px;
    width: 66px;
    visibility: hidden;
}

svg {
    overflow: visible;
    /*height: 100%;*/
    /*height: 100%;*/
    /* Fix Safari rendering bug */
    transform: translateZ(0);
    fill-opacity:0;
  }

path {
stroke-width: 0;
stroke: goldenrod;
}

#rightText {
    position: absolute;
    left: 942px;
    top: 88px;
    visibility: hidden;
}

#leftText {
    position: absolute;
    left: 52px;
    top: 88px;
    visibility: hidden;
}

.vText {
    writing-mode: vertical-lr;
    color: gold;
    font-size: 30pt;
    font-family: 'cwtexkai', Arial;
}