html, body { height: 100%; overflow: hidden;}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #313132;
}

/* ------------------------------------------ */

:root{
--scale: 1.5;
--blur: 0rem;
--hue-rotation: 0deg;
--sepia: 0%;
--grayscale: 0%;
--opacity: 100%;

--AnimationTime: 30s;
--AnimationDelay: 0s;

/* --eye-background-color: #561405;  */
/* --sclera-shado-color: #330505; */

--ColorInL: #76b2b0;
--ColorOutL: #04363e;
--pupil-sizeL: -50%;
--EyeXL: 0px;
--EyeYL: 0px;
--EyelidL: 0px;
--rotateL: 27.5deg;

--ColorInR: #933e3e;
--ColorOutR: #230202;
--pupil-sizeR: -50%;
--EyeXR: 0px;
--EyeYR: 0px;
--EyelidR: 0px;
--rotateR: 62.5deg;

}

/* ------------------------------------------ */

.eyes_body{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100vw;
    height: 50vh;
    overflow: hidden;
    transform: scale(var(--scale , 1));
    filter: blur(var(--blur, 0rem)) sepia(var(--sepia , 0%)) grayscale(var(--grayscale, 0%)) opacity(var(--opacity, 100%));
    transition: all 0.5s ease;
  }

.scleraL{
	position: absolute;
  	width: 110px;
    height: 110px;
    border-radius: 50%;
  	overflow: hidden;
  	background: radial-gradient(circle,
      rgba(255,255,255,1) 17%,
      rgba(149,149,149,1) 22%,
      rgba(78,78,78,1) 24%,
      rgba(0,0,0,0.35) 25%,
      rgba(0,0,0,0) 26%);
 	-moz-background: radial-gradient(circle,
      rgba(255,255,255,1) 17%,
      rgba(149,149,149,1) 22%,
      rgba(78,78,78,1) 24%,
      rgba(0,0,0,0.35) 25%,
      rgba(0,0,0,0) 26%);
   	-webkit-background: radial-gradient(circle,
      rgba(255,255,255,1) 17%,
      rgba(149,149,149,1) 22%,
      rgba(78,78,78,1) 24%,
      rgba(0,0,0,0.35) 25%,
      rgba(0,0,0,0) 26%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);  
    background-size: 415px;
    background-position-x: 50%;
  	transform: scale(1.05) rotate(var(--rotateL, 30deg));
    filter: drop-shadow(0px 0px 2px var(--sclera-shado-color, #1d1d1d));
}

.eyeL{
  	position: absolute;
  	width: 70px;
    height: 70px;
    border-radius: 50%;
  	overflow: hidden;
    background: radial-gradient(circle,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,1) 5%,
      rgba(0,0,0,1) calc(7% + ( var(--pupil-sizeL, -50%) / 100 )),
      rgba(46,33,14,1) calc(8% + ( var(--pupil-sizeL, -50%) / 100 )),
      var(--ColorInL, #9bc9c7) calc(9% + ( var(--pupil-sizeL, -50%) / 100 )),
      var(--ColorOutL, #043740) 15%,
      rgba(48,44,21,1) 16%,
      rgba(0,0,0,0) 17%);
  	-moz-background: radial-gradient(circle,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,1) 5%,
      rgba(0,0,0,1) calc(7% + ( var(--pupil-sizeL, -50%) / 100 )),
      rgba(46,33,14,1) calc(8% + ( var(--pupil-sizeL, -50%) / 100 )),
      var(--ColorInL, #9bc9c7) calc(9% + ( var(--pupil-sizeL, -50%) / 100 )),
      var(--ColorOutL, #043740) 15%,
      rgba(48,44,21,1) 16%,
      rgba(0,0,0,0) 17%);
  	-webkit-background: radial-gradient(circle,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,1) 5%,
      rgba(0,0,0,1) calc(7% + ( var(--pupil-sizeL, -50%) / 100 )),
      rgba(46,33,14,1) calc(8% + ( var(--pupil-sizeL, -50%) / 100 )),
      var(--ColorInL, #9bc9c7) calc(9% + ( var(--pupil-sizeL, -50%) / 100 )),
      var(--ColorOutL, #043740) 15%,
      rgba(48,44,21,1) 16%,
      rgba(0,0,0,0) 17%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    background-size: 415px;
    background-position-x: 50%;
   	transform: scale(1.05) rotate(var(--rotateL, 30deg)) translateX(var(--EyeXL, 0px)) translateY(var(--EyeYL, 0px));
    filter: hue-rotate(var(--hue-rotation , 0deg));
}
/* ---------------------------------------------------------------- */
.eye_rayL {
    --w: 2px;
    --grad: transparent calc(50% - var(--w)/2), var(--ColorInL, #9bc9c7) calc(50% - var(--w)/2 + 1px) calc(50% + var(--w)/2 - 1px), transparent calc(50% + var(--w)/2);
    width: 70px;
    height: 70px;
    display: inline-block;
    border-radius: 50%;
  	overflow: hidden;
    position: absolute;
    background: 
      
      linear-gradient(0deg ,var(--grad)),
      linear-gradient(9deg ,var(--grad)),
      linear-gradient(18deg ,var(--grad)),
      linear-gradient(27deg ,var(--grad)),
      linear-gradient(36deg ,var(--grad)),
      linear-gradient(45deg ,var(--grad)),
      linear-gradient(54deg ,var(--grad)),
      linear-gradient(63deg ,var(--grad)),
      linear-gradient(72deg ,var(--grad)),
      linear-gradient(81deg ,var(--grad)),
      linear-gradient(90deg ,var(--grad)),
      linear-gradient(99deg ,var(--grad)),
      linear-gradient(108deg ,var(--grad)),
      linear-gradient(117deg ,var(--grad)),
      linear-gradient(126deg ,var(--grad)),
      linear-gradient(135deg ,var(--grad)),
      linear-gradient(144deg ,var(--grad)),
      linear-gradient(153deg ,var(--grad)),
      linear-gradient(162deg ,var(--grad)),
      linear-gradient(171deg ,var(--grad));
  
    -webkit-mask: radial-gradient(farthest-side, rgba(0,0,0,0) calc( 52% + ( 8 * ( var(--pupil-sizeL, -50%) / 100 ))), rgba(255,255,255,1) calc( 57.5% + ( 8 * ( var(--pupil-sizeL, -50%) / 100 ))), rgba(0,0,0,0) 100%);
    mask: radial-gradient(farthest-side, rgba(0,0,0,0) calc( 52% + ( 8 * ( var(--pupil-sizeL, -50%) / 100 ))), rgba(255,255,255,1) calc( 57.5% + ( 8 * ( var(--pupil-sizeL, -50%) / 100 ))), rgba(0,0,0,0) 100%);
  	opacity: 47.5%;
    background-position-x: 50%;
    transform: scale(1.05) rotate(var(--rotateL, 30deg)) translateX(var(--EyeXL, 0px)) translateY(var(--EyeYL, 0px));
    filter: hue-rotate(var(--hue-rotation , 0deg));
}

/* ---------------------------------------------------------------- */
.lidL {
  	display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    width: 100px;
    height: 75px;
    background-color: var(--eye-background-color, #fff4f4);
    border: solid;
    border-color: silver;
 	  box-shadow: 6px 4px 5px -4px #000;
    border-radius: 10px 500px / 15px calc(500px - var(--EyelidL, 0px));
    transform: scale(1.05) rotate(calc( -1 * var(--rotateL, 30deg) )) translateX(-67.5px) translateY(-40px);
}

/* ---------------------------------------------------------------- */

@keyframes idle_L {
  0%   {
  transform: scale(1.05) rotate(var(--rotateL, 27.5deg)) translateX(0px) translateY(0px);
  --pupil-sizeL: -50%;
  }
  25%  {
  transform: scale(1.05) rotate(var(--rotateL, 27.5deg)) translateX(7.5px) translateY(14.5px);
  --pupil-sizeL: 0%;
  }
  50%  {
  transform: scale(1.05) rotate(var(--rotateL, 27.5deg)) translateX(0px) translateY(0px);
  --pupil-sizeL: 65%;
  }
  75%  {
  transform: scale(1.05) rotate(var(--rotateL, 27.5deg)) translateX(-12.5px) translateY(-13.5px);
  --pupil-sizeL: 0%;
  }
  100% {
  transform: scale(1.05) rotate(var(--rotateL, 27.5deg)) translateX(0px) translateY(0px);
  --pupil-sizeL: -50%;
  }
}

@keyframes idle_wL {
  0%   {
  border-radius: 10px 500px / 15px 500px;
  }
  25%  {
  border-radius: 10px 500px / 15px 500px;
  }
  50%  {
  border-radius: 10px 500px / 15px 365px;
  }
  75%  {
  border-radius: 10px 500px / 15px 425px;
  }
  100% {
  border-radius: 10px 500px / 15px 500px;
  }
}

/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */

.scleraR{
	position: absolute;
  	width: 110px;
    height: 110px;
    border-radius: 50%;
  	background: radial-gradient(circle,
      rgba(255,255,255,1) 17%,
      rgba(149,149,149,1) 22%,
      rgba(78,78,78,1) 24%,
      rgba(0,0,0,0.35) 25%,
      rgba(0,0,0,0) 26%);
 	-moz-background: radial-gradient(circle,
      rgba(255,255,255,1) 17%,
      rgba(149,149,149,1) 22%,
      rgba(78,78,78,1) 24%,
      rgba(0,0,0,0.35) 25%,
      rgba(0,0,0,0) 26%);
   	-webkit-background: radial-gradient(circle,
      rgba(255,255,255,1) 17%,
      rgba(149,149,149,1) 22%,
      rgba(78,78,78,1) 24%,
      rgba(0,0,0,0.35) 25%,
      rgba(0,0,0,0) 26%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);  
    background-size: 415px;
    background-position-x: 50%;
  	transform: scale(1.05) rotate(var(--rotateR, 60%));
    filter: drop-shadow(0px 0px 2px var(--sclera-shado-color, #1d1d1d));
}

.eyeR{
  	position: absolute;
  	width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,1) 5%,
      rgba(0,0,0,1) calc(7% + ( var(--pupil-sizeR, -50%) / 100 )),
      rgba(46,33,14,1) calc(8% + ( var(--pupil-sizeR, -50%) / 100 )),
      var(--ColorInR, rgba(147,157,56,1)) calc(9% + ( var(--pupil-sizeR, -50%) / 100 )),
      var(--ColorOutR, rgba(58,65,36,1)) 15%,
      rgba(48,44,21,1) 16%,
      rgba(0,0,0,0) 17%);
  	-moz-background: radial-gradient(circle,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,1) 5%,
      rgba(0,0,0,1) calc(7% + ( var(--pupil-sizeR, -50%) / 100 )),
      rgba(46,33,14,1) calc(8% + ( var(--pupil-sizeR, -50%) / 100 )),
      var(--ColorInR, rgba(147,157,56,1)) calc(9% + ( var(--pupil-sizeR, -50%) / 100 )),
      var(--ColorOutR, rgba(58,65,36,1)) 15%,
      rgba(48,44,21,1) 16%,
      rgba(0,0,0,0) 17%);
  	-webkit-background: radial-gradient(circle,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,1) 5%,
      rgba(0,0,0,1) calc(7% + ( var(--pupil-sizeR, -50%) / 100 )),
      rgba(46,33,14,1) calc(8% + ( var(--pupil-sizeR, -50%) / 100 )),
      var(--ColorInR, rgba(147,157,56,1)) calc(9% + ( var(--pupil-sizeR, -50%) / 100 )),
      var(--ColorOutR, rgba(58,65,36,1)) 15%,
      rgba(48,44,21,1) 16%,
      rgba(0,0,0,0) 17%);
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    background-size: 415px;
    background-position-x: 50%;
  	transform: scale(1.05) rotate(var(--rotateR, 60%)) translateX(var(--EyeXR, 0px)) translateY(var(--EyeYR, 0px));
    filter: hue-rotate(var(--hue-rotation , 0deg));
}
/* ---------------------------------------------------------------- */
.eye_rayR {
    --w: 2px;
    --grad: transparent calc(50% - var(--w)/2), var(--ColorInR, rgba(147,157,56,1)) calc(50% - var(--w)/2 + 1px) calc(50% + var(--w)/2 - 1px), transparent calc(50% + var(--w)/2);
  	width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    background: 
      
      linear-gradient(0deg ,var(--grad)),
      linear-gradient(9deg ,var(--grad)),
      linear-gradient(18deg ,var(--grad)),
      linear-gradient(27deg ,var(--grad)),
      linear-gradient(36deg ,var(--grad)),
      linear-gradient(45deg ,var(--grad)),
      linear-gradient(54deg ,var(--grad)),
      linear-gradient(63deg ,var(--grad)),
      linear-gradient(72deg ,var(--grad)),
      linear-gradient(81deg ,var(--grad)),
      linear-gradient(90deg ,var(--grad)),
      linear-gradient(99deg ,var(--grad)),
      linear-gradient(108deg ,var(--grad)),
      linear-gradient(117deg ,var(--grad)),
      linear-gradient(126deg ,var(--grad)),
      linear-gradient(135deg ,var(--grad)),
      linear-gradient(144deg ,var(--grad)),
      linear-gradient(153deg ,var(--grad)),
      linear-gradient(162deg ,var(--grad)),
      linear-gradient(171deg ,var(--grad));
  
    -webkit-mask: radial-gradient(farthest-side, rgba(0,0,0,0) calc( 52% + ( 8 * ( var(--pupil-sizeR, -50%) / 100 ))), rgba(255,255,255,1) calc( 57.5% + ( 8 * ( var(--pupil-sizeR, -50%) / 100 ))), rgba(0,0,0,0) 100%);
    mask: radial-gradient(farthest-side, rgba(0,0,0,0) calc( 52% + ( 8 * ( var(--pupil-sizeR, -50%) / 100 ))), rgba(255,255,255,1) calc( 57.5% + ( 8 * ( var(--pupil-sizeR, -50%) / 100 ))), rgba(0,0,0,0) 100%);
  	opacity: 47.5%;
    background-position-x: 50%;
    transform: scale(1.05) rotate(var(--rotateR, 60%)) translateX(var(--EyeXR, 0px)) translateY(var(--EyeYR, 0px));
    filter: hue-rotate(var(--hue-rotation , 0deg));
 	  
}

/* ---------------------------------------------------------------- */
.lidR {
  	display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    width: 75px;
    height: 100px;
    background-color: var(--eye-background-color, #fff4f4);
    border: solid;
  	box-shadow: -4px -6px 5px -4px #000;
    border-color: silver;
    border-radius: 15px calc(500px - var(--EyelidR, 0px)) / 10px 500px;
    transform: scale(1.05) rotate(calc( -1 * var(--rotateR, 60%) )) translateX(30px) translateY(52.5px);
  
/* --------------------------------------- */  
  
}
@keyframes idle_R {
  0%   {
  transform: scale(1.05) rotate(var(--rotateR, 62.5deg)) translateX(0px) translateY(0px);
    --pupil-sizeR: -50%;
  }
  25%  {
  transform: scale(1.05) rotate(var(--rotateR, 62.5deg)) translateX(-7.5px) translateY(14.5px);
    --pupil-sizeR: 0%;
  }
  50%  {
  transform: scale(1.05) rotate(var(--rotateR, 62.5deg)) translateX(0px) translateY(0px);
    --pupil-sizeR: 65%;
  }
  75%  {
  transform: scale(1.05) rotate(var(--rotateR, 62.5deg)) translateX(-12.5px) translateY(-13.5px);
    --pupil-sizeR: 0%;
  }
  100% {
  transform: scale(1.05) rotate(var(--rotateR, 62.5deg)) translateX(0px) translateY(0px);
    --pupil-sizeR: -50%;
  }
}

@keyframes idle_wR {
  0%   {
  border-radius: 15px 500px / 10px 500px;
  }
  25%  {
  border-radius: 15px 500px / 10px 500px;
  }
  50%  {
  border-radius: 15px 365px / 10px 500px;
  }
  75%  {
  border-radius: 15px 425px / 10px 500px;
  }
  100% {
  border-radius: 15px 500px / 10px 500px;
  }
}

/* ---------------------------------------------------------------- */

.eyeL_animation{
    animation: idle_L cubic-bezier(0.22, 0.61, 0.36, 1) infinite normal;
    animation-duration: var(--AnimationTime, 30s);
    animation-delay: var(--AnimationDelay, 1s);
}

.lidL_animation{
    animation: idle_wL cubic-bezier(0.22, 0.61, 0.36, 1) infinite normal;
    animation-duration: var(--AnimationTime, 30s);
    animation-delay: var(--AnimationDelay, 1s);
}

/* --------------------------------------- */ 

.eyeR_animation{
    animation: idle_R cubic-bezier(0.22, 0.61, 0.36, 1) infinite normal;
    animation-duration: var(--AnimationTime, 30s);
    animation-delay: var(--AnimationDelay, 1s);
}

.lidR_animation{
    animation: idle_wR cubic-bezier(0.22, 0.61, 0.36, 1) infinite normal;
    animation-duration: var(--AnimationTime, 30s);
    animation-delay: var(--AnimationDelay, 1s);
}
/* --------------------------------------- */  

.eyes_body > div[class~="border_none"] {

  border-color: transparent;
  border-width: 0.001px;

}

/* ---------------------------------------------------------------- */
@media (min-width: 1920px) {
  :root{
    --scale: 1.75;
    /* --hue-rotation: 45deg; */
  }
  .eyes_body{
    width: 75vw;
  }
}
@media (max-width: 700px) {
  :root{
    --scale: 1.125;
    /* --hue-rotation: 45deg; */
  }
  .eyes_body{
    width: 110vw;
  }
}
@media (max-width:480px) {
  :root{
    --scale: 0.85;
    /* --hue-rotation: 67.5deg; */
  }
  .eyes_body{
    width: 150vw;
  }
}
@media (max-width:320px) {
  :root{
    /* --hue-rotation: 90deg; */
    --scale: 0.75;
  }
}