body {
  padding: 0;
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.main {
  padding: 0;
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: #343d52;
  position: relative;
}

.logobox {
  position: relative;
  z-index: 11;
  max-width: 70%;
  background: linear-gradient( -60deg, #47cf73, #ffdd40, #ae63e4, #0ebeff, #47cf73, #ffdd40, #ae63e4, #0ebeff, #47cf73, #ffdd40, #ae63e4, #0ebeff );
  transform-style: preserve-3d;
  padding: 50px 30px;
  cursor: pointer;
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
}

svg#thanga {
  max-width: 100%;
  width: 500px;
  display: block;
  transform: translateZ(80px);
  filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.2));
  /* opacity: 0; */
}

svg#thanga polygon {
  fill: #fff;
}

.background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.pentahedron {
  position: absolute;
  width: 100%;
  height: 100%;
  fill: #3e82f7;
}

.point {
  fill: #8491a3;
}

.rhombus {
  fill: #2da94f;
  stroke: #2da94f;
}

.x {
  fill: #fdbd00;
}

.circle {
  fill: #ed412d;
}

.background svg {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  transform: translateZ(0px);
}

/*start*/
.logobox .star {
  background: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 600 600' style='enable-background:new 0 0 600 600;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF3900;%7D .st1%7Bfill:%2373CDE7;%7D .st2%7Bfill:%23F8C11E;%7D .st3%7Bfill:%230447BC;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='183.3' cy='334.9' r='19.8'/%3E%3Ccircle class='st0' cx='196.3' cy='492.5' r='14.7'/%3E%3Ccircle class='st0' cx='454.6' cy='525.2' r='30.7'/%3E%3Ccircle class='st0' cx='498.5' cy='231.1' r='9.7'/%3E%3Ccircle class='st0' cx='370' cy='183.4' r='29.1'/%3E%3Ccircle class='st0' cx='340.6' cy='28.7' r='15'/%3E%3Ccircle class='st1' cx='88.5' cy='63' r='16'/%3E%3Ccircle class='st1' cx='516.6' cy='320.6' r='15.1'/%3E%3Ccircle class='st2' cx='85.9' cy='284.3' r='13.4'/%3E%3Ccircle class='st2' cx='573.8' cy='84.4' r='23.4'/%3E%3Ccircle class='st3' cx='377.1' cy='32.2' r='27.3'/%3E%3Ccircle class='st3' cx='256.7' cy='146.5' r='36'/%3E%3Ccircle class='st3' cx='545.8' cy='88.4' r='13.4'/%3E%3Ccircle class='st3' cx='496.7' cy='341.3' r='16.2'/%3E%3Ccircle class='st3' cx='532.4' cy='545.1' r='13.6'/%3E%3Ccircle class='st3' cx='369' cy='406.8' r='15.6'/%3E%3Ccircle class='st3' cx='63.1' cy='298.3' r='15.1'/%3E%3Ccircle class='st3' cx='109.4' cy='427.1' r='15.7'/%3E%3Ccircle class='st2' cx='382.9' cy='160' r='15'/%3E%3Ccircle class='st2' cx='214.4' cy='43' r='26.7'/%3E%3Ccircle class='st2' cx='64.6' cy='48.8' r='15.4'/%3E%3Ccircle class='st2' cx='135.5' cy='197.1' r='16.2'/%3E%3Ccircle class='st2' cx='157.7' cy='336.5' r='15'/%3E%3Ccircle class='st2' cx='432.1' cy='296.1' r='16.5'/%3E%3Ccircle class='st2' cx='565.3' cy='426.6' r='9.2'/%3E%3Ccircle class='st1' cx='460.5' cy='27' r='12.2'/%3E%3Ccircle class='st1' cx='483.7' cy='220.5' r='14.7'/%3E%3Ccircle class='st1' cx='319.1' cy='305.4' r='24.7'/%3E%3Ccircle class='st1' cx='225.6' cy='514.1' r='31.6'/%3E%3Ccircle class='st1' cx='23.2' cy='581.6' r='12.2'/%3E%3Ccircle class='st1' cx='419.7' cy='538.4' r='15.9'/%3E%3Ccircle class='st0' cx='18.3' cy='144.1' r='15.4'/%3E%3Ccircle class='st0' cx='575.2' cy='410.4' r='9.9'/%3E%3Ccircle class='st0' cx='61.6' cy='560.4' r='33.1'/%3E%3C/svg%3E") repeat;
  background-size: 200px auto;
  animation: background 10s infinite linear;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.logobox .svg {
  width: 500px;
  height: 200px;
  -webkit-mask-image: url(thanga-03.svg);
  mask-image: url(thanga-03.svg);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  background: #fff;
  transform: translateZ(80px);
  filter: drop-shadow(0 px 5 px 3 px rgba(0, 0, 0, 0.2));
}

@keyframes background {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 -200px;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.links {
  /* transform: translateZ(80px); */
  text-align: center;
  position: absolute;
  right: 0;
  bottom: -30px;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  transform-style: preserve-3d;
  padding: 50px 0 0;
}

.links a {
  display: inline-block;
  margin: 0 10px;
  transition: all 0.3s linear;
  opacity:0;
  transform:translateY(-20px);
}
.links a:nth-child(2){
  transition-delay: 0.1s;
}
.links a:nth-child(3){
  transition-delay: 0.2s;
}

.loaded .logobox .links a{
  opacity:1;
  transform:translateY(0);
}

.links img {
  width: 50px;
  height: 50px;
  display: inline-block;
  box-shadow: 0 5px 10px #00000029;
  border-radius: 50%;
}

.links a:hover {
}

.links a span{
  position:absolute;
  bottom:0;
  color:#fff;
  font-weight:bold;
  left: 0;
  right: 0;
  bottom: -30px;
  text-transform: uppercase;
  text-shadow: 0 2px 1px #000;
  opacity: 0;
  transition: all 0.3s linear;
  pointer-events:none;
  font-size:16px;
  width: 100px;
  margin-left: -50px;
  left: 50%;
  transform:translateY(-10px);
}
.links a:hover span{
  opacity:1;
  transform:translateY(0);
}

@media(){
  
}