header {
    display: flex;
    justify-content: space-between;

    h1 {
        font-size: 6.5dvh;
        margin: 0;
        margin-left: 10px;
    }

    hgroup {
        float: right;
        h1 {
            font-size: 3vb;
        }
    }
}

main {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
	grid-template-rows: repeat(6 , auto);
	grid-row-gap: 2rem;

    picture {
        grid-column: 3;
        grid-row: 3 / 5;
        background-color: rgba(230, 220, 200, 1);
    
        aside {
            text-align: center;

            img {
                width: 50px;
                vertical-align: middle; 
                display: inline-block; 
            }

            a:first-of-type img {
                width: 70px;  
            }


            a:nth-child(3) img {
                margin-right: 7px;
            }

            a:nth-child(4) img {
                margin-right: 7px;
            }
        }

        img {
            background-color: transparent;
            width: 400px;
        }
    }
}

main > aside {
    grid-column: 7 / 10;
    grid-row: 3 / 5;
    background-color: var(--dark-color);
    color: white;

    h1 {
        font-size: xx-large;
    }

    p {
        font-size: large;
    }
}

main form {
    grid-column: 4 / 7;
    grid-row: 3 / 5;
    display: flex;
    flex-flow: column wrap;
    background-color: var(--dark-color);
    color: var(--primary-color, white);
    padding: 5%;

    button {
        margin-left: 70%;
        width: 30%;
    }

    button:hover {
        background-color: #F2F2;
        cursor: pointer;
    }

    input[type="text"] {
        width: 60%;
        border: none;
        border-top: 3px solid transparent;
        border-inline: 3px solid transparent;
        border-bottom: 3px solid var(--cream-color);
    }

    input[type="tel"] {
        width: 30%;
        border: none;
        border-top: 3px solid transparent;
        border-inline: 3px solid transparent;
        border-bottom: 3px solid var(--cream-color);
    }

    input[type="email"] {
        width: 70%;
        border: none;
        border-top: 3px solid transparent;
        border-inline: 3px solid transparent;
        border-bottom: 3px solid var(--cream-color);
    }

    input:valid {
        background-color: var(--primary-color, white);
    }
    
    input:invalid {
        background-color: rgba(230, 220, 200, 1);   
        border-top: 3px solid transparent;
        border-inline: 3px solid transparent;
        border-bottom: 3px dashed red;
    }   

    input:focus {
        outline: none; 
        border: 3px solid #555;
    }

/*Fix some basic functionality in case js does not work
*/

input:valid + output::after {
    content: "This field is required."; /* Always keep content */
    visibility: hidden; /* Hide text but keep space */
    display: inline; /* Preserve natural text flow without collapse */
}

input:invalid + output::after {
    content: "This field is required.";
    visibility: visible; /* Show the message */
    color: red;
    font-size: 0.9em;
    display: inline; /* Keep the flow consistent */
}


    textarea + output {
        font-size: 0.9em;
    }
}

.flash {
    animation: flash 0.3s ease-in-out 2 alternate;
  }
  
  @keyframes flash {
    0% { background-color: red; }
    100% { background-color: white; }
  }