web/css/index.css

@keyframes scrolling {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}
@keyframes scrolling-reverse {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.logo-container {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-right: 150px;
}

.bg-container {
  background: url("../images/bg-alt1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  padding: 60px;
  box-shadow: 0 0px 60px rgb(22, 22, 22) inset;
  z-index: 20;
  display: block;
} 
.postup-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: 360px;
  position: relative;
}
.postup-container > img {
  position: absolute;
}
.postup-container .discord {
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.postup-container .download {
  left: 30px;
  top: 50%;
  translate: 0 -50%;
}
.postup-container .play {
  right: 30px;
  top: 50%;
  translate: 0 -50%;
}
.postup-container .arrow1 {
  left: 200px;
  top: 20px;
}
.postup-container .arrow2 {
  rotate: 180deg;
  transform: rotateY(180deg);
  right: 230px;
  bottom: 20px;
}

.start-play {
  margin-top: 50px;
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.postup-text-container {
  width: 100%;
  display: inline-flex;
}
.postup-text-container > div {
  display: block;
  flex: auto;
  height: -moz-fit-content;
  height: fit-content;
  padding: 0;
  margin: 0;
  flex-basis: 100%;
  padding: 10px;
  padding-top: 0;
}
.postup-text-container > div p {
  font-size: 20px;
  text-align: center;
}
.postup-text-container > div h1 {
  text-overflow: hidden;
  font-size: 35px;
  width: auto;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

.postup-button-container {
  width: 100%;
  display: inline-flex;
}
.postup-button-container > div {
  flex-basis: 100%;
}
.postup-button-container > div .button {
  margin-left: auto;
  margin-right: auto;
}

.mods {
  width: 100vw;
  display: block;
  position: relative;
}
.mods .scroll {
  overflow-x: hidden;
  position: relative;
  height: 240px;
}
.mods .scroll.scroll-reverse > div {
  width: -100% !important;
}
.mods .scroll.scroll-reverse > div.part-one {
  animation-direction: reverse;
}
.mods .scroll.scroll-reverse > div.part-two {
  animation-direction: reverse;
}
.mods .scroll > div {
  white-space: nowrap;
  position: absolute;
  justify-content: space-around;
  top: 50%;
  display: flex;
  width: 100%;
  left: 100%;
  translate: 0 -50%;
}
.mods .scroll > div.part-one {
  animation: scrolling 40s linear infinite;
  animation-delay: -20s;
}
.mods .scroll > div.part-two {
  animation: scrolling 40s linear infinite;
}
.mods .scroll > div > div {
  white-space: initial;
  background: rgb(80, 80, 80);
  box-shadow: 0 10px 0 rgb(53, 53, 53);
  display: inline-flex;
  width: 400px;
}
.mods .scroll > div > div:nth-child(odd) {
  background: rgb(194, 126, 0);
  box-shadow: 0 10px 0 rgb(109, 71, 0);
}
.mods .scroll > div > div > div {
  display: inline-block;
  padding: 20px;
}
.mods .scroll > div > div > div:last-of-type {
  padding-top: 30px;
  padding-left: 0;
  position: relative;
}
.mods .scroll > div > div > div h1 {
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 210px;
  font-size: 25px;
  margin: 0;
  text-align: left;
  padding: 0;
}
.mods .scroll > div > div > div p {
  font-size: 20px;
  display: none;
  margin: 0;
  margin-top: 20px;
}
.mods .scroll > div > div > div img {
  aspect-ratio: 1/1;
  width: 130px;
}

.technic-image-container {
  width: 1200px;
  height: 600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.technic-image-container img {
  position: absolute;
  aspect-ratio: 670/400;
  -o-object-fit: cover;
     object-fit: cover;
  height: 400px;
  border: 10px solid white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  transition: 0.3s;
  cursor: pointer;
}
.technic-image-container img:hover {
  scale: 1.05;
}
.technic-image-container .img1 {
  left: 30%;
  height: 350px;
  z-index: 9;
  rotate: -2deg;
}
.technic-image-container .img2 {
  left: 50%;
  z-index: 10;
  cursor: default;
}
.technic-image-container .img2:hover {
  scale: 1;
}
.technic-image-container .img3 {
  left: 17%;
  z-index: 8;
  height: 200px;
  rotate: -4deg;
}
.technic-image-container .img5 {
  left: 83%;
  height: 200px;
  rotate: 4deg;
  z-index: 8;
}
.technic-image-container .img6 {
  z-index: 9;
  left: 70%;
  height: 350px;
  rotate: 2deg;
}

.vote-container {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}
.vote-container button, .vote-container input {
  display: inline-block;
  margin: 7px;
}
.vote-container input {
  width: 300px;
}/*# sourceMappingURL=index.css.map */