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

@keyframes rgbCycle {
  0%, 100% {
    border-color: white;
  }
  25% {
    border-color: red;
  }
  50% {
    border-color: green;
  }
  75% {
    border-color: blue;
  }
}
@keyframes rgbBackgroundCycle {
  0%, 100% {
    background-color: white;
  }
  25% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  75% {
    background-color: blue;
  }
}

.color-cylce {
  animation: rgbCycle 4s steps(4) infinite;
}
.color-cylce-background {  
  animation: rgbBackgroundCycle 4s infinite;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  overflow: hidden;
}

.main-container {
  position: fixed;
}

.container:not(.main-container) {
  position: absolute;
}

.main-container, .container {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
}

.container:not(.main-container) > div {
  transition: all 1s cubic-bezier(.49,.66,.66,.36);
}

.hide {
  opacity: 0;
}

.search-light {
  --size: 160px;

  transform: translate(10px, 10px);

  width: var(--size);
  height: var(--size);

  background-color: white;

  border-radius: var(--size);
}

.scanline {
  --slSize: 20px;
  background-color: white;
}
.vertical {
  width: var(--slSize);
  height: 100%;
}
.horizontal {
  height: var(--slSize);
  width: 100%;
}

.square-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.square {
  --base: 200;
  --heigth: calc(var(--base) * 1px);
  --width: calc(var(--base) * 1.6px);

  height: var(--heigth);
  width: var(--width);

  border: 10px solid white;
}