*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a0a;
  cursor: none;
  background-color: black;
}

canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.eyecont {
  position: fixed;
  display: flex;
  width: 13vw;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eyecont > * {
  transform: rotate(calc(-1 * var(--rotation)));
}

.eye {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  /*background-color: rgba(255, 255, 255, 0);*/
  border-radius: 80% 0;
  border: 8px solid rgba(102, 0, 204, 0.5);
  transition: 0.4s;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.eyecont:hover .eye {
  background-color: black;
}

.pupil {
  position: absolute;
  width: 4vw;
  aspect-ratio: 1/1;
  background-color: rgb(102, 0, 204);
  border-radius: 50%;
  transition: 0.4s;
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}

.eyecont:hover .pupil{
  opacity: 0;
}

.eyecont:hover .gthub{
  box-shadow: 0 0 20px 10px #0FBF3E;
  border: 8px solid rgba(15, 191, 62, 0.8);
}

.eyecont:hover .gthub::before {
  opacity: 1;
}

.gthub::before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  z-index: -1;
  background: url('Backgrounds/matrix.gif') center;
  filter: contrast(200%);
  opacity: 0;
  background-size: cover;
  transform: rotate(-15deg);
}

.eyecont:hover .discd {
  box-shadow: 0 0 20px 10px #5865F2;
  border: 8px solid rgba(88, 101, 242, 1);
}

.eyecont:hover .discd::before {
  opacity: 1;
}

.discd::before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  z-index: -1;
  background: url('Backgrounds/messages.svg') repeat;
  opacity: 0;
  background-size: cover;
  transform: rotate(-30deg);
  animation: slide 5s infinite linear;
}

@keyframes slide {
	from {background-position: 0 0}
	to {background-position:0 -150%}
}


.eyecont:hover .MSpt{
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 20px 10px #2ab8ee;
  border: 8px solid #2ab8ee;
}

.eyecont:hover .TMA{ 
  box-shadow: 0 0 20px 10px #03a955;
  border: 8px solid rgba(3, 169, 85, 1);
}

.tid {
  position: absolute;
  opacity: 0;
  font-family: "Source Code Pro", monospace;
  color: white;
  font-size: 15px;
}

.eyecont:hover .tid{
  opacity: 1;
}

.cont {
  position: absolute;
  opacity: 0;
  font-family: "Source Code Pro", monospace;
  transition: 0.4s ease;
  font-size: 30px;
}

.eyecont:hover .cont {
  opacity: 1;
}


.icon {
  position: absolute;
  opacity: 0;
  transition: 0.4s ease;
}

.eyecont:hover .icon {
  opacity: 1;
}