html {
    background-color: #f1ec40;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1069%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(18%2c 18%2c 18%2c 1)'%3e%3c/rect%3e%3cpath d='M 0%2c210 C 22.2%2c182.2 66.6%2c81.2 111%2c71 C 155.4%2c60.8 177.6%2c155.8 222%2c159 C 266.4%2c162.2 288.6%2c65.6 333%2c87 C 377.4%2c108.4 399.6%2c266.8 444%2c266 C 488.4%2c265.2 510.6%2c101.6 555%2c83 C 599.4%2c64.4 621.6%2c172.2 666%2c173 C 710.4%2c173.8 732.6%2c74.2 777%2c87 C 821.4%2c99.8 843.6%2c235.6 888%2c237 C 932.4%2c238.4 954.6%2c111.8 999%2c94 C 1043.4%2c76.2 1065.6%2c165.2 1110%2c148 C 1154.4%2c130.8 1176.6%2c-11.8 1221%2c8 C 1265.4%2c27.8 1288.2%2c242 1332%2c247 C 1375.8%2c252 1418.4%2c75.8 1440%2c33L1440 560L0 560z' fill='rgba(18%2c 18%2c 18%2c 1)'%3e%3c/path%3e%3cpath d='M 0%2c319 C 144%2c350 432%2c459.6 720%2c474 C 1008%2c488.4 1296%2c407.6 1440%2c391L1440 560L0 560z' fill='rgba(241%2c 236%2c 64%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1069'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
}

input::placeholder,
textarea::placeholder {
    font-family: 'Lato';
}

header {
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    align-items: center;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.nome_email,
.numero_titulo {
    display: flex;
    gap: .5rem;
}

.nome_email .nome_email_div,
.numero_titulo .numero_titulo_div,
.textarea_submit,
.textarea {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.textarea_submit {
    width: 540px;
    gap: .5rem;
}

input {
    width: 250px;
    padding: .5rem;
    border: none;
    outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
}

textarea {
    resize: none;
    outline: none;
}

.textarea_submit .submit input {
    width: 540px;
    border: none;
    background-color: #f1ec40;
    color: #121212;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    padding: .75rem 0;
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    .nome_email,
    .numero_titulo {
        flex-direction: column;
    }

    .nome_email input,
    .numero_titulo input {
        width: calc(540px - 16px);
    }

    form {
        gap: .5rem;
    }

    .nome_email input,
    .numero_titulo input {
        width: 400px;
    }
    
    .textarea_submit {
        width: calc(400px + 16px);
    }

    .textarea_submit .submit input {
        width: calc(400px + 16px);
    }
}

@media screen and (max-width: 500px) {
    .nome_email input,
    .numero_titulo input {
        width: 300px;
    }
    
    .textarea_submit {
        width: calc(300px + 16px);
    }

    .textarea_submit .submit input {
        width: calc(300px + 16px);
    }
}