@import url('https://webfontworld.github.io/sebang/SebangGothic.css');

#header .logo a{filter:brightness(1) invert(0);}

.rounded-wrap{position: relative;margin: 0 auto;}
.rounded-wrap>img{width: 250px;left: 50%;top: 50%;transform:translate(-50%,-50%);position: absolute;z-index: -1;}

.rounded-text {
  width: 25.625rem;
  height: 25.625rem;
  text-transform: uppercase;
  transform: rotateX(-103deg) rotateZ(-103deg);
  color: #fff;
  font-weight: 400;
  font-family: 'SebangGothic';
  transform-style: preserve-3d;
  margin:auto;
}
svg:first-child {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
  left: 0;
  z-index: 9;
  right: 0;
}
svg:nth-child(2) {
  -moz-transform: scale(-1, 1);
  /* -webkit-transform: scale(-1, 1); */
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  left: 0;
  transform: translate3d(1px, 1px, 1px);
}

svg {
  position: absolute;
  background: transparent;
}
@keyframes rotating {
  0% {
    transform: rotateY(0deg) rotateZ(360deg) scale3d(1, 1, 1);
  }
  50% {
    transform: rotateY(180deg) rotateZ(180deg) scale3d(1.2, 1.2, 1.2); /* Scale up for emphasis */
  }
  100% {
    transform: rotateY(360deg) rotateZ(0deg) scale3d(1, 1, 1);
  }
}

.rotating {
  animation: rotating 20s linear infinite;
}

@keyframes coloring {
  0%,
  100% {
    fill: var(--main-color);
  }
  35% {
    fill: var(--main-color);
  }
  75% {
    fill: var(--main-color);
  }
}

.coloring {
  animation: coloring 12s linear infinite;
}

@media screen and (max-width:520px){
  .rounded-wrap{margin:50px auto;}
  .rounded-text{    width: 20.625rem;
    height: 20.625rem;}
    .rounded-wrap>img{width: 230px;}

}