body {
      background-image: linear-gradient(#6e00fd, #000973);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: #ffffff;
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;

      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
}

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

#everything {
      width: 100%;
      height: 100%;
}

.selector {
      background-color: rgba(0,0,0,0.5);
      background-size: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: auto;
      width: 100%;
      padding: 50px 0px 50px 0;
}

h1 {
      text-align: center;
}

ul {
      list-style-type: none;
      padding: 0;
      text-align: center;
      padding-inline-start: 0px;
}

.navbar {
      position: sticky;
      bottom: 100%;
      width: 95%;
}

button.gdpsBtn {
      background-color: #363636;
      color: #ffffff;
      border: none;
      padding: 15px 30px;
      font-size: 18px;
      margin: 10px;
      cursor: pointer;
      transition: background-color 0.3s;
      border-radius: 5px;
      display: block;
      width: 20%;
      min-width: 215px;
}

button.gdpsBtn {
      background-color: #363636;
      color: #ffffff;
      border: none;
      padding: 15px 30px;
      font-size: 18px;
      margin: 10px;
      cursor: pointer;
      border-radius: 5px;
      display: block;
      width: 100%;
      line-height: 30px;
      filter: drop-shadow(0.5vh 0.5vh 0.4vh #0000008f);
      transition: filter 0.3s;
}

button.gdpsBtn:hover {
      filter: drop-shadow(0.5vh 0.5vh 0.4vh #0000008f) brightness(1.5);
}

button.gdpsBtn img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      vertical-align: middle;
      border-radius: 30%;
}

button.gdpsBtn.btn {
      filter: drop-shadow(0.5vh 0.5vh 0.4vh #0000008f);
      transition: filter 0.3s;
}

button.gdpsBtn.btn:hover {
      filter: drop-shadow(0.5vh 0.5vh 0.4vh #0000008f) brightness(1.5);
}

.btn.back {
      position: absolute;
      left: 2vh;
      top: 2vh;

      background-color: #bd00ff;
      background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 52 52' enable-background='new 0 0 52 52' xml:space='preserve'%3E%3Cpath d='M48.6,23H15.4c-0.9,0-1.3-1.1-0.7-1.7l9.6-9.6c0.6-0.6,0.6-1.5,0-2.1l-2.2-2.2c-0.6-0.6-1.5-0.6-2.1,0 L2.5,25c-0.6,0.6-0.6,1.5,0,2.1L20,44.6c0.6,0.6,1.5,0.6,2.1,0l2.1-2.1c0.6-0.6,0.6-1.5,0-2.1l-9.6-9.6C14,30.1,14.4,29,15.3,29h33.2c0.8,0,1.5-0.6,1.5-1.4v-3C50,23.8,49.4,23,48.6,23z'/%3E%3C/svg%3E");
      background-size: 100% 75%;
      background-repeat: no-repeat;
      background-position: left center;

      height: 6vh;
      width: 6vh;
      padding: 0vh;
      border-radius: 2vh;
      min-width: unset;
}

.btn.reload {
      position: absolute;
      right: 2vh;
      bottom: 2vh;

      background-color: #005aff;
      background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Ereload%3C/title%3E%3Cpath d='M0 16q0-2.784 1.088-5.312t2.912-4.384 4.384-2.912 5.344-1.088q2.784 0 5.312 1.088t4.384 2.912 2.912 4.384 1.088 5.312h2.304q0.736 0 1.28 0.416t0.8 1.024 0.16 1.28-0.64 1.184l-4.576 4.576q-0.672 0.672-1.6 0.672t-1.632-0.672l-4.576-4.576q-0.512-0.512-0.608-1.184t0.128-1.28 0.8-1.024 1.312-0.416h2.272q0-2.464-1.216-4.576t-3.328-3.328-4.576-1.216-4.608 1.216-3.328 3.328-1.216 4.576 1.216 4.608 3.328 3.328 4.608 1.216q1.728 0 3.36-0.64l3.424 3.392q-3.136 1.824-6.784 1.824-2.816 0-5.344-1.088t-4.384-2.912-2.912-4.384-1.088-5.344z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
      background-size: 100% 75%;
      background-repeat: no-repeat;
      background-position: left center;

      height: 6vh;
      width: 6vh;
      padding: 0vh;
      border-radius: 2vh;
      min-width: unset;
}

.btn.next {
      background-color: #d42062;
      width: auto;
      font-weight: bold;
}

.btn.initgdps-gdpsfh {
      background-color: #3150c2;
}

.btn.initgdps-fruitspace {
      background-color: #151418;
}

.btn.initgdps-custom {
      background-color: #d4209a;
}
    
.content-div {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s, transform 0.5s;
    display: block;
    position: absolute;
}

.content-div.active {
    /* display: block; */
    opacity: 1;
    transform: scale(1);
    pointer-events: unset;
}

.content-div.hidden {
    pointer-events: none;
}

.guild-li {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 1vh;
      padding: 2vh 0vh 2vh 0vh;
      width: 30%;
      height: fit-content;
      background-color: #0000009c;
      cursor: pointer;
      transition: background-color 0.3s;
      border-radius: 3vh;
      justify-content: center;
}

.guild-li:hover {
      background-color: rgba(114, 114, 114, 0.726);
}

.guild-li > img {
      width: 5vh;
      height: 5vh;
      margin-right: 1vh;
      border-radius: 5vh;
      margin-top: 1vh;
}

.guild-li > p {
      margin: 1vh 0vh 1vh 0vh;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 90%;
}

.content-display {
      background: rgb(0 0 0 / 40%);
      padding: 3vh;
      border-radius: 5vh;
      backdrop-filter: blur(0.5vh);
      -webkit-backdrop-filter: blur(0.5vh);
	width: 40%;
	
}

.content-display > h2 {
      margin: 1vh;
      padding: 0vh 20% 1.5vh 20%;
      text-align: center;
}

.guild-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      width: 95%;
      height: 90%;
      overflow-y: auto;
      margin: auto;
      align-content: space-around;

      scrollbar-color: #fefefe33 #00000000;
      scrollbar-width: thin;

}

#display-alert-gdpslink {
      display: block;
      width: 90%;
      height: 80%;
      align-items: center;
      flex-direction: column;
      text-align: center;
      overflow: auto;

      
      scrollbar-color: #fefefe33 #00000000;
      scrollbar-width: thin;
      z-index: 10000;
}

#all-gdpslink-content {
      display: flex;
      flex-direction: column;
      align-items: center;

      scrollbar-color: #fefefe33 #00000000;
      scrollbar-width: thin;
      z-index: 10000;
}

#select-guild-discord {
      display: flex;
      width: 90%;
      height: 90%;
      align-items: center;
      flex-direction: column;
      font-weight: bold;
      z-index: 10000;
}

#patreonBtn {
      color: white !important;
      background: #f76859;
      font-weight: bold;
}

#btn-Donations {
      display: flex;
    /* align-content: center; */
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}


#select-gdps {
      display: flex;
      width: 90%;
      height: 90%;
      align-items: center;
      flex-direction: column;
      font-weight: bold;
      z-index: 10000;
}

#submitfinal {
      width: 85%;
      height: 70%;
      display: flex;
      flex-direction: column;
      align-items: center;
}

#submitfinal > form {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      overflow-y: scroll;
      overflow-x: clip;
      padding: 0vh 2vh 0vh 2vh;

      scrollbar-color: #fefefe33 #00000000;
      scrollbar-width: thin;
      
}

#submitfinal > form > div {
      padding: 3vh;
      width: 100%;
      padding: 2.5vh;
}

#submitfinal > form > div > label {
      font-weight: bold;
}

#submitfinal > form > div > label > span {
      color: red;
      font-size: 1vh;
      padding: 0 0 0 1vh;
      vertical-align: text-top;
}

#init-div {
      text-align-last: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      margin: 0;
      padding: 0;
      z-index: 10;

}

#init-div > img {
      width: 50vh;
}

#init-div > h3 {
      padding: 0vh;
      margin: 0vh;
}

#init-div > ul > li > button.btn {
      width: 40vh;
}

label {
      margin: 1vh 0vh 1vh 0vh;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 90%;
      
}

input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) {
      background-color: unset;
      color: white;
      border: 0.2vh solid #ffffff;
      border-radius: 1vh;
      width: -webkit-fill-available;
      height: 2.3em;
      font-size: 1em;
      padding: 0vh 2vh 0vh 2vh;
}

input::placeholder {
      color: lightgray;
      opacity: 0.8;
      text-align: center;
}

select {
      background-color: unset;
      color: white; 
      border: 0.2vh solid #ffffff;
      border-radius: 1vh; 
      width: -webkit-fill-available; 
      appearance: none; 

      height: 2.3em;
      font-size: 1em;
      padding: 0vh 2vh 0vh 2vh;
      
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z' fill='%23ffffff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat; 
      background-position: right 10px center; 
      background-size: 15px;
}
select option {
      background-color: black; /* Color de fondo de las opciones del select */
      color: white; /* Color de texto de las opciones */
}

.center-img {
      position: absolute;
      top: 40%;
}

.spin {
      animation: rotate 1.5s linear infinite;
}

.li-blocked {
      pointer-events: none;
      cursor: auto;
}

@keyframes rotate {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
}

@media (max-width: 1025px) {
      .guild-li {
            width: 43%;
            height: auto;
      }

      body {
            position: fixed;
            width: 100%;
            height: 100%;
      }

      .navbar {
            width: 5em;
      }
      
      .navbar.uncompress {
            position: unset !important;
      }
}

/* ---------------------  EXT ---------------------- */

#init-div-login {
      width: 50%;
      height: 40%;
      min-height: 300px;
      min-width: 50vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 0.3vh solid #ffffff;
      filter: drop-shadow(2px 4px 6px black);
}

#init-div-login > img {
      width: 50vh;
}

#init-div-login > h3 {
      padding: 0vh;
      margin: 0vh;
}

#init-div-login > ul > li > button.btn {
      width: 50vh;
}