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

@font-face {
  font-family: 'Pusab';
  src: url('../fonts/PUSAB___.otf') format('opentype'); 
}

pusab {
    font-family: 'Pusab';
}

.outline {
     text-shadow:
    -0.5px -0.5px 0 #000,
    0.5px -0.5px 0 #000,
    -0.5px 0.5px 0 #000,
    0.5px 0.5px 0 #000;
}

.outline, pusab {
    position: absolute;
    left: 20px;
    margin-top: -4px;
}

gold {
    background-image: linear-gradient(to top, #f3d678, #b88819);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent; /* For webkit browsers */
      color: transparent;
}

.lb {
    width: 75%;
    height: 90%;
    position: fixed;
    top: 10%;
    background-color: #111;
    overflow-y: scroll;
    border-radius: 15px;
    top: 5%;
    left: 12.5%;
    scrollbar-width: 5%;
    scrollbar-color: rgb(152, 73, 242) #ddd;
}

.head {
    color: white;
    font-weight: bold;
    font-family: "Noto Sans Display", sans-serif;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 75%;
    height: 50px;
    position: fixed;
    background-image: linear-gradient(to right, rgb(101, 24, 188), rgb(152, 73, 242));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

backarrow {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVuZG8yLWljb24gbHVjaWRlLXVuZG8tMiI+PHBhdGggZD0iTTkgMTQgNCA5bDUtNSIvPjxwYXRoIGQ9Ik00IDloMTAuNWE1LjUgNS41IDAgMCAxIDUuNSA1LjVhNS41IDUuNSAwIDAgMS01LjUgNS41SDExIi8+PC9zdmc+');
    position: absolute;
    left: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.entry {
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-family: "Noto Sans Display", sans-serif;
    font-weight: bold;
    font-size: 18px;
    padding: 10px;
    border-bottom: 1px solid rgb(68, 68, 68);
}


.entry .icon {
    position: absolute;
    left: 140px;
    box-shadow: 0 4px 8px 0 rgba(101, 24, 188, 0.3), 0 6px 20px 0 rgba(152, 73, 242, 0.2);
}


.star-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    left: 200px;
    display: flex;
    flex-direction: row;
    margin-top: -7px;
}

.star-icon img {
    position: relative;
    margin-left: 5px;
    top: 3px;
}

.coin-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    left: 300px;
    display: flex;
    flex-direction: row;
    margin-top: -7px;
}

.coin-icon img {
    position: relative;
    margin-left: 5px;
    top: 3px;
}

.demon-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    left: 400px;
    display: flex;
    flex-direction: row;
    margin-top: -7px;
}

.demon-icon img {
    position: relative;
    margin-left: 5px;
    top: 3px;
}

.creator-point-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    left: 500px;
    display: flex;
    flex-direction: row;
    margin-top: -7px;
}

.creator-point-icon img {
    position: relative;
    margin-left: 5px;
    top: 3px;
}

entry .username {
    text-align: right;
}

.entries {
    margin-top: 5%;
}

.page-selection {
  position: fixed;
  left: -50px;;
  top: 150px;
  z-index: -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.not-hide {
  height: 50px;
  width: 300px;
  background-image: linear-gradient(to right, rgb(101, 24, 188), rgb(152, 73, 242));
  border: 2px double black;
  outline: 2px solid white;
  border-radius: 10px;
  position: relative;
  left: 80px;
  cursor: pointer;
  font-family: "Noto Sans Display", sans-serif;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.hide {
  height: 50px;
  width: 300px;
  background-image: linear-gradient(to right, rgb(107, 107, 107), rgb(171, 170, 170));
  border: 2px double black;
  outline: 2px solid white;
  border-radius: 10px;
  position: relative;
  left: 80px;
  cursor: pointer;
  font-family: "Noto Sans Display", sans-serif;
  font-weight: bold;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.page-selection button img {
    height: 20px;
    width: 20px;
    float: left;
}

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

.page-selection a:not(.not-start):not(:hover) {
  animation: toRight 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;
  }
}

 .not-start {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -ms-animation: none !important;
        -o-animation: none !important;
        animation: none !important;
    }

.entry a {
    color: #fff;
}