.svgArea {
    width: 100%;
    height: 72vh;
    /* margin-top: 70px; */
}

.text-play-now {
    font-family: 'Cinzel Decorative', cursive;
    font-weight: 400;
    font-size: 1.8rem;
}

.logo-name-text {
    font-family: 'Cinzel Decorative', cursive;
    font-weight: 700;
    font-size: 5rem;
    letter-spacing: 77px;
    color: #00f;
    text-shadow: 0 0 10px #fff;
}

.text-cin {
    font-family: 'Cinzel Decorative', cursive;
    font-weight: 700;
    text-shadow: 1px 1px 3px #000;
    font-size: 1.2rem;
}

.text-cin1 {
    font-family: 'Cinzel Decorative', cursive;
    font-weight: 400;
    font-size: 1.1rem;
}

.text-cin-no {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    font-size: 6rem;
}

.text-cin-rect {
    font-family: 'Cinzel Decorative', cursive;
    font-weight: 700;
    font-size: 1rem;
}

.yy-circle {
    transform: rotate(90deg) translate(0, -192px);
    -webkit-transform: rotate(90deg) translate(0, -192px);
}

.ss-circle {
    transform: rotate(45deg) translate(42px, -101px);
    -webkit-transform: rotate(45deg) translate(42px, -101px);
}

.wm-circle {
    transform: rotate(90deg) translate(4px, -198px);
    -webkit-transform: rotate(90deg) translate(4px, -198px);
}

.gt-level {
    transform: rotate(170deg) translate(-177px, -210px);
    -webkit-transform: rotate(170deg) translate(-177px, -210px);
}

.zr-level {
    transform: rotate(178deg) translate(-194px, -198px);
    -webkit-transform: rotate(178deg) translate(-194px, -198px);

}

.cc-circle {
    transform: rotate(180deg) translate(-195px, -194px);
    -webkit-transform: rotate(180deg) translate(-195px, -194px);
}

.dt-circle {
    transform: rotate(180deg) translate(-195px, -192px);
    -webkit-transform: rotate(180deg) translate(-195px, -192px);
}

.el-circle {
    transform: rotate(180deg) translate(-189px, -193px);
    -webkit-transform: rotate(180deg) translate(-189px, -193px);
}

.dr-level {
    /* letter-spacing: .2rem; */
    transform: rotate(180deg) translate(-188px, -192px);
    -webkit-transform: rotate(180deg) translate(-188px, -192px);
}

.pr-circle-text {
    font-family: 'Times New Roman', Times, serif;
    font-size: .8rem;
}

@font-face {
    font-family: myFirstFont;
    src: url(ParchmentMF.ttf);
}

.myFont {
    font-family: myFirstFont;
    font-size: 2.1rem;
}

.myFont1 {
    font-family: myFirstFont;
    font-size: 1.8rem;
}

.myFont2 {
    font-family: myFirstFont;
    font-size: 1.9rem;
}

#ripple-circle {
    fill: #be5a334f;
    opacity: 0.3;
}

svg>circle#ripple-circle:last-child {
    fill: #ff973554;
    opacity: 1;
}

#rp1 {
    fill: #ffe36541;
    animation: ripple1 2s linear infinite;
}

@keyframes ripple1 {
    0% {
        transform: scale(5.5);
        opacity: 0.3;
    }

    100% {
        transform: scale(8.5);
        opacity: 0.0;
    }
}

#rp2 {
    fill: #ffc16559;
    animation: ripple2 0.7s linear infinite;
}

@keyframes ripple2 {
    0% {
        transform: scale(3.5);
    }

    100% {
        transform: scale(5.5);
    }
}

#rp3 {
    fill: #ffce6527;
    animation: ripple3 0.7s linear infinite;
}

@keyframes ripple3 {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(3.5);
    }
}

#rp4 {
    fill: #ffce6594;
    animation: ripple4 0.7s linear infinite;
}

@keyframes ripple4 {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1.7);
    }
}

@media(max-width: 1024px) {
    .svgArea {
        /*height: 40vh;*/
    }
}

@media(min-width: 2160px) {
    .svgArea {
        /*height: 18vh;*/
    }
}