:root {
    --body-background: rgba(0, 0, 0, 0.7);
    --main-text-color: rgba(110, 12, 12, 1);
    --eye-background-radial: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(110, 12, 12, 1) 39%, rgba(75, 8, 8, 1) 60%, rgba(0, 0, 0, 1) 100%);
    --eye-border-color: rgba(0, 0, 0, 1);
}

* {
    font-family: 'Roboto', sans-serif;
}

html, body{
    height: 100%;
}

body { 
    background-image: url(konoha.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-blend-mode: color-burn;

    margin: 0;
    background-color: var(--body-background);
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    mix-blend-mode: lighten;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    display: none;
}

.owner-info {
    padding-top: 40px;
}

.owner-info > .text {
    text-align: left;
    font-size: 15px;
}

.container {
    width: 100%;
    text-align: center;
}

.line-container {
    padding: 100px;
}

.line-container > .text {
    text-align: left;
}

.line-container > .line {
    height: 5px;
    border-radius: 50%;
    background-color: black;
    box-shadow: 0 0 10px 5px rgba(110, 12, 12, 1);
}

.line > .text {
    position: relative;
    top: -50px;
    text-align: left;
}

.text {
    padding: 10px;
    color: var(--main-text-color);
    text-shadow: 0 0 10px rgba(110, 12, 12, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(110, 12, 12, 1);
    text-align: center;
    font-size: 20px;
    bottom: 100px;
    text-transform: uppercase;
    letter-spacing: .5em;
}

.normal-sharingan,
.mangekyou-sharingan,
.eternal-mangekyou-sharingan,
.rinnegan,
.rinnegan-tomoe,
.rinnesharingan,
.kokugan,
.byakugan,
.jougan,
.tenseigan,
.senrigan,
.daemon-dojutsu,
.ketsuryugan,
.shukkaku,
.yome-dojutsu,
.ranmaru-dojutsu,
.shion-dojutsu,
.kirara-dojutsu,
.naruto-sagemode {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-flow: row wrap;
}

.eye-container {
    padding: 20px;
}

.circle {
    border-radius: 50%;
}

.eye {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px solid var(--eye-border-color);
    transition: 0.3s;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eye::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: black;
}

.eye > .inner-eye {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid black;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eye:hover {
    z-index: 1;
    box-shadow: 0 0 100px rgb(201, 13, 13);
    animation: scale .3s ease-in-out, sharingan-glow .5s ease-in-out;
    animation-direction: alternate;
    transform: scale(1.1);
    opacity: 1;
    mix-blend-mode: lighten;
}

.eye:hover .inner-eye {
    animation: rotation 2.5s ease-in-out .8s;
}

.eye-and-reflection-container {
    height: 300px;
    transition: all 0.3s ease-in-out;
}

.eye-and-reflection-container:hover {
    height: 400px;
    padding: 40px;
    -webkit-box-reflect: below -365px -webkit-gradient(linear, right top, right bottom, from(transparent), to(rgba(255, 255, 255, 0.5)));
}

.eye:active {
    box-shadow: none;
    animation: none;
    transform: scale(1);
    opacity: 1
}

.tag-container {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
}

.tag {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-bottom: 120px;
    background-color: black;
}

.tag::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    border: 10px solid black;
    border-radius: 50%;
    border-top: none;
    border-right: none;
    border-bottom: none;
    left: 3px;
    top: -5px;
    margin-bottom: 120px;
    background-color: transparent;
}

.glare {
    z-index: 100;
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0.4;
    left: 20px;
    top: 20px;
    background: rgb(255, 255, 255);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5046393557422969) 45%, rgba(0, 0, 0, 0) 100%);
}

.glare::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    opacity: 0.5;
    left: 65px;
    top: 60px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5046393557422969) 45%, rgba(0, 0, 0, 0) 100%);
}

.glare::before {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    opacity: 0.3;
    left: 100px;
    top: 100px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    background: linear-gradient(225deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5046393557422969) 45%, rgba(0, 0, 0, 0) 100%);
}

@keyframes sharingan-glow {
    0% {
        box-shadow: 0 0 0 rgb(201, 13, 13);
    }

    100% {
        box-shadow: 0 0 100px rgb(201, 13, 13);
    }
}

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

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

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

@keyframes reverse-rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(1440deg);
    }
}

/* INACTIVE EYE START */
.inactive-eye {
    background-color: black;
}
/* INACTIVE EYE END */

/* SHARINGAN EYE START */
.sharingan-eye,
.ms-eye,
.ems-eye,
.rinnesharingan-eye {
    background: var(--eye-background-radial);
}
/* SHARINGAN EYE END */

/*  LEVEL2 EYE START */
.level2 > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(180deg);
}
/*  LEVEL2 EYE END */

/*  LEVEL3 EYE START */
.level3 > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(120deg);
}

.level3 > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(240deg);
}
/*  LEVEL3 EYE END */

/* NANASHI EYES START */
.nanashi-eye > .inner-eye {
    width: 100% !important;
    height: 100% !important;
}

.nanashi-eye > .inner-eye > .tag-container > .tag {
    width: 82%;
    height: 82%;
    top: 5px;
    margin: auto;
}

.nanashi-eye > .inner-eye > .tag-container > .tag::after {
    border: none;
    border-radius: 50%;
    width: 150%;
    height: 150%;
    margin: auto;
    left: -40px;
    top: -30px;
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(110, 12, 12, 1) 20%, rgba(75, 8, 8, 1) 60%, rgba(0, 0, 0, 1) 100%);
}

.nanashi-svg {
    width: 132px;
    position: absolute;
    top: 36px;
    left: 0;
    height: 145px;
    transform: rotate(172deg);
}

.nanashi-path {
    fill: rgba(0, 0, 0, 1);
    stroke-width: 0.124225;
}

.nanashi-eye > .inner-eye > .semicircle {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-40deg);
}

.nanashi-eye > .inner-eye > .semicircle:nth-child(3) {
    transform: rotate(80deg);
}

.nanashi-eye > .inner-eye > .semicircle:nth-child(4) {
    transform: rotate(200deg);
}
/* NANASHI EYES END */

/* BARU EYES START */
.baru-eye {
    background: black;
}

.baru-eye > .inner-eye {
    width: 100% !important;
    height: 100% !important;
}

.baru-eye > .inner-eye > .tag-container > .tag {
    width: 82%;
    height: 82%;
    top: 5px;
    margin: auto;
    -webkit-clip-path: polygon(0% 87%, 50% 0%, 100% 87%);
    clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
}

.baru-eye > .inner-eye > .tag-container > .tag::after {
    border: none;
    border-radius: 50%;
    width: 150%;
    height: 150%;
    margin: auto;
    left: -40px;
    top: -30px;
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(110, 12, 12, 1) 20%, rgba(75, 8, 8, 1) 60%, rgba(0, 0, 0, 1) 100%);
}

.baru-svg {
    width: 110px;
    position: absolute;
    top: 23px;
    left: -2px;
    transform: rotate(-60deg);
}

.baru-path {
    fill: rgba(101, 15, 15, 1);
}

.semicircle {
    position: absolute;
    width: 100%;
    height: 100%;
}

.semicircle:nth-child(3) {
    transform: rotate(120deg);
}

.semicircle:nth-child(4) {
    transform: rotate(240deg);
}
/* BARU EYES END */

/* FUGAKU EYES START */
.fugaku-eye > .inner-eye {
    width: 80px;
    height: 80px;
}

.fugaku-eye > .inner-eye > .tag {
    position: absolute;
    width: 200%;
    height: 200%;
    background-color: transparent;
    margin: auto;
}

.fugaku-eye > .inner-eye > .tag:nth-child(2) {
    transform: rotate(120deg);
}

.fugaku-eye > .inner-eye > .tag:nth-child(3) {
    transform: rotate(240deg);
}

.fugaku-eye > .inner-eye > .tag::after {
    display: none;
}

.fugaku-eye > .inner-eye > .tag > div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -53%;
    left: -54%;
    transform: rotate(45deg);
    background-color: transparent;
    overflow: hidden;
}

.fugaku-eye > .inner-eye > .tag > div::before {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    background-color: black;
    top: 60%;
    left: 85%;
    border-radius: 50%;
}

.fugaku-eye > .inner-eye > .tag > div::after {
    position: absolute;
    content: '';
    width: 140px;
    height: 170px;
    border-radius: 50%;
    border: 30px solid black;
    background-color: transparent;
    border-bottom: none;
    border-right: 50px solid transparent;
    border-left: none;
    top: 65px;
    left: 80px;
    transform: rotate(35deg);
}
/* FUGAKU EYES END */

/* HAGOROMO EYES START */
.hagoromo-eye {
    background: radial-gradient(circle, rgba(117, 87, 143, 1) 0%, rgba(122, 83, 156, 1) 20%, rgba(242, 221, 255, 1) 100%);
}

.hagoromo-eye:hover {
    box-shadow: 0 0 100px rgba(122, 83, 156, 1);
    animation: hagoromo-glow .5s ease-in-out;
}

.hagoromo-eye::after {
    width: 20px;
    height: 20px;
}

.hagoromo-text {
    color: rgba(117, 87, 143, 1);
    text-shadow: 0 0 10px rgba(117, 87, 143, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(117, 87, 143, 1);
}

.hagoromo-eye > .inner-eye {
    border: none;
}

.hagoromo-eye > .inner-eye > div {
    position: absolute;
    border: 3px solid black;
    border-radius: 50%;
}

.hagoromo-eye > .inner-eye > div:nth-child(1) {
    width: 60px;
    height: 60px;
}

.hagoromo-eye > .inner-eye > div:nth-child(2) {
    width: 110px;
    height: 110px;
}

.hagoromo-eye > .inner-eye > div:nth-child(3) {
    width: 160px;
    height: 160px;
}

@keyframes hagoromo-glow {
    0% {
        box-shadow: 0 0 0 rgba(122, 83, 156, 1);
    }

    100% {
        box-shadow: 0 0 100px rgba(122, 83, 156, 1);
    }
}
/* HAGOROMO EYES END */

/* INDRA EYES START */
.indra-eye {
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(110, 12, 12, 1) 15%, rgba(75, 8, 8, 1) 60%, rgba(0, 0, 0, 1) 100%);
}

.indra-eye::after {
    width: 20px;
    height: 20px;
}

.indra-eye > .inner-eye {
    border: none;
    width: 100%;
    height: 100%;
}

.indra-eye > .inner-eye > .tag-container {
    transform: rotate(-170deg);
}

.indra-path {
    stroke: black;
    stroke-width: 2px;
    fill: none;
}
/* INDRA EYES END */

/* ITACHI EYE START */
.itachi-eye {
    overflow: hidden;
    background: radial-gradient(circle, rgba(110, 12, 12, 1) 0%, rgba(110, 12, 12, 1) 39%, rgba(75, 8, 8, 1) 60%, rgba(0, 0, 0, 1) 100%);
}

.itachi-eye::after {
    box-shadow: 0 0 20px rgb(143, 19, 19);
    background: rgb(143, 19, 19);
}

.itachi-eye > .inner-eye {
    border: none;
    background: transparent;
    width: 80px;
    height: 80px;
}

.itachi-eye > .inner-eye > .tag-container > .tag {
    top: -60px;
    background-color: transparent;
    width: 200px;
    height: 110px;
    border-radius: 0;
    overflow: hidden;
    transform-origin: 100px 100px;
}

.itachi-eye > .inner-eye > .tag-container > .tag::after {
    border-left: 50px solid black;
    top: 1px;
    left: 82px;
    width: 300px;
    height: 160px;
}

.itachi-eye > .inner-eye > .tag-container:nth-child(1) {
    transform: rotate(-30deg);
}

.itachi-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(90deg);
}

.itachi-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(210deg);
}
/* ITACHI EYE END */

/* IZUNA EYES START */
.izuna-eye {
    overflow: hidden;
}

.izuna-eye::after {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 20px rgb(143, 19, 19);
    ;
    background-color: rgb(143, 19, 19);
}

.izuna-eye > .inner-eye {
    border: none;
    background-color: black;
}

.izuna-eye > .inner-eye > .tag-container > .tag {
    border: none;
    border-radius: 0;
    width: 50px;
    height: 100px;
    background-color: black;
    transform-origin: bottom;
    top: -40px;
}

.izuna-eye > .inner-eye > .tag-container > .tag::after {
    display: none;
}

.izuna-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(120deg);
}

.izuna-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(240deg);
}
/* IZUNA EYES END */

/* OBITO EYES START */
.obito-eye {
    background: radial-gradient(circle, rgba(110, 12, 12, 1) 0%, rgba(110, 12, 12, 1) 39%, rgba(75, 8, 8, 1) 60%, rgba(0, 0, 0, 1) 100%);
}

.obito-eye::after {
    z-index: 1000000;
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgb(143, 19, 19);
    background-color: rgb(143, 19, 19);
    background-clip: content-box;
}

.obito-eye > .inner-eye {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.obito-eye > .inner-eye > .tag-container {
    position: absolute;
    width: 200px;
    height: 100%;
}

.obito-eye > .inner-eye > .tag-container > .tag {
    position: absolute;
    margin-bottom: 0;
    height: 200px;
    width: 200px;
    top: -40px;
    position: absolute;
    margin-bottom: 0;
    height: 100px;
    width: 200px;
    border-radius: 0;
    clip-path: ellipse(25px 140px at 100px 140px);
}

.obito-eye > .inner-eye > .tag-container > .tag::after {
    display: none;
}

.obito-eye > .inner-eye > .tag-container > .tag:nth-child(2) {
    width: 100px;
    height: 100px;
    right: 0;
    background-color: black;
    clip-path: none;
    overflow: hidden;
    background-color: transparent !important;
}

.obito-eye > .inner-eye > .tag-container > .tag:nth-child(2) > .tag-circle {
    top: -11px;
    position: relative;
    left: -140px;
    width: 200px;
    height: 170px;
    border-radius: 50%;
    border: 40px solid black;
    border-bottom: none;
    border-right: none;
    border-left: none;
    background-color: transparent;
    margin: 0;
}

.obito-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(120deg);
}

.obito-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(240deg);
}
/* OBITO EYES END */

/* MADARA EYEY START */
.madara-eye > .inner-eye {
    border: 10px solid black;
    width: 130px;
    height: 130px;
}

.madara-eye > .inner-eye > .tag-container > .tag {
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.madara-eye > .inner-eye > .tag-container > .tag::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-radius: 50%;
    border: 10px solid black;
    top: -5px;
    left: -5px;
    background-color: rgb(143, 19, 19);
}

.madara-eye > .inner-eye > .tag-container > .tag > .tag-line {
    position: absolute;
    width: 60px;
    height: 50px;
    top: -20px;
    left: 10px;
    transform: rotate(-45deg);
    background-color: transparent;
    overflow: hidden;
}

.madara-eye > .inner-eye > .tag-container > .tag > .tag-line::after {
    position: absolute;
    content: '';
    width: 100px;
    height: 230px;
    border-radius: 50%;
    border: 30px solid black;
    background-color: transparent;
    border-right: none;
    border-bottom: none;
    border-left: 20px solid transparent;
    transform: rotate(-21deg);
    left: -18px;
    top: -8px;
}

.madara-eye > .inner-eye > .tag-container:nth-child(1) {
    transform: rotate(45deg);
}

.madara-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(165deg);
}

.madara-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(285deg);
}

/* MADARA ETERNAL MANGEKYO SHARINGAN */
.m-ems > .inner-eye > .tag-container > .tag::before {
    position: absolute;
    content: '';
    width: 100px;
    height: 40px;
    top: 130px;
    left: 100px;
    transform: rotate(45deg);
    background-color: black;
}
/* MADARA EYEY END */

/* MOMOSHIKI EYE START */
.red {
    background: radial-gradient(circle, rgba(172, 39, 39, 1) 0%, rgba(140, 36, 36, 1) 20%, rgba(223, 163, 163, 1) 100%);
}

.yellow {
    background: radial-gradient(circle, rgba(255, 224, 11, 1) 0%, rgba(190, 177, 74, 1) 20%, rgba(223, 222, 163, 1) 100%);
}

.red:hover {
    box-shadow: 0 0 100px rgba(172, 39, 39, 1);
    animation: momoshiki-glow-red .5s ease-in-out;
}

.yellow:hover {
    box-shadow: 0 0 100px rgba(255, 224, 11, 1);
    animation: momoshiki-glow-yellow .5s ease-in-out;
}

.momoshiki-red-text {
    color: rgba(172, 39, 39, 1);
    text-shadow: 0 0 10px rgba(172, 39, 39, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(172, 39, 39, 1);
}

.momoshiki-yellow-text {
    color: rgba(255, 224, 11, 1);
    text-shadow: 0 0 10px rgba(255, 224, 11, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(255, 224, 11, 1);
}

.momoshiki-eye::after {
    width: 20px;
    height: 20px;
}

.momoshiki-eye > .inner-eye {
    border: none;
}

.momoshiki-eye > .inner-eye > div {
    position: absolute;
    border: 3px solid black;
    border-radius: 50%;
}

.momoshiki-eye > .inner-eye > div:nth-child(1) {
    width: 60px;
    height: 60px;
}

.momoshiki-eye > .inner-eye > div:nth-child(2) {
    width: 110px;
    height: 110px;
}

.momoshiki-eye > .inner-eye > div:nth-child(3) {
    width: 160px;
    height: 160px;
}

@keyframes momoshiki-glow-yellow {
    0% {
        box-shadow: 0 0 0 rgba(255, 224, 11, 1);
    }

    100% {
        box-shadow: 0 0 100px rgba(255, 224, 11, 1);
    }
}

@keyframes momoshiki-glow-red {
    0% {
        box-shadow: 0 0 0 rgba(172, 39, 39, 1);
    }

    100% {
        box-shadow: 0 0 100px rgba(172, 39, 39, 1);
    }
}
/* MOMOSHIKI EYE END */

/* URASHIKI EYE START */
.blue {
    background: radial-gradient(circle, rgb(48, 39, 172) 0%, rgb(46, 36, 140) 20%, rgb(167, 163, 223) 100%);
}

.blue:hover {
    box-shadow: 0 0 100px rgb(48, 39, 172);
    animation: urashiki-glow-blue .5s ease-in-out;
}

.urashiki-blue-text {
    color: rgb(59, 39, 172);
    text-shadow: 0 0 10px rgb(48, 39, 172), 0 0 10px black, 0 0 10px black, 0 0 10px rgb(41, 39, 172);
}

.urashiki-eye::after {
    width: 20px;
    height: 20px;
}

.urashiki-eye > .inner-eye {
    border: none;
}

.urashiki-eye > .inner-eye > div {
    position: absolute;
    border: 3px solid black;
    border-radius: 50%;
}

.urashiki-eye > .inner-eye > div:nth-child(1) {
    width: 60px;
    height: 60px;
}

.urashiki-eye > .inner-eye > div:nth-child(2) {
    width: 110px;
    height: 110px;
}

.urashiki-eye > .inner-eye > div:nth-child(3) {
    width: 160px;
    height: 160px;
}

@keyframes urashiki-glow-blue {
    0% {
        box-shadow: 0 0 0 rgb(48, 39, 172);
    }

    100% {
        box-shadow: 0 0 100px rgb(48, 39, 172);
    }
}
/* URASHIKI EYE END */

/* NAKA EYES START */
.naka-eye {
    background: black;
}

.naka-eye::after {
    width: 30px;
    height: 30px;
}

.naka-eye > .inner-eye {
    width: 100%;
    height: 100%;
    border: none;
}

.naka-eye > .inner-eye::after {
    position: absolute;
    content: '';
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(110, 12, 12, 1) 39%, rgba(75, 8, 8, 1) 60%);
}

.naka-eye > .inner-eye > .tag-container > .tag {
    position: absolute;
    width: 50%;
    left: 0;
    height: 100%;
    margin: auto;
    overflow: hidden;
    background-color: transparent;
    transform-origin: center right;
}

.naka-eye > .inner-eye > .tag-container > .tag::after {
    display: none;
}

.naka-eye > .inner-eye > .tag-container > .tag > .circle {
    width: 80px;
    height: 80px;
    background-color: transparent;
    border-bottom: none;
    border-left: 80px solid rgba(75, 8, 8, 1);
    border-right: 80px solid transparent;
    border-top: none;
    left: -25px;
    top: -30px;
    position: absolute;
    transform: rotate(-75deg);
}

.naka-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(120deg);
}

.naka-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(240deg);
}
/* NAKA EYES END */

/* NAORI EYES START */
.naori-eye {
    background: black;
}

.naori-eye > .inner-eye {
    border: none;
}

.naori-eye > .inner-eye > .tag {
    width: 100%;
    height: 100%;
    top: 0;
    background-color: transparent;
}

.naori-eye > .inner-eye > .tag::after {
    display: none;
}

.naori-eye > .inner-eye > .tag > div {
    position: absolute;
    width: 210%;
    height: 210%;
    top: -175px;
    left: 9px;
    background-color: transparent;
    transform: rotate(30deg);
    border: 2px solid black;
    clip-path: polygon(57% 0, 100% 0, 43% 100%, 0% 100%);
}

.naori-eye > .inner-eye > .tag > div::after {
    position: absolute;
    content: '';
    width: 140px;
    height: 140px;
    border-radius: 50%;
    top: 160px;
    left: 25px;
    background: radial-gradient(circle, rgba(0, 0, 0, 1) -170%, rgba(110, 12, 12, 1) 39%, rgba(75, 8, 8, 1) 71%, rgba(0, 0, 0, 1) 100%);
}

.naori-eye > .inner-eye > .tag:nth-child(2) {
    transform: rotate(120deg);
}

.naori-eye > .inner-eye > .tag:nth-child(3) {
    transform: rotate(240deg);
}
/* NAORI EYES END */

/* RAI EYES START */
.rai-eye > .inner-eye {
    width: 90px;
    height: 90px;
}

.rai-eye > .inner-eye > .tag {
    width: 100%;
    height: 100%;
    top: 0;
    margin: auto;
    background-color: transparent;
}

.rai-eye > .inner-eye > .tag::before {
    position: absolute;
    content: '';
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 40px solid black;
    border-bottom: none;
    border-top: none;
    border-right: none;
    top: -10px;
    left: -40px;
    transform: rotate(145deg);
}

.rai-eye > .inner-eye > .tag::after {
    width: 250px;
    height: 200px;
    margin: auto;
    border-radius: 50%;
    border: 3px solid black;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
    top: -50px;
    left: 15px;
    transform: rotate(65deg);
}

.rai-eye > .inner-eye > .tag:nth-child(2) {
    transform: rotate(120deg);
}

.rai-eye > .inner-eye > .tag:nth-child(3) {
    transform: rotate(240deg);
}
/* RAI EYES END */

/* SASUKE EYES START */
.sasuke-eye {
    background: black;
}

.sasuke-eye > .inner-eye {
    border: none;
    width: 100%;
    height: 100%;
}

.sasuke-eye > .inner-eye > .tag-container > .tag {
    width: 140px;
    height: 140px;
    margin: auto;
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(110, 12, 12, 1) 39%, rgba(75, 8, 8, 1) 60%, rgb(51, 32, 32) 100%);
    border-radius: 0% 100% 0% 100%;
}

.sasuke-eye > .inner-eye > .tag-container:nth-child(3) > .tag {
    border: 3px solid black;
}

.sasuke-eye > .inner-eye > .tag-container > .tag::after {
    display: none;
}

.sasuke-eye > .inner-eye > .tag-container:nth-child(1) {
    transform: rotate(45deg);
}

.sasuke-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(165deg);
}

.sasuke-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(285deg);
}

.sasuke-eye > .inner-eye > .tag-container:nth-child(3) > .tag::before,
.sasuke-eye > .inner-eye > .tag-container:nth-child(3) > .tag::after {
    position: absolute;
    content: '';
    display: block;
    border: inherit;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: inherit;
    margin: auto;
    left: -4px;
    top: -4px;
}

.sasuke-eye > .inner-eye > .tag-container:nth-child(3) > .tag::before {
    transform: rotate(120deg);
}

.sasuke-eye > .inner-eye > .tag-container:nth-child(3) > .tag::after {
    transform: rotate(240deg);
}

/* SASUKE ETERNAL MANGEKYO SHARINGAN */
.s-ems::after {
    width: 30px;
    height: 30px;
    background-color: rgba(110, 12, 12, 1);
}

.s-ems > .inner-eye > .ems-tags > div {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 50px;
    overflow: hidden;
}

.s-ems > .inner-eye > .ems-tags > div::after {
    position: absolute;
    content: '';
    width: 35%;
    height: 200%;
    background-color: black;
    top: 30px;
    left: 33px;
    border-radius: 50%;
    border: none;
}

.s-ems > .inner-eye > .ems-tags > div:nth-child(2) {
    transform-origin: bottom center;
    transform: rotate(120deg);
}

.s-ems > .inner-eye > .ems-tags > div:nth-child(3) {
    transform-origin: bottom center;
    transform: rotate(240deg);
}

/*  SASUKE RINNEGAN */
.s-rgn:hover .tag-circle {
    animation: reverse-rotation 2.5s ease-in-out .8s reverse;
}


.s-rgn > .inner-eye > div > .tag-container {
    width: 100%;
    height: 100%;
    position: absolute;
}

.s-rgn > .inner-eye > div:nth-child(1) > .tag-container > .tag {
    top: -10px;
    left: 20px;
}

.s-rgn > .inner-eye > div:nth-child(2) {
    transform: rotate(180deg);
}

.s-rgn > .inner-eye > div:nth-child(2) > .tag-container > .tag {
    top: -10px;
    left: 45px;
}

.s-rgn > .inner-eye > div > .tag-container:nth-child(2) {
    transform: rotate(120deg);
}

.s-rgn > .inner-eye > div > .tag-container:nth-child(3) {
    transform: rotate(240deg);
}
/* SASUKE EYES END */

/* SHADOW EYES START */
.shadow {
    -webkit-box-reflect: below -365px -webkit-gradient(linear, right top, right bottom, from(transparent), to(rgba(255, 255, 255, 0.4)));
}
/* SHADOW EYES END */

/* SHIN EYES START */
.shin-eye::after {
    width: 100px;
    height: 100px;
}

.shin-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: 3px solid rgba(0, 0, 0, .4);
}

.shin-eye > .inner-eye > .tag-container {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
}

.shin-eye > .inner-eye > .tag-container > .triangle {
    width: 0;
    height: 0;
    margin: auto;
    top: -50px;
    left: 55px;
    position: absolute;
    background-color: transparent;
    border: 50px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid transparent;
}

.shin-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(120deg);
}

.shin-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(240deg);
}
/* SHIN EYES END */

/* SHISUI EYES START */
.eye:hover .sui {
    animation: shisuiRotation 2.5s ease-in-out .8s;
}

.shisui-eye > .inner-eye {
    width: 0;
    height: 0;
    background-color: black;
    transform: rotate(-45deg);
}

.shisui-eye::after {
    border: 12px solid rgba(110, 12, 12, 1);
}

.shisui-eye > .inner-eye > .tag-container > .tag {
    width: 150px;
    height: 150px;
    top: -100px;
    background-color: transparent;
    left: -50px;
    overflow: hidden;
    transform-origin: 50px 100px;
}

.shisui-eye > .inner-eye > .tag-container > .tag > div {
    position: absolute;
    width: 375px;
    height: 96px;
    top: 72px;
    transform: rotate(-20deg);
    transform-origin: 200px 0px;
    left: -260px;
    border-radius: 50%;
    background-color: transparent;
    border-top: 40px solid black;
    border-bottom: none;
    border-left: 20px solid transparent;
    border-right: none;
}

.shisui-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(90deg);
}

.shisui-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(180deg);
}

.shisui-eye > .inner-eye > .tag-container:nth-child(4) {
    transform: rotate(270deg);
}

.shisui-eye > .inner-eye > .tag-container > .tag::after {
    display: none;
}

@keyframes shisuiRotation {
    0% {
        transform: rotate(-45deg);
    }

    100% {
        transform: rotate(675deg);
    }
}
/* SHISUI EYES END */

/* SARADA EYES START */
.sarada-eye::after {
    width: 40px;
    height: 40x;
}

.sarada-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
}

.sarada-eye > .inner-eye::after {
    position: absolute;
    content: '';
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3.5px solid transparent;
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(110, 12, 12, 0) 39%, rgba(75, 8, 8, 1) 60%);
}

.sarada-eye > .inner-eye > .tag-container {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
}

.sarada-eye > .inner-eye > .tag-container > .triangle {
    width: 0;
    height: 0;
    margin: auto;
    top: -50px;
    left: 55px;
    position: absolute;
    background-color: transparent;
    border: 45px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid transparent;
}

.sarada-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(135deg);
}

.sarada-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(225deg);
}

.sarada-eye > .inner-eye > .tag-container:nth-child(4) {
    transform: rotate(315deg);
}

.sarada-eye > .inner-eye > .tag-container:nth-child(5) {
    transform: rotate(405deg);
}

.sarada-eye > .inner-eye > .tag-container:nth-child(6) {
    transform: rotate(900deg);
}

.sarada-eye > .inner-eye > .tag-container:nth-child(7) {
    transform: rotate(90deg);
}

.sarada-eye > .inner-eye > .tag-container:nth-child(8) {
    transform: rotate(270deg);
}

/* SARADA ETERNAL MANGEKYO SHARINGAN */
.sd-ems::after {
    width: 30px;
    height: 30px;
    background-color: rgba(110, 12, 12, 1);
}

.sd-ems > .inner-eye {
    width: 150px;
    height: 150px;
    border: 3px dotted rgba(0, 0, 0, .4);
}

.sd-ems > .inner-eye::after {
    position: absolute;
    content: '';
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 12px solid rgba(110, 12, 12, 1);
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 39%, rgba(75, 8, 8, 1) 60%);
}

.sd-ems > .inner-eye > .tag-container > .triangle {
    width: 0;
    height: 0;
    margin: auto;
    top: -50px;
    left: 55px;
    position: absolute;
    background-color: transparent;
    border: 35px solid black;
    border-left: 30px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid transparent;
}
/* SARADA EYES END */

/* ISSHIKI EYES START */
.koku-eye {
    background: radial-gradient(circle, #f4f768 0%, #a17c1f 60%);
}

.koku-eye:hover {
    box-shadow: 0 0 100px #a17c1f;
    animation: koku-glow .5s ease-in-out;
}

.isshiki-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.isshiki-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.isshiki-eye > .inner-eye::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, #f4f6f7 0%, #edcd4d 65%);
    filter: blur(10px);
    box-shadow: 0 0 42px 6px #e86821;
}

.isshiki-eye > .inner-eye > .tag-container {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
}

.isshiki-eye > .inner-eye > .tag-container > .triangle {
    content: '';
    position: absolute;
    height: 303px;
    width: 25px;
    background-color: #181616;

    margin: auto;
}

.isshiki-eye > .inner-eye > .tag-container:nth-child(2) {
    transform: rotate(45.5deg);
}

.isshiki-eye > .inner-eye > .tag-container:nth-child(3) {
    transform: rotate(-45.25deg);
}

.isshiki-eye > .inner-eye > .tag-container:nth-child(4) {
    transform: rotate(90deg);
}

@keyframes koku-glow {
    0% {
        box-shadow: 0 0 0 #a17c1f;
    }

    100% {
        box-shadow: 0 0 100px #a17c1f;
    }
}
/* ISSHIKI EYES END */

/* KAWAKI EYES START (wip) */
.koku-cyborg-eye {
    background: radial-gradient(circle, #1a1a19 0%, #121212 60%);
}

.koku-cyborg-eye:hover {
    box-shadow: 0 0 100px #231a02;
    animation: koku-cyborg-glow .5s ease-in-out;
}

.kawaki-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.kawaki-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.kawaki-eye > .inner-eye::after {
    content: '';
    position: absolute;
    top: 23%;
    left: 23%;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid #fb4e0f;
    background: radial-gradient(circle, hsl(54, 100%, 50%) 40%, hsl(12, 94%, 31%) 65%);
    filter: blur(10px);
    box-shadow: 0 0 42px 6px #33302e;
}

.kawaki-eye > .inner-eye > .tag-container {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
}

.kawaki-eye > .inner-eye > .tag-container > .triangle {
    content: '';
    position: absolute;
    z-index: 5;
    --bg-color: #a17c1f;

    width: 0;
    height: 0;
    margin: auto;
    top: 50px;
    left: 55px;

    background-color: transparent;
    border: 100px solid var(--bg-color);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid transparent;
}

.kawaki-eye > .inner-eye > .tag-container:nth-child(1) {
    z-index: 5;
    transform: rotate(55.7deg);
}

.kawaki-eye > .inner-eye > .tag-container:nth-child(2) {
    z-index: 5;
    transform: rotate(-95.5deg);
}

.kawaki-eye > .inner-eye > .tag-container:nth-child(3) {
    z-index: 5;
    transform: rotate(120.36deg);
}

.kawaki-eye > .inner-eye > .tag-container:nth-child(4) {
    z-index: 5;
    transform: rotate(-130deg);
}

.kawaki-eye > .inner-eye > .tag-container:nth-child(1) > .triangle {
    border-right-width: 32.5px;
    border-bottom-width: 100px;
    transform: translateY(3%);
}

.kawaki-eye > .inner-eye > .tag-container:nth-child(2) > .triangle {
    border-right-width: 20px;
    border-bottom-width: 100px;
    transform: translateY(6%);
}

.kawaki-eye > .inner-eye > .tag-container:nth-child(3) > .triangle {
    border-right-width: 30px;
    border-bottom-width: 100px;
    transform: translateY(-3%);
}

.kawaki-eye > .inner-eye > .tag-container:nth-child(4) > .triangle {
    border-right-width: 35px;
}

@keyframes koku-cyborg-glow {
    0% {
        box-shadow: 0 0 0 #231a02;
    }

    100% {
        box-shadow: 0 0 100px #231a02;
    }
}
/* KAWAKI EYES END */

/* BYAKUGAN EYES START */
.hyuga-eye {
    background: radial-gradient(circle, #fafaff 0%, #e2dffb 60%);
}

.hyuga-eye:hover {
    box-shadow: 0 0 100px #e2dffb;
    animation: hyuga-glow .5s ease-in-out;
}

.hyuga-byakugan-text {
    color: #e2dffb;
    text-shadow: 0 0 10px #e2dffb, 0 0 10px black, 0 0 10px black, 0 0 10px #e2dffb;
}

.byakugan-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.byakugan-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.byakugan-eye > .inner-eye::after {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    z-index: 1;
    border-radius: 50%;
    background-color: transparent;
    border-top: 2px solid #1a1a1a;
    transform: rotate(30deg);
}

.byakugan-eye > .inner-eye > .tag-container {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    z-index: 1;
    border-radius: 50%;
    background-color: transparent;
    border-left: 2px solid #1a1a1a;
    transform: rotate(-50deg);
}

.byakugan-eye > .inner-eye > .tag-container > div {
    --size: calc(200px * .5);
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='black' stroke-width='12' stroke-dasharray='2%2c 20%2c 2%2c 50' stroke-dashoffset='18' stroke-linecap='butt'/%3e%3c/svg%3e");
}

/* MOMOSHIKI GOLD BYAKUGAN EYES */
.momoshiki-gold-eye {
    background: radial-gradient(circle, rgba(255, 224, 11, 1) 0%, rgba(190, 177, 74, 1) 60%, rgba(223, 222, 163, 1) 100%);
}

.momoshiki-gold-eye:hover {
    box-shadow: 0 0 100px rgba(190, 177, 74, 1);
    animation: momoshiki-gold-glow .5s ease-in-out;
}

.momoshiki-gold-byakugan-text {
    color: rgba(190, 177, 74, 1);
    text-shadow: 0 0 10px rgba(190, 177, 74, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(190, 177, 74, 1);
}

@keyframes hyuga-glow {
    0% {
        box-shadow: 0 0 0 #e2dffb;
    }

    100% {
        box-shadow: 0 0 100px #e2dffb;
    }
}

@keyframes momoshiki-gold-glow {
    0% {
        box-shadow: 0 0 0 rgba(190, 177, 74, 1);
    }

    100% {
        box-shadow: 0 0 100px rgba(190, 177, 74, 1);
    }
}
/* BYAKUGAN EYES END */

/* HIMAWARI BYAKUGAN (WIP) */
.himawari-eye {
    background: radial-gradient(circle, rgb(121, 161, 172) 0%, rgb(186, 152, 220) 100%);
}

.himawari-eye:hover {
    box-shadow: 0 0 100px rgb(186, 152, 220);
    animation: himawari-glow .5s ease-in-out;
}

.himawari-byakugan-text {
    color: rgba(186, 152, 220, 1);
    text-shadow: 0 0 10px rgba(186, 152, 220, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(186, 152, 220, 1);
}

.hima-byakugan > .inner-eye::before {
    --pupil: calc(250px * .6);
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--pupil);
    height: var(--pupil);
    border-radius: 50%;
    /*   border: 4px solid #111; */
    box-shadow:
        inset 0 0 6px 3px #df9fef,
        0 0 12px 8px #baa3ca;
    background: #e3d6f7;
    filter: blur(10px);
    transform: translate(-50%, -50%);
}

.hima-byakugan > .inner-eye::after {
    --iris: calc(250px * .23);
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: var(--iris);
    height: var(--iris);
    border-radius: 50%;
    background: #cdecf7;
    box-shadow:
        inset 0 0 6px 3px #a4c5cd,
        0 0 12px 8px #a4c5cd;
    filter: blur(8px) contrast(1.1) brightness(1.1);
    transform: translate(-50%, -50%);
}

@keyframes himawari-glow {
    0% {
        box-shadow: 0 0 0 rgb(186, 152, 220);
    }

    100% {
        box-shadow: 0 0 100px rgb(186, 152, 220);
    }
}
/* HIMAWARI BYAKUGAN EYES END */

/* JOUGAN EYES START (WIP) */
.boruto-eye {
    background: radial-gradient(circle at center, rgba(66,97,107,1.0) 0%, rgba(179,229,245,1.0) 50%);
}

.boruto-eye:hover {
    box-shadow: 0 0 100px rgba(179,229,245, 1);
    animation: boruto-glow .5s ease-in-out;
}

.boruto-text {
    color: rgba(179,229,245, 1);
    text-shadow: 0 0 10px rgba(179,229,245, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(179,229,245, 1);
}

.jougan-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.jougan-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.jougan-eye > .inner-eye::before {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    z-index: 5;
    border-radius: 50%;
    background-color: rgba(186,213,222,1.0);
    top: 50%;
    left: 50%;
    box-shadow:
        inset 0 0 6px 3px rgba(164,197,205,1.0),
        0 0 12px 8px rgba(164,197,205,1.0);
    transform: translate(-50%, -50%);
}

.jougan-eye > .inner-eye::after {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid rgba(66,97,107,1.0);
    top: 50%;
    left: 50%;
    background: rgba(205,236,247,1.0);
    box-shadow:
        inset 0 0 6px 3px rgba(164,197,205,1.0),
        0 0 12px 8px rgba(164,197,205,1.0);
    transform: translate(-50%, -50%);
}

@keyframes boruto-glow {
    0% {
        box-shadow: 0 0 0 rgba(179,229,245, 1);
    }

    100% {
        box-shadow: 0 0 100px rgba(179,229,245, 1);
    }
}

/* TENSEIGAN EYES START (WIP) */
.toneri-eye {
    background: radial-gradient(circle at center, rgb(0, 41, 87) 0%, rgb(93, 175, 234) 50%);
}

.toneri-eye:hover {
    box-shadow: 0 0 100px rgba(93, 175, 234, 1);
    animation: toneri-glow .5s ease-in-out;
}

.toneri-text {
    color: rgba(93, 175, 234, 1);
    text-shadow: 0 0 10px rgba(93, 175, 234, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(93, 175, 234, 1);
}

.tenseigan-svg {
    width: 332px;
    height: 322px;
    position: absolute;
    top: 36px;
    z-index: 0;
    left: 0;
    height: 145px;
    transform: rotate(172deg);
}

.tenseigan-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.tenseigan-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.tenseigan-eye > .inner-eye::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    z-index: 5;
    border-radius: 50%;
    background-color: rgb(16, 97, 124);
    top: 50%;
    left: 50%;
    box-shadow:
        inset 0 0 6px 3px rgb(26, 108, 129),
        0 0 12px 8px rgb(198, 244, 255);
    transform: translate(-50%, -50%);
}

.tenseigan-eye > .inner-eye::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid rgba(66,97,107,1.0);
    top: 50%;
    left: 50%;
    background: rgba(205,236,247,1.0);
    box-shadow:
        inset 0 0 6px 3px rgba(164,197,205,1.0),
        0 0 12px 8px rgba(164,197,205,1.0);
    transform: translate(-50%, -50%);
}

.tenseigan-eye > .inner-eye > .semicircle {
    position: absolute;
    width: 215px;
    height: 215px;
    transform: rotate(-40deg);
}

@keyframes toneri-glow {
    0% {
        box-shadow: 0 0 0 rgba(93, 175, 234, 1);
    }

    100% {
        box-shadow: 0 0 100px rgba(93, 175, 234, 1);
    }
}
/* TENSEIGAN EYES END */

/* SENRIGAN EYES START */
.eida-eye {
    background: radial-gradient(circle at center, rgb(0, 0, 0) 0%, rgb(0, 48, 171) 50%);
}

.eida-eye:hover {
    box-shadow: 0 0 100px rgba(0, 48, 171, 1);
    animation: eida-glow .5s ease-in-out;
}

.eida-text {
    color: rgba(0, 48, 171, 1);
    text-shadow: 0 0 10px rgba(0, 48, 171, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(0, 48, 171, 1);
}

.senrigan-eye > .inner-eye > .tag-container {
    width: 142%;
    height: 142%;
    margin: auto;
    z-index: 5;
    position: absolute;
}

.senrigan-svg {
    width: 332px;
    height: 322px;
    position: absolute;
    top: 36px;
    z-index: 0;
    left: 0;
    height: 145px;
    transform: rotate(172deg);
}

.senrigan-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.senrigan-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.senrigan-eye > .inner-eye::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    z-index: 5;
    border-radius: 50%;
    filter: blur(10px);
    background-color: rgb(248, 252, 253);
    top: 50%;
    left: 50%;
    box-shadow:
        inset 0 0 6px 3px rgb(230, 237, 238),
        0 0 12px 8px rgb(198, 244, 255);
    transform: translate(-50%, -50%);
}

.senrigan-eye > .inner-eye::after {
    content: '';
    position: absolute;
    width: 95px;
    height: 95px;
    filter: blur(19px);
    border-radius: 50%;
    border: 3px solid rgb(230, 234, 235);
    top: 50%;
    left: 50%;
    background: rgba(205,236,247,1.0);
    box-shadow:
        inset 0 0 6px 3px rgb(219, 238, 243),
        0 0 12px 8px rgb(201, 206, 208);
    transform: translate(-50%, -50%);
}

.senrigan-eye > .inner-eye > .semicircle {
    position: absolute;
    width: 215px;
    height: 215px;
    background: rgba(130, 136, 255, 0.2);
    transform: rotate(-40deg);
}

@keyframes eida-glow {
    0% {
        box-shadow: 0 0 0 rgba(0, 48, 171, 1);
    }

    100% {
        box-shadow: 0 0 100px rgba(0, 48, 171, 1);
    }
}
/* SENRIGAN EYES END */

/* DAEMON EYES START */
.daemon-eye {
    background: radial-gradient(circle, rgb(20, 17, 21) 0%, rgb(39, 23, 42) 80%);
}

.daemon-eye:hover {
    box-shadow: 0 0 100px rgb(90, 31, 100);
    animation: daemon-glow .5s ease-in-out;
}

.daemon-text {
    color: rgba(90, 31, 100, 1);
    text-shadow: 0 0 10px rgba(90, 31, 100, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(90, 31, 100, 1);
}

.daemon-dojutsu-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.daemon-dojutsu-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.daemon-dojutsu-eye > .inner-eye::after {
    content: '';
    position: absolute;
    width: 72px;
    height: 72px;
    z-index: 1;
    border-radius: 50%;
    filter: blur(1px);
    background-color: oklch(61.417% 0.15432 53.772);
    box-shadow: 0 0 22px 12px hsl(18, 46%, 63%);
}

.daemon-dojutsu-eye > .inner-eye > .tag-container > div {
    content: '';
    position: absolute;
    width: 135px;
    height: 135px;
    z-index: 5;
    border-radius: 50%;
    background-color: oklch(61.417% 0.15432 53.772);
    box-shadow: 22px 0 0 0 #1a1a1a;
    -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}

.daemon-dojutsu-eye > .inner-eye > .tag-container > div:nth-child(2) {
    content: '';
    position: absolute;
    width: 135px;
    height: 135px;
    z-index: 6;
    left: 10px;
    border-radius: 50%;
    background-color: oklch(61.417% 0.15432 53.772);
    box-shadow: 22px 0 0 0 #1a1a1a;
    -webkit-clip-path: path("M60 0 A60 60 0 1 1 60 135 A4 60 0 1 0 60 0 Z");
    clip-path: path("M60 0 A60 60 0 1 1 60 135 A4 60 0 1 0 60 0 Z");
}

.daemon-dojutsu-eye > .inner-eye > .tag-container > .shadow {
    content: '';
    position: absolute;
    width: 15px;
    height: 135px;
    z-index: 2;
    left: 65.75px;
    filter: blur(10px);
    background-color: oklch(16.871% 0.01171 60.483);
}

@keyframes daemon-glow {
    0% {
        box-shadow: 0 0 0 rgb(90, 31, 100);
    }

    100% {
        box-shadow: 0 0 100px rgb(90, 31, 100);
    }
}
/* DAEMON EYES END */

/* KETSURYUGAN EYES START */
.chino-eye {
    background: radial-gradient(circle, #cc757b 0%, #6a1517 80%);
}

.chino-eye:hover {
    box-shadow: 0 0 100px #cc757b;
    animation: chino-glow .5s ease-in-out;
}

.chino-text {
    color: #6a1517;
    text-shadow: 0 0 10px #6a1517, 0 0 10px black, 0 0 10px black, 0 0 10px #6a1517;
}

.ketsuryugan-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.ketsuryugan-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.ketsuryugan-eye > .inner-eye::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    z-index: 1;
    border-radius: 50%;
    background-color: #1a1a1a;
    box-shadow: 0 0 12px 2px #cc757b;
}

.ketsuryugan-eye > .inner-eye > .tag-container > div {
    content: '';
    position: absolute;
    width: 105px;
    height: 35px;
    z-index: 5;
    border-radius: 15px;
    background-color: #bc76f3;
    box-shadow: 0 0 12px 2px #bc76f3;
}

@keyframes chino-glow {
    0% {
        box-shadow: 0 0 0 #cc757b;
    }

    100% {
        box-shadow: 0 0 100px #cc757b;
    }
}
/* KETSURYUGAN EYES END */

/* KAGUYA EYE START */
.kaguya-eye:hover .tag-circle {
    animation: reverse-rotation 2.5s ease-in-out .8s reverse;
}

.kaguya-eye:hover .tag-circle:nth-child(3) {
    animation: reverse-rotation 3.5s ease-in-out .8s reverse;
}

.kaguya-eye::after {
    width: 20px;
    height: 20px;
}

.kaguya-eye > .inner-eye {
    border: none;
}

.kaguya-eye > .inner-eye > div {
    position: absolute;
    border: 3px solid black;
    border-radius: 50%;
}

.kaguya-eye > .inner-eye > div:nth-child(1) {
    width: 60px;
    height: 60px;
}

.kaguya-eye > .inner-eye > div:nth-child(2) {
    width: 110px;
    height: 110px;
}

.kaguya-eye > .inner-eye > div:nth-child(3) {
    width: 160px;
    height: 160px;
}

.kaguya-eye > .inner-eye > div > .tag-container {
    width: 100%;
    height: 100%;
    position: absolute;
}

.kaguya-eye > .inner-eye > div:nth-child(1) > .tag-container > .tag {
    top: -10px;
    left: 20px;
}

.kaguya-eye > .inner-eye > div:nth-child(2) {
    transform: rotate(180deg);
}

.kaguya-eye > .inner-eye > div:nth-child(2) > .tag-container > .tag {
    top: -10px;
    left: 45px;
}

.kaguya-eye > .inner-eye > div > .tag-container:nth-child(2) {
    transform: rotate(120deg);
}

.kaguya-eye > .inner-eye > div > .tag-container:nth-child(3) {
    transform: rotate(240deg);
}

.kaguya-eye > .inner-eye > div:nth-child(3) > .tag-container > .tag {
    top: -10px;
}

.kaguya-eye > .inner-eye > div:nth-child(4) {
    transform: rotate(180deg);
}

.kaguya-eye > .inner-eye > div:nth-child(4) > .tag-container > .tag {
    right: 15px;
}

.kaguya-eye > .inner-eye > div > .tag-container:nth-child(4) {
    transform: rotate(120deg);
}

.kaguya-eye > .inner-eye > div > .tag-container:nth-child(5) {
    transform: rotate(240deg);
}
/* KAGUYA EYES END */

/* KYUUBI EYES START */
.kurama-eye {
    background: radial-gradient(circle at center, #d62424 0%, #601818 70%);
}

.kyuubi-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.kyuubi-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.kyuubi-eye > .inner-eye > .tag-container > div {
    content: '';
    position: absolute;
    box-shadow: 0 0 12px 2px #000;
    width: 150px;
    height: 20px;
    z-index: 5;
    background-color: #1a1a1a;
    border-radius: 200%;
    transform: rotate(90deg);
}
/* KYUUBI EYES END */

/* NARUTO NINE TAILS SAGE MODE FOX EYES START */
.naruto-ntsmfox-eye {
    background: radial-gradient(circle at center, #d62424 0%, #601818 70%);
}

.sagemode-ntfox-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.sagemode-ntfox-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.sagemode-ntfox-eye > .inner-eye::after {
    content: '';
    position: absolute;
    box-shadow: 0 0 12px 2px #000;
    width: 150px;
    height: 20px;
    z-index: 1;
    background-color: #1a1a1a;
    border-radius: 200%;
    transform: rotate(90deg);
}

.sagemode-ntfox-eye > .inner-eye > .tag-container > div {
    content: '';
    position: absolute;
    box-shadow: 0 0 12px 2px #000;
    width: 150px;
    height: 50px;
    z-index: 5;
    border-radius: 25px;
    background-color: #1a1a1a;
}
/* NARUTO NINE TAILS SAGE MODE FOX EYES END */

/* NARUTO NINE TAILS SAGE MODE EYES START */
.naruto-ntsm-eye {
    background: radial-gradient(circle at center, #fccc1c 0%, #eb8621 45%);
}

.naruto-ntsm-eye:hover {
    box-shadow: 0 0 100px #eb8621;
    animation: naruto-ntsm-glow .5s ease-in-out;
}

.naruto-ntsm-text {
    color: #eb8621;
    text-shadow: 0 0 10px #eb8621, 0 0 10px black, 0 0 10px black, 0 0 10px #eb8621;
}

.sagemode-nt-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.sagemode-nt-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.sagemode-nt-eye > .inner-eye::after {
    content: '';
    position: absolute;
    box-shadow: 0 0 12px 2px #000;
    width: 150px;
    height: 25px;
    z-index: 1;
    background-color: #1a1a1a;
    border-radius: 200%;
    transform: rotate(90deg);
}

.sagemode-nt-eye > .inner-eye > .tag-container > div {
    content: '';
    position: absolute;
    box-shadow: 0 0 12px 2px #000;
    width: 150px;
    height: 50px;
    z-index: 5;
    border-radius: 25px;
    background-color: #1a1a1a;
}

@keyframes naruto-ntsm-glow {
    0% {
        box-shadow: 0 0 0 #eb8621;
    }

    100% {
        box-shadow: 0 0 100px #eb8621;
    }
}
/* NARUTO NINE TAILS SAGE MODE EYES END */

/* NARUTO SAGE MODE EYES START */
.naruto-sm-eye {
    background: radial-gradient(circle at center, #ffe100 0%, #ffbb00 55%);
}

.naruto-sm-eye:hover {
    box-shadow: 0 0 100px #ffbb00;
    animation: naruto-sm-glow .5s ease-in-out;
}

.naruto-sm-text {
    color: #ffbb00;
    text-shadow: 0 0 10px #ffbb00, 0 0 10px black, 0 0 10px black, 0 0 10px #ffbb00;
}

.sagemode-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.sagemode-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.sagemode-eye > .inner-eye > .tag-container > div {
    content: '';
    position: absolute;
    box-shadow: 0 0 12px 2px #000;
    width: 150px;
    height: 50px;
    z-index: 5;
    border-radius: 25px;
    background-color: #1a1a1a;
}

@keyframes naruto-sm-glow {
    0% {
        box-shadow: 0 0 0 #ffbb00;
    }

    100% {
        box-shadow: 0 0 100px #ffbb00;
    }
}
/* NARUTO SAGE MODE EYES END */

/* NARUTO SAGE MODE V2 EYES START */
.naruto-sm2-eye {
    background: radial-gradient(circle, rgba(238, 213, 96, 1) 0%, rgba(214, 168, 29, 1) 35%, rgba(255, 154, 0, 1) 100%);
}

.naruto-sm2-eye:hover {
    box-shadow: 0 0 100px rgba(238, 213, 96, 1);
    animation: naruto-sm2-glow .5s ease-in-out;
}

.sagemode-v2-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.sagemode-v2-eye > .inner-eye {
    width: 150px;
    height: 150px;
    position: relative;
    border: none;
    border-radius: 50%;
}

.sagemode-v2-eye > .inner-eye::after {
    --iris-w: calc(300px * .4);
    --iris-h: calc(300px * .15);
    content: '';
    position: absolute;
    width: var(--iris-w);
    height: var(--iris-h);
    border-radius: var(--iris-h);
    background: #111;
    box-shadow: 0 0 12px 2px #000;
}

.sagemode-v2-eye > .inner-eye > .tag-container > div {
    --iris: calc(300px * .5);
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--iris);
    height: var(--iris);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(50deg);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='black' stroke-width='9' stroke-dasharray='2%2c 10%2c 2%2c 30' stroke-dashoffset='25' stroke-linecap='butt'/%3e%3c/svg%3e");
}

@keyframes naruto-sm2-glow {
    0% {
        box-shadow: 0 0 0 rgba(238, 213, 96, 1);
    }

    100% {
        box-shadow: 0 0 100px rgba(238, 213, 96, 1);
    }
}
/* NARUTO SAGE MODE V2 EYES END */

/* YOME EYES START */
.yome-eye {
    background: radial-gradient(circle at center, #fcb692 0%, #ef590f 45%);
}

.yome-eye:hover {
    box-shadow: 0 0 100px #ef590f;
    animation: yome-glow .5s ease-in-out;
}

.yome-text {
    color: #ef590f;
    text-shadow: 0 0 10px #ef590f, 0 0 10px black, 0 0 10px black, 0 0 10px #ef590f;
}

.yome-dojutsu-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.yome-dojutsu-eye > .inner-eye {
    width: 130px;
    height: 130px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.yome-dojutsu-eye > .inner-eye::after {
    content: '';
    position: absolute;
    box-shadow: 0 0 24px 14px rgba(255, 255, 255, 0.4);
    filter: blur(1px);
    width: 130px;
    height: 130px;
    z-index: 1;
    background-color: #1a1a1a;
    border-radius: 50%;
    transform: rotate(90deg);
}

@keyframes yome-glow {
    0% {
        box-shadow: 0 0 0 #ef590f;
    }

    100% {
        box-shadow: 0 0 100px #ef590f;
    }
}
/* YOME EYES END */

/* RANMARU EYES START */
.ranmaru-eye {
    background: radial-gradient(circle, #cc757b 0%, rgba(0, 0, 0, 0.5) 80%);
}

.ranmaru-eye:hover {
    box-shadow: 0 0 100px rgba(172, 39, 39, 1);
    filter: contrast(1.1) brightness(1.19);
    animation: ranmaru-glow .5s ease-in-out;
}

.ranmaru-text {
    color: rgba(172, 39, 39, 1);
    text-shadow: 0 0 10px rgba(172, 39, 39, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(172, 39, 39, 1);
}

.ranmaru-dojutsu-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.ranmaru-dojutsu-eye > .inner-eye {
    width: 140px;
    height: 140px;
    border: none;
    position: relative;
    border-radius: 50%;
    filter: contrast(1.9) brightness(1.95);
}

.ranmaru-dojutsu-eye > .inner-eye::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    z-index: 1;
    border-radius: 50%;
    background-color: rgba(172, 39, 39, 1);
    filter: blur(8px);
    box-shadow: 0 0 19px 9px rgba(172, 39, 39, 1);
}

.ranmaru-dojutsu-eye > .inner-eye > .tag-container > div {
    content: '';
    position: absolute;
    width: 55px;
    height: 55px;
    z-index: 5;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.99);
    filter: blur(25px);
    box-shadow: 0 0 28px 14px #1a1a1a;
}

@keyframes ranmaru-glow {
    0% {
        box-shadow: 0 0 0 rgba(172, 39, 39, 1);
        filter: contrast(1.1) brightness(1.1);
    }

    100% {
        box-shadow: 0 0 100px rgba(172, 39, 39, 1);
        filter: contrast(1.5) brightness(1.5);
    }
}
/* RANMARU EYES END */

/* SHION EYES START (WIP) */
.shion-eye {
    background: radial-gradient(circle, rgb(34, 1, 36) 0%, rgb(130, 47, 239) 39%, rgb(113, 31, 255) 60%, rgb(34, 1, 36) 100%);
}

.shion-eye:hover {
    box-shadow: 0 0 100px rgb(130, 47, 239);
    animation: shion-glow .5s ease-in-out;
}

.shion-text {
    color: rgba(130, 47, 239, 1);
    text-shadow: 0 0 10px rgba(130, 47, 239, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(130, 47, 239, 1);
}

.shion-svg {
    width: 332px;
    height: 322px;
    position: absolute;
    top: 36px;
    z-index: 0;
    left: 0;
    height: 145px;
    transform: rotate(172deg);
}

.shion-dojutsu-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.shion-dojutsu-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.shion-dojutsu-eye > .inner-eye::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    z-index: 0;
    border-radius: 50%;
    filter: blur(10px);
    background-color: rgb(134, 102, 250);
    top: 50%;
    left: 50%;
    box-shadow:
        inset 0 0 16px 13px rgba(189, 108, 201, 0.541),
        0 0 32px 18px rgb(131, 110, 218);
    transform: translate(-50%, -50%);
}

.shion-dojutsu-eye > .inner-eye::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    z-index: 0;
    border-radius: 50%;
    /* border: 3px solid rgb(227, 136, 248); */
    top: 50%;
    left: 50%;
    filter: blur(10px);
    background: rgb(143, 101, 233);
    box-shadow:
        inset 0 0 6px 3px rgb(111, 103, 197),
        0 0 12px 8px rgb(131, 113, 212);
    transform: translate(-50%, -50%);
}

.shion-dojutsu-eye > .inner-eye > .semicircle {
    position: absolute;
    z-index: 1;
    opacity: 0.81;
    width: 215px;
    height: 215px;
    transform: rotate(-40deg);
}

@keyframes shion-glow {
    0% {
        box-shadow: 0 0 0 rgb(130, 47, 239);
    }

    100% {
        box-shadow: 0 0 100px rgb(130, 47, 239);
    }
}
/* SHION EYES END */

/* SHUKKAKU EYES START (WIP) */
.ichibi-eye {
    background: radial-gradient(circle, #978862 0%, #6a5521 80%);
}

.ichibi-eye:hover {
    box-shadow: 0 0 100px #978862;
    animation: ichibi-glow .5s ease-in-out;
}

.ichibi-text {
    color: #978862;
    text-shadow: 0 0 10px #978862, 0 0 10px black, 0 0 10px black, 0 0 10px #978862;
}

.shukkaku-eye::after {
    width: 200px;
    height: 200px;
	border-width: 10px;
    background: transparent;
}

.shukkaku-eye > .inner-eye {
	display: flex;
	margin: auto;
	position: relative;
	border-radius: 50%;

	width: 85%;
	height: 85%;
	border: 3px dotted #000;
}

.shukkaku-eye > .inner-eye::before {
	position: relative;
    width: 200px;
	height: 200px;
    border-radius: 50%;
	border-style: solid;
	border-color: #000;
}

.shukkaku-eye > .inner-eye > .tag-container {
    content: '';
	position: relative;
	width: 86%;
	height: 86%;
    border-radius: 50%;
	background:
		radial-gradient(10px circle at 20% 20% , #716F6B 50%, transparent 50%),
		radial-gradient(145px circle at left top , #C7BA82 50%, transparent 50%),
		radial-gradient(10px circle at 80% 20% , #716F6B 50%, transparent 50%),
		radial-gradient(145px circle at right top , #C7BA82 50%, transparent 50%),
		radial-gradient(10px circle at 80% 80% , #716F6B 50%, transparent 50%),
		radial-gradient(145px circle at right bottom , #C7BA82 50%, transparent 50%),
		radial-gradient(10px circle at 20% 80% , #716F6B 50%, transparent 50%),
		radial-gradient(145px circle at left bottom , #C7BA82 50%, transparent 50%),
		#464541;
}

@keyframes ichibi-glow {
    0% {
        box-shadow: 0 0 0 #978862;
    }

    100% {
        box-shadow: 0 0 100px #978862;
    }
}
/* SHUKKAKU EYES END */

/* KIRARA EYES START (WIP) */
.kirara-eye {
    background: radial-gradient(circle, rgb(34, 1, 36) 0%, rgb(130, 47, 239) 39%, rgb(113, 31, 255) 60%, rgb(34, 1, 36) 100%);
}

.kirara-eye:hover {
    box-shadow: 0 0 100px rgb(130, 47, 239);
    animation: kirara-glow .5s ease-in-out;
}

.kirara-text {
    color: rgba(130, 47, 239, 1);
    text-shadow: 0 0 10px rgba(130, 47, 239, 1), 0 0 10px black, 0 0 10px black, 0 0 10px rgba(130, 47, 239, 1);
}

.kirara-svg {
    width: 332px;
    height: 322px;
    position: absolute;
    top: 36px;
    z-index: 0;
    left: 0;
    height: 145px;
    transform: rotate(172deg);
}

.kirara-dojutsu-eye::after {
    width: 40px;
    height: 40x;
    background: transparent;
}

.kirara-dojutsu-eye > .inner-eye {
    width: 150px;
    height: 150px;
    border: none;
    position: relative;
    border-radius: 50%;
}

.kirara-dojutsu-eye > .inner-eye::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    z-index: 0;
    border-radius: 50%;
    filter: blur(10px);
    background-color: rgb(134, 102, 250);
    top: 50%;
    left: 50%;
    box-shadow:
        inset 0 0 16px 13px rgba(189, 108, 201, 0.541),
        0 0 32px 18px rgb(131, 110, 218);
    transform: translate(-50%, -50%);
}

.kirara-dojutsu-eye > .inner-eye::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    z-index: 0;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    filter: blur(10px);
    background: rgb(143, 101, 233);
    box-shadow:
        inset 0 0 6px 3px rgb(111, 103, 197),
        0 0 12px 8px rgb(131, 113, 212);
    transform: translate(-50%, -50%);
}

.kirara-dojutsu-eye > .inner-eye > .semicircle {
    position: absolute;;
    z-index: 1;
    width: 250px;
    height: 250px;
    transform: rotate(-40deg);
}

.kirara-dojutsu-eye > .inner-eye > .semicircle #purpleGlow > stop {
    stop-color: #f3e0ff;
    stop-opacity: 1;
}

.kirara-dojutsu-eye > .inner-eye > .semicircle #purpleGlow > stop:nth-child(2) {
    stop-color: #d07aff;
    stop-opacity: 0.9;
}

.kirara-dojutsu-eye > .inner-eye > .semicircle #purpleGlow > stop:nth-child(3) {
    stop-color: #8e2de2;
    stop-opacity: 0.8;
}

.kirara-dojutsu-eye > .inner-eye > .semicircle #purpleGlow > stop:nth-child(4) {
    stop-color: #4a00e0;
    stop-opacity: 0.7;
}

@keyframes kirara-glow {
    0% {
        box-shadow: 0 0 0 rgb(130, 47, 239);
    }

    100% {
        box-shadow: 0 0 100px rgb(130, 47, 239);
    }
}
/* KIRARA EYES END */