/* Your CSS styles here */
body {
    font-family: Arial, sans-serif;
    background-image: url("bg.jpg");
    background-color: rgba(255,255,255,0.6);
    background-blend-mode: lighten;
    background-position: center;
    margin: 0;
}

nav {
    text-align: center;
    color: #7DBBC3;
    padding: 2rem;
    margin: 0 auto;
}

h1{
    background-color: white;
    width: max-content;
    margin: 0 auto;
    padding: 0.5rem;
    border-radius: 4px;
}

h2 {
    color:#DB808D;
}

form {
    max-width: 70%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    grid-auto-flow: rows;
}

fieldset {
    border: none;
    padding: 0;
    line-height: 1.6;
}

fieldset label {
    font-size: 1.2em;
}

input, label {
    cursor: pointer;
}

.data label { 
    line-height: 2.5;
}

.data input {
    width: 100%;
    line-height: 2;
}

.data select {
    padding: 0.3rem;
    width: 100%;
}

.soup, .success{
    background-color: white;
    opacity: 0.9;
    border-radius: 10px;
    padding: 2rem;
    border: 2px solid #DB808D;
}

.success{
    margin: 1rem auto;
    width: max-content;
}

.success h1 {
    background-color: none;
    color: #DB808D;
}

.success > div {
    text-align: center;
}

.data{
    background-color: white;
    opacity: 0.9;
    border-radius: 10px;
    padding: 2rem;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    border: 2px solid #DB808D;
}

.button {
    background-color: #DB808D;
    border: none;
    border-radius: 4px;
    color: white;
}

.button:hover {
    background-color: #713a42;
    cursor: pointer;
}

textarea {
    resize: none;
}

@media only screen and (max-width: 1000px) {
    form{
        grid-template-columns: 1fr;
        max-width: 90%;
    }
    h1 {
        width: 100%;
    }
}