body {
    display: flex;
    /* Use flexbox for the body */
    align-items: center;
    /* Center items vertically */
    justify-content: center;
    /* Center items horizontally */
}

form {
    display: flex;
    /* Use flexbox for the form */
    flex-direction: column;
    /* Arrange elements in a column */
    justify-content: space-around;
    /* Space elements evenly vertically */
    align-items: center;
    /* Center items horizontally */
    height: 300px;
    /* Set the height of the form */
    width: 500px;
    /* Set the width of the form */
    margin-top: 25px;
    /* Add top margin to the form */
}

.form_element_input {
    display: flex;
    /* Use flexbox for the form element */
    flex-direction: column;
    /* Arrange elements in a column */
    justify-content: center;
    /* Center items vertically */
    align-items: center;
    /* Center items horizontally */
    height: 300px;
    /* Set the height of the form element */
    width: 500px;
    /* Set the width of the form element */
}

.input_nickname {
    margin: 20px;
    /* Add margin to the nickname input */
}

.reg-bar {
    height: 500px;
    /* Set the height of the registration bar */
    width: 500px;
    /* Set the width of the registration bar */
    margin-top: 10%;
    /* Add top margin to the registration bar */
    display: flex;
    /* Use flexbox for the registration bar */
    flex-direction: column;
    /* Arrange elements in a column */
    align-items: center;
    /* Center items horizontally */
    justify-content: center;
    /* Center items vertically */
    background: rgba(255, 255, 255, 0.2);
    /* Set the background color for the registration bar */
    backdrop-filter: blur(10px);
    /* Apply backdrop filter to the registration bar */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    /* Add box shadow to the registration bar */
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* Add border to the registration bar */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    /* Add top border to the registration bar */
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    /* Add left border to the registration bar */
    border-radius: 20px;
    /* Add border radius to the registration bar */
    -webkit-backdrop-filter: blur(10px);
    /* Apply backdrop filter to the registration bar for webkit browsers */
}

.form_title {
    font-size: 50px;
    /* Set the font size for the form title */
}

.input_reg {
    all: unset;
    /* Remove all styles from the input element */
    width: 200px;
    /* Set the width of the input element */
    height: 25px;
    /* Set the height of the input element */
    border-bottom: 3px solid #2F70AF;
    /* Add a bottom border to the input element */
    border-left: 3px solid #2F70AF;
    /* Add a left border to the input element */
}

.register {
    width: 200px;
    /* Set the width of the register button */
    height: 50px;
    /* Set the height of the register button */
    border-radius: 5px;
    /* Add border radius to the register button */
    cursor: pointer;
    /* Change cursor to pointer on hover */
    transition: all 0.3s ease;
    /* Add transition effect to the register button */
    position: relative;
    /* Set the position of the register button */
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        /* Add box shadow to the register button */
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
}

.sign_up {
    padding-top: 50px;
    /* Add top padding to the sign up section */
}