ND_Core/ND_CharacterSelection/source/ui/style.css

body {
    display: none;
    background-size: 105%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
#exitGameMenu, #characterCreator, #characterEditor, #deleteCharacterMenu, #spawnLocation {
    display: none;
}

/* Main page */
#overlay {
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 30vw;
    background-color: rgba(2, 2, 2, 0.911);
    position: fixed;
}

#charactersSection {
    height: 50%;
    margin: none;
    padding: none;
    width: 83%;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: rgba(2, 2, 2, 0);
}
::-webkit-scrollbar-thumb {
    background: rgba(99, 99, 99, 0.575);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(128, 128, 128);
    border-radius: 10px;
}

#logoContainer {
    margin-top: 3vh;
    margin-left: 10vw;
}
#logo {
    height: 10vw;
    width: 10vw;
}

#serverName {
    color: white;
    font-size: 130%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    font-weight: bolder;
}

.mainPage {
    color: white;
    font-size: 95%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    font-weight: lighter;
}

.homeScreenButton, .createdButton, .createdButtonEdit, .createdButtonDelete {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
    border: none;
    color: white;
}

#newCharacterButton {
    margin-left: 9vw;
    margin-bottom: 0.8vh;
    height: 4.5vh;
    width: 12vw;
    background: rgb(95,141,254);
    background-image: linear-gradient(90deg, rgba(95,141,254,1) 0%, rgba(142,104,219,1) 100%);
    border-radius: 5vw;
    transition: 0.3s;
}

#quitGameButton {
    margin-left: 10vw;
    margin-bottom: 5vh;
    height: 4.5vh;
    width: 10vw;
    background: rgb(255,110,100);
    background: linear-gradient(90deg, rgb(255, 100, 208) 0%, rgb(255, 60, 109) 100%);
    border-radius: 5vw;
    transition: 0.3s;
}

.createdButton {
    display: inline-block;
    margin-bottom: 1vh;
    margin-left: 5.5vw;
    height: 3vh;
    width: 10vw;
    background-color: rgb(17, 113, 238);
    border: none;
    border-radius: 0.5vh;
    transition: 0.3s;
    white-space: nowrap;
    text-transform: capitalize;
}

.createdButtonEdit {
    margin-left: 0.2vw;
    height: 3vh;
    width: 4vw;
    background-color: rgb(128, 128, 128);
    border: none;
    border-radius: 0.5vh;
    transition: 0.3s;
}

.createdButtonDelete {
    margin-left: 0.2vw;
    height: 3vh;
    width: 4vw;
    background-color: rgb(236, 19, 19);
    border: none;
    border-radius: 0.5vh;
    transition: 0.3s;
}

/* Button transitions */
#newCharacterButton:hover, #quitGameButton:hover, .characterSubmitButton:hover, .characterResetButton:hover, .confirmationScreenConfirm:hover, .confirmationScreenCancel:hover, .createdButton:hover, .createdButtonEdit:hover, .createdButtonDelete:hover, .spawnButtons:hover {
    transition: 0.3s;
    opacity: 0.7;
}
#newCharacterButton:active, #quitGameButton:active, .characterSubmitButton:active, .characterResetButton:active, .confirmationScreenConfirm:active, .confirmationScreenCancel:active, .createdButton:active, .createdButtonEdit:active, .createdButtonDelete:active, .spawnButtons:active {
    transition: none;
    opacity: 1;
}

/* Character creator and Editor menu */
.characterMenu {
    height: 60%;
    width: 50vw;
    margin: auto 0 auto 40vw;
    background-color: rgba(2, 2, 2, 0.911);
    border-radius: 3vh;
}

#characterCreatorTopText {
    padding-top: 2vh;
    margin-left: 3vw;
    color: white;
    font-size: 120%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
}

#characterCreatorTopTextLine {
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(0, 0, 0, 0.014) 100%);
    height: 0.1vh;
    width: 95%;
    border: none;
    border-radius: 2vh;
}

/* character info */
#characterInfoContainer {
    padding: 2vh 3vw;
}
#characterInfoContainerLeft {
    width: 50%;
    float: left;
}
#characterInfoContainerRight {
    width: 50%;
    display: inline-block;
}

.firstRowText, .secondRowText, .thirdRowText, .fourthRowText {
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
}

.firstRowInput, .secondRowInput, .thirdRowInput, .fourthRowInput {
    background: white;
    color: black;
    border: none;
    border-radius: 0.2vw;
    height: 3vh;
    width: 95%;
    margin-top: 0.5vh;
    margin-bottom: 2vh;
    padding: 0 0 0 0.5vw;
}

.characterSubmitButton {
    margin-top: 1vh;
    margin-left: 33.7vw;
    margin-bottom: 2vh;
    width: 8vw;
    background-color: rgb(17, 113, 238);
}

.characterResetButton {
    width: 4vw;
    background-color: rgb(231, 50, 50);
}

.characterSubmitButton, .characterResetButton, .confirmationScreenConfirm, .confirmationScreenCancel, .spawnButtons {
    height: 4vh;
    color: white;
    font-weight: bold;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: none;
    border-radius: 1vh;
    transition: 0.3s;
}

/* confirmation Screen */
.confirmationScreen {
    height: 25vh;
    width: 30vw;
    margin-top: 20vh;
    margin-left: 45vw;
    background-color: rgba(2, 2, 2, 0.911);
    border-radius: 3vh;
}

.confirmationScreenConfirm {
    margin-top: 5vh;
    margin-left: 19%;
    margin-right: 5%;
    width: 8vw;
    background-color: rgb(17, 113, 238);
}

.confirmationScreenCancel {
    width: 8vw;
    background-color: rgb(231, 50, 50);
}

.spawnMenu {
    height: 39%;
    width: 40vw;
    margin: auto 0 auto 40vw;
    background-color: rgba(2, 2, 2, 0.911);
    border-radius: 3vh;
}

#spawnMenuContainer {
    margin-top: 3vh;
    margin-left: 5%;
}

.spawnButtons {
    display: block;
    margin-left: 0;
    margin-bottom: 1vh;
    text-align: center;
    width: 95%;
    height: 4vh;
    background-color: rgb(17, 113, 238);
}

.text {
    font-family: "Pricedown Bl", sans-serif;
    position: absolute;
    font-size: 1vw;
    color: rgba(255, 255, 255, 0.925);
    margin: auto;
    text-align: center;
    padding: 0.15% 1.1%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10vw;
}

.animated {
    overflow: hidden;
}
.animated > * {
    display: inline-block;
    position: relative;
    animation: 3s linear 0s infinite alternate move;
}
@keyframes move {
    0%, 25% {
        transform: translateX(0%);
        left: 0%;
    }
    75%, 100% {
        transform: translateX(-100%);
        left: 100%;
    }
}