:root {
    --white: #ffffff;
    --black: #000000;
    --bright_red: #FF0800;
    --dull_green: #04AA6D;
    --dark_green: #45a049;
    --dark_blue: #101524;
    --light_purple: #a1aace;
    --darker_purple: #6c7ab2;
}
.body {
    background-color: var(--dark_blue);
    padding: 0;
    margin: 0;
}
.image {
    position: absolute;
    position: absolute;
    top: 30%;
    left: 50%; 
    transform: translate(-50%, -100%);
    width: 20vh;
    image-rendering: pixelated;
}
#username {
    width: 10vw;
    position: absolute;
    top: 40vh;
    left: 50%;
    transform: translate(-50%, -100%);
    /* border-radius: 35% / 100px 100px 100px 100px; */
    border-radius: 10vh;
    padding: .75vh .75vw .75vh .75vw;
    background-color: var(--darker_purple);
    color: #fff7d6;
    border: solid transparent;
    font-size: 1.5vh;
}
#username::placeholder {
    color: #fff7d6;
    font-size: 1.5vh;
}
#password {
    width: 10vw;
    position: absolute;
    top: 45vh;
    left: 50%;
    transform: translate(-50%, -100%);
    /* border-radius: 35% / 100px 100px 100px 100px; */
    border-radius: 10vh;
    padding: .75vh .75vw .75vh .75vw;
    background-color: var(--darker_purple);
    color: #fff7d6;
    border: solid transparent;
    font-size: 1.5vh;
}
#password::placeholder {
    color: #fff7d6;
    font-size: 1.5vh;
}
#Signup {
    position: absolute;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -100%);
    border-radius: 10vh;
    padding: .75vh .75vw .75vh .75vw;
    background-color: var(--darker_purple);
    color: #fff7d6;
    border: solid transparent;
    font-size: 1.5vh;
    cursor: pointer;
    transition: background-color .5s ease;
}
#Signup:hover {
    background-color: #5969a8;
}
.signup .background {
    position: absolute;
    z-index: -1;
    top: 35%;
    left: 50%;
    transform: translate(-50%);
    width: 15vw;
    height: 17vh;
    padding: 0;
    margin: 0;
    border-radius: 10%;
    background-color: var(--light_purple);
}
.signup p {
    position: absolute;
    top: 63vh;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 15vw;
    text-align: center;
    color: var(--light_purple);
}
.signin .dashes {
    z-index: -1;
    position: absolute;
    top: 53.8vh;
    left: 50%;
    transform: translate(-50%);
    width: 15vw;
    height: .25vh;
    padding: 0;
    margin: 0;
    border-radius: 10vh;
    background-color: var(--light_purple);
}
.signin p {
    position: absolute;
    top: 53.2vh;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 1.5vh;
    padding: 0 .2vw 0 .2vw;
    color: var(--light_purple);
    background-color: var(--dark_blue);
}
.signin a button{
    position: absolute;
    top: 60.3vh;
    left: 50%;
    transform: translate(-50%, -100%);
    border-radius: 10vh;
    padding: .75vh .75vw .75vh .75vw;
    background-color: var(--darker_purple);
    text-decoration: none;
    color: #fff7d6;
    border: solid transparent;
    font-size: 1.5vh;
    cursor: pointer;
    transition: background-color .5s ease;
}
.signin a button:hover {
    background-color: #5969a8;
}
.signin .background {
    background-color: var(--light_purple);
    position: absolute;
    z-index: -1;
    top: 56%;
    left: 50%;
    transform: translate(-50%);
    width: 15vw;
    height: 5vh;
    padding: 0;
    margin: 0;
    border-radius: 10vh;
}