*{
    box-sizing: border-box;
}

h1 {
    margin: 0;
}


body{
    background-color: #000C36;
    display: flex;
    flex-direction: column;
    color: white;
    font-family: 'Roboto Slab', sans-serif;
    height: 50vh;
    margin-top: 25vh;
    margin-bottom: 25vh;
    justify-content: space-around;
}

.container {
    width: 90vw;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.header-container {
    padding: 0 2em;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: 'Carter One', sans-serif;
}

.header-container > img {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
}

.form-input {
    width: 95%;
    display: flex;
}

input[type='text'],
button {
    font-family: inherit;
    text-align: center;
    border: 0;
    
    display: block;
    margin-left: auto;
    margin-right: auto;
}

input[type='text']{
    background-color: #3B4877;
    height: 4em;
    color: white;
    flex: 1 0 60%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #3B4877 inset !important;
    -webkit-text-fill-color: white !important;
}

.label {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #485187;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

button {
    width: 95%;
    font-size: 1.5rem;
    background-color: #51E08A;
    color: black;
    font-family: 'Carter One', sans-serif;
    border-radius: 5px;
}