@font-face {
  font-family: 'Oxygene 1';
  src: url('../fonts/OXYGENE1.TTF');
}

ox {
    font-family: 'Oxygene 1';
}

h1 {
  text-shadow: 
  -1px -1px 0 #000, 
    1px -1px 0 #000,  
    -1px 1px 0 #000, 
    1px 1px 0 #000,
    -2px -2px 0 #fff, 
    2px -2px 0 #fff,  
    -2px 2px 0 #fff, 
    2px 2px 0 #fff;  
    /* background-image: linear-gradient(to right, #ff00cc, #3333ff);
 -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block; */ 

    color: #a140cb;
    position: relative;
    left: 10px;
}

body {
  background-image: url("../../demonlist/resources/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.page-selection {
  height: 100%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  gap: 10%;
}

.page-selection button {
  background-image: linear-gradient(to right, rgb(101, 24, 188), rgb(152, 73, 242));
  height: 50px;
  width: 300px;
  background-color: rgb(101, 24, 188);
  border: 2px double black;
  outline: 2px solid white;
  border-radius: 10px;
  position: relative;
  bottom: 20px;
  right: 80px;
  cursor: pointer;
  font-family: "Noto Sans Display", sans-serif;
  font-weight: bold;
}

.page-selection button:hover {
  animation: toRight 0.25s forwards ease-out;
}

.page-selection button:not(hover) {
  animation: toLeft 0.25s forwards ease-out;
}

@keyframes toRight {
  from {
    transform: translateX(0);
    color: black;
  } to {
    transform: translateX(60px);
    color: white;
  }
}

@keyframes toLeft {
  from {
    transform: translateX(60px);
    color: white;
  } to {
    transform: translateX(0px);
    color: black;
  }
}