@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-size: 22px;
  font-family: system-ui, Arial, Helvetica, sans-serif;
  background-color: #0f191c;
}

/* Color styles */
.hh1 { color: #EF3939; } /* attribute */
.hh2 { color: #A8DADC; } /* constant */
.hh3 { color: #F2F8FA; } /* function.builtin */
.hh4 { color: #F2F8FA; } /* function */
.hh5 { color: #A8DADC; } /* keyword */
.hh6 { color: #D2D7B4; } /* operator */
.hh7 { color: #A8DADC; } /* property */
.hh8 { color: #F2F8FA; } /* punctuation */
.hh9 { color: #F2F8FA; } /* punctuation.bracket */
.hh10 { color: #F2F8FA; } /* punctuation.delimiter */
.hh11 { color: #F2F8FA; } /* string */
.hh12 { color: #F2F8FA; } /* string.special */
.hh13 { color: #F2F8FA; } /* tag */
.hh14 { color: #D2D7B4; } /* type */
.hh15 { color: #D2D7B4; } /* type.builtin */
.hh16 { color: #A8DADC; } /* variable */
.hh17 { color: #A8DADC; } /* variable.builtin */
.hh18 { color: #F0ADA8; } /* variable.parameter */
.hh19 { color: #F0ADA8; } /* comment */
.hh20 { color: #D2D7B4; } /* macro */
.hh21 { color: #D2D7B4; } /* label */

/* Code block styles */
.code-block {
  font-family: 'courier new', courier, monospace;
  font-style: normal;
}

.code-block .language-tag {
  display: none;
}

.code-block .code-block-inner {
  font-family: 'courier new', courier, monospace;
  font-style: normal;
}

pre i {
  font-style: normal; 
}

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: #18123A;
}

.logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/images/face.svg");
  animation: scrollBackground 5s linear infinite;
  z-index: 1;
}

.ball:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 120%,  rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  bottom: 2.5%;
  left: 5%;
  opacity: 0.6;
  height: 100%;
  width: 90%;
  -webkit-filter: blur(5px);
  z-index: 2;
}

.ball:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 2%;
  left: 2%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,  rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 14%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
  z-index:10;
}

.stage {
  pointer-events: none;
  display: block;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}