.mycolor {
    color: #ff007b;
}

.mybgcolor {
    background-color: #111111;
}

.container-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.navbar-bg-gradient {
    background-image: linear-gradient(to bottom right, #ff007b, #0094ff);
}

.navbar-bg-custom {
    /*background-color: #080a10;*/
    background-color: #ff007b;
}

/* not active */
.nav-pills .pill-custom .nav-link:not(.active) {
    font-weight: bold;
    background-color: #ff007b;
    color: #111111;
}

/* active (faded) */
.nav-pills .pill-custom .nav-link {
    font-weight: bold;
    background-color: #080a10;
    color: #ff007b;
}

#random-btn {
    background-color: #ff007b;
    color: #111111;
}

#random-text, #random-btn {
    justify-self: center;
    width: 30%;
}

#list-title {
    color: #ff007b;
    text-align: center;
    border-bottom: 2px solid #ff007b;
    width: 100%;
}

.server-title {
    text-align: center;
    color: #ff007b;
    border-bottom: 2px solid #ff007b;
    width: fit-content;
}

#server-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.server {
    display: flex;
    flex-direction: column;
    border: 4px none;
    /*background-color: #080a10;*/
    background-color: #090909;
    border-radius: 12px;
    padding: 5px;
    width: fit-content;
    margin-right: 12px;
}

.server:hover {
    border: 3px solid #ff007b;
}

.infos {
    display: table;
}

.info {
    display: table-row;
    color: #ff007b;
}

button.join {
    margin: 5px;
    border-radius: 9px;
    border-style: none;
    height: 45px;
    color: #090909;
    font-weight: bolder;
}

button.join:disabled {
    opacity: 50%;
    cursor: not-allowed;
}

#join-steam {
    background-color: #ff007b;
}

#join-epic {
    background-color: #000000;
    color: #ffffff
}

#join-xbox {
    background-color: #0e7a0d;
}

#join-ark {
    background-color: #0094ff;
}

#join-iframe {
    z-index: 100;
    position: fixed;
    top: 50vh;
    left: 50vh;
}

.key .value {
    display: table-cell;
}

.service {
    border: 2px solid #ff007b;
    border-radius: 13px;
    padding: 8px;
    margin-left: 15px;
    margin-top: 15px;
    margin-right: 0px;
    margin-bottom: 0px;
    /*width: 10vw;*/
}

.service:hover {
    cursor: pointer;
}

.username {
    margin-top: 5px;
}

.accounts {
    border-top: 2px solid #ff007b;
}

.copied {
    color: #ff007b;
    display: flex;
    position: absolute;
    z-index: 10;
    justify-content: flex-end;
    align-items: flex-start;
    width: 9vw;
}

#services {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 85vw;
    margin-left: 7.5vw;
}

.content-centered {
    width: 100vw;
    height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#lottery-btn {
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ff007b;
    color: #111111;
    height: 8vh;
    width: 32vh;
    cursor: pointer;
}

#lottery-btn>h2 {
    cursor: pointer;
    margin: 0px;
}

#key {
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ff007b;
    color: #111111;
    height: 8vh;
    width: 38vh;
    cursor: pointer;
}

#key-text {
    cursor: pointer;
    margin: 0px;
}