body {
  overflow: hidden;
  background-color: var(--white);
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  font-family: Oddity;
}

.square {
  position: relative;
  height: 600px;
  width: 600px;
  overflow: hidden;
  background-color: var(--red);
}

.swiss {
  color: var(--white);
  position: absolute;
  top: 0px;
  left: 30px;
  font-size: 12rem;
  line-height: 11rem;
  font-family: Antarctica;
  font-variation-settings: "wdth" 100, "wght" 565, "ital" 0, "CNTR" 0;
}

.logo {
  color: var(--red);
}
.batch-1,
.batch-2,
.batch-3,
.batch-4 {
  line-height: 6rem;
  font-variation-settings: "wdth" 120, "wght" 800, "ital" 0;
  font-size: 10rem;
  position: absolute;
  animation-name: logo-animation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform: scale(1.2);
  mix-blend-mode: difference;
}

.batch-2 {
  transform: rotate(45deg);
}

.batch-2 {
  transform: rotate(180deg);
}

.batch-3 {
  transform: rotate(45deg);
}

.batch-4 {
  transform: rotate(180deg);
}

.cross-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.cross {
  position: absolute;
  right: 100px;
  bottom: 50px;
  background: var(--white);
  height: 130px;
  width: 44px;
}

.cross:after {
  background: var(--white);
  content: "";
  height: 40px;
  left: -42px;
  position: absolute;
  top: 45px;
  width: 130px;
}

@keyframes logo-animation {
  from {
    font-variation-settings: "wdth" 80, "wght" 900, "ital" 0;
    transform: scale(2);
  }
  to {
    font-variation-settings: "wdth" 80, "wght" 900, "ital" 20;
  }
}