* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/* Default values set */
body {
    font-family: 'Roboto', 'Open Sans', 'Montserrat', sans-serif;
    color: rgb(186, 186, 186);
    font-weight: 300;
}

main {
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    padding:2em;
    padding-bottom: 10em;
    background-color: rgb(32, 32, 32);
    gap: 1em;
}

/* Shared component classes*/
.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-main {
    margin: 4em;
    width: 100%;
    max-width:500px;
}

.text-area {
    text-align: center;
    font-size: x-large;
}

.form-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em;
}

.input-field {
    height: 2em;
    font-size: 1em;
    text-align: center;
}

.input-button {
    width: fit-content;
    font-size: large;
    color: rgb(32, 32, 32);
    padding: 0.5em;
    border: hidden;
    border-radius: .5em;
    background-color: rgb(186, 186, 186);
}

    .input-button:hover {
        background-color: rgb(150, 150, 150);
        cursor: pointer;
    }

@media screen (max-width: 500px ) {
}