* {
  height: 1080px;
  width: 1920px;
}

body {
  overflow: hidden;
  margin: 0px;
}

iframe {
  overflow: hidden;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.minion-div {
  z-index: 14;
  border: none;
  position: absolute;
  overflow: hidden;
  transition: all 0.5s ease;
  width: 300px;
  height: 300px;
  left: 810px;
  margin: 0px;
  text-align: center;
  opacity: 0;
  top: -300px;
}

.minion-div h3 {
  position: relative;
  top: 50px;
  color: white;
}

.minion-div img {
  border-radius: 10px;
}

.copmode {
  opacity: 1;
  top: calc(50% - 50px);
}

.cop-blue {
  filter: invert(140%) hue-rotate(200deg);
  transition: all 0.2s ease;
}

.cop-red {
  filter: invert(140%) hue-rotate(340deg);
  transition: all 0.2s ease;
}

.purple {
  filter: hue-rotate(70deg);
}

.pink {
  filter: hue-rotate(125deg);
}

.red {
  filter: hue-rotate(170deg);
}

.orange {
  filter: hue-rotate(200deg);
}

.yellow {
  filter: hue-rotate(214deg);
}

.green {
  filter: hue-rotate(295deg);
}

.teal {
  filter: hue-rotate(325deg);
}

.gray {
  filter: grayscale(100);
}

.black {
  filter: brightness(0.1);
}

.white {
  filter: grayscale(1) contrast(2);
}
