body {
  font-family: 'Joystix', monospace;
  background-image: url('assets/background.png');
  background-repeat: repeat;
  color: white;
  animation: diagonalScroll 40s linear infinite;
}

@font-face {
  font-family: 'Joystix';
  src: url('assets/JoystixMonospace-Regular.ttf') format('truetype');
}

@keyframes diagonalScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2556px 1439px;
  }
}

.red-btn {
  background-color: #bf313d00;
  font-size: 2em;
  color: white;
  border: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.red-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -200%;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, #D60039, #D60039, #D60039, #D60039, #D60039, rgba(255, 255, 255, 0.493), #ffffffd0, rgba(255, 255, 255, 0));
  transition: left 0.2s ease;
  z-index: -1;
}

.red-btn:hover::before {
  left: 0;
}

.red-btn:hover {
  transform: scale(1.1);
}

.red-btn span {
  position: relative;
  z-index: 1;
}

@media (max-width: 400px) {
  .red-btn {
    font-size: 1.5em;
  }
}

@media (max-width: 300px) {
  .red-btn {
    font-size: 1em;
  }
}

@media (max-height: 512px) {
  .spash-image {
    height: 0 !important;
    padding: 0px !important;
  }
}