ND_Core/ND_ATMs/source/ui/style.css

body {
    font-family: Arial, Helvetica, sans-serif;
}

#overlay {
    display: none;
    position: absolute;
    height: 60vh;
    width: 50vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 10px;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(199, 199, 199));
    background-color: white;
}

#logo {
    position: absolute;
    width: 300px;
    top: 2vh;
    left: 6vw;
    margin: auto;
}

#date {
    position: absolute;
    top: 3.5vh;
    right: 6vw;
    color: black;
    font-size: 18px;
}

#time {
    position: absolute;
    font-weight: 500;
    top: -0.7vh;
    right: 6vw;
    color: black;
    font-size: 30px;
}

#balance {
    position: absolute;
    top: 23vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;;
    font-weight: 500;
    left: 0;
    right: 0;
    margin: auto;
    color: black;
    font-size: 20px;
    text-align: center;
}

#confirmText {
    position: absolute;
    top: 26vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;;
    font-weight: 500;
    left: 0;
    right: 0;
    margin: auto;
    color: black;
    font-size: 20px;
    text-align: center;
}

#redline {
    position: absolute;
    height: 1vh;
    width: 80%;
    top: 9vh;
    left: 0;
    right: 0;
    margin: auto;
    background-color: red;
    border-radius: 5px;
    border: none;
}

#redbox {
    position: absolute;
    height: 5vh;
    width: 80%;
    top: 11vh;
    left: 0;
    right: 0;
    margin: auto;
    background-color: red;
    background-image: linear-gradient(rgb(204, 2, 2), rgb(255, 0, 0));
    border-radius: 5px;
    border: none;
}

#playername {
    position: absolute;
    top: 13vh;
    left: 0;
    right: 0;
    margin: auto;
    color: white;
    text-align: center;
}

#welcome {
    position: absolute;
    top: 11.5vh;
    left: 0;
    right: 0;
    margin: auto;
    color: white;
    text-align: center;
}

.input {
    height: 4vh;
    width: 7.3vw;
    background-color: rgb(255, 0, 0);
    font-weight: 1000;
    color: white;
    border: none;
    border-radius: 5px;
    margin: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;;
    transition: 50ms;
}

.input:hover {
    transition: 50ms;
    background-color: rgb(214, 2, 2);
}

#enteredAmount {
    position: absolute;
    width: 15.8vw;
    top: 28vh;
    left: 0;
    right: 0;
    color: black;
    background-color: white;
    text-align: center;
}

#withdrawButton {
    position: absolute;
    top: 36.5vh;
    left: 17vw;
}

#depositButton {
    position: absolute;
    top: 36.5vh;
    right: 17vw;
}

.mainMenuButton {
    position: absolute;
    width: 10vw;
    top: 34vh;
    right: 0;
    left: 0;
    margin: auto;
}

#closeButton {
    position: absolute;
    height: 4.8vh;
    width: 80%;
    top: 50vh;
    left: 0;
    right: 0;
}

#confirmButton{
    position: absolute;
    top: 33vh;
    left: 17vw;
}

#cancelButton {
    position: absolute;
    top: 33vh;
    right: 17vw;
}

#confirmationScreen {
    display: none;
}

#loader {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 16px solid #d1d1d1;
    border-radius: 50%;
    border-top: 16px solid red;
    width: 120px;
    height: 120px;
    animation: spin 1s linear infinite;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}