body {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin-top: 30vh;
    background-color: rgb(228, 201, 0);
}

.card {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    height: 40vh;
    width: max(40vw, 300px);
    border-radius: 0.5rem;
    border: 5px solid black;
    box-shadow: 0 4px 0 0 black;
}

input {
    font-family: "Helvetica", sans-serif;
    font-size: max(1.5vw, 15px);
    padding: 1rem;
    width: max(30vw, 200px);
    text-align: center;
    border: 2.5px solid rgb(208, 208, 208);
    border-radius: 0.5rem;
    background-color: rgb(243, 243, 243);
}

button {
    font-size: max(1.5vw, 15px);
    padding: 1rem;
    border-radius: 0.5rem;
    width: max(32vw, 235px);
    border: 4px solid black;
    box-shadow: 0 3px 0 0 black;
    background-color: rgb(112, 158, 34);
    font-weight: bold;
    color: rgb(37, 56, 5);
}

button:hover {
    cursor: pointer;
}

button:active {
    border: 3px solid black;
    box-shadow: none;
}

h1 {
    font-size: max(2vw, 20px);
    color: black;
    font-family: "Helvetica", sans-serif;
}