body {
                margin: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }

            .container .eye {
                position: relative;
                width: 10em;
                height: 10em;
                margin: 0 auto;
                background-color: #e0cbc6;
                border-radius: 100% 0px;
                transform: rotate(45deg);
                display: flex;
                justify-content: center;
                align-items: center;
                border: 2px solid #5e481e;
                overflow: hidden;
                box-shadow: 5px 16px 20px 0px lightgrey;
                -webkit-animation: open 0.4s;
                animation: open 0.4s;
            }

            .container .eye:after {
                content: "";
                width: 12em;
                height: 12em;
                position: absolute;
                border-radius: 100%;
                background-color: white;
                box-shadow: inset -3px 4px 20px 0px lightgray;
            }

            .container .eye .pupil {
                width: 2.5em;
                height: 2.5em;
                background-color: black;
                border-radius: 100%;
                transition-duration: 0.5s;
            }

            .container .eye .iris {
                transform: rotate(-45deg);
                width: 7.5em;
                height: 7.5em;
                background-color: #5e481e;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
                z-index: 1;
                box-shadow: 0px 0px 20px 0px #8b451391;
                margin-bottom: 1.5em;
                margin-right: 1.5em;
            }

            .container .eye .iris .iris-1 {
                height: 7em;
                width: 7em;
                box-shadow: 0 0 1px 1px #5e481e;
                background: linear-gradient(90deg, #5e481e 1%, #5e481e 22%, #5e481e 50%, #5e481e 76%, #5e481e 99%);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
            }

            .container .eye .iris .iris-2 {
                height: 6.5em;
                width: 6.5em;
                box-shadow: 0 0 1px 1px #542a0e;
                background: linear-gradient(90deg, #542a0e 1%, #542a0e 22%, #542a0e 50%, #542a0e 76%, #542a0e 99%);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
            }

            .container .eye .iris .iris-3 {
                height: 6em;
                width: 6em;
                box-shadow: 0 0 1px 1px #63390f;
                background: linear-gradient(90deg, #63390f 1%, #63390f 22%, #63390f 50%, #63390f 76%, #63390f 99%);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
            }

            .container .eye .iris .iris-4 {
                height: 5.5em;
                width: 5.5em;
                box-shadow: 0 0 1px 1px #603101;
                background: linear-gradient(90deg, #603101 1%, #603101 22%, #603101 50%, #603101 76%, #603101 99%);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
            }

            .container .eye .iris .iris-5 {
                height: 5em;
                width: 5em;
                box-shadow: 0 0 1px 1px #451800;
                background: linear-gradient(90deg, #451800 1%, #451800 22%, #451800 50%, #451800 76%, #451800 99%);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
            }

            .container .eye .iris .iris-6 {
                height: 4.5em;
                width: 4.5em;
                box-shadow: 0 0 1px 1px #451800;
                background: linear-gradient(90deg, #451800 1%, #451800 22%, #451800 50%, #451800 76%, #451800 99%);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
            }

            .container .eye .iris:hover .pupil {
                width: 3em;
                height: 3em;
            }

            .container .eye .brightness {
                width: 1em;
                height: 1.5em;
                background-color: white;
                position: absolute;
                z-index: 1;
                top: 2.5em;
                border-radius: 14px 31px 10px 7px/68px 28px 4px 9px;
                opacity: 0.8;
            }

            .container .eye .brightness--1 {
                position: absolute;
                width: 0.5em;
                height: 1em;
                top: 5.5em;
                left: 3.5em;
                background-color: white;
                box-shadow: none;
                z-index: 1;
                border-radius: 27px 26px 23px 9px/92px 58px 43px 14px;
                opacity: 0.8;
            }

            @-webkit-keyframes open {
                from {
                    height: 0em;
                    transform: rotate(0deg);
                }
            }

            @keyframes open {
                from {
                    height: 0em;
                    transform: rotate(0deg);
                }
            }