@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
        --black:#202020;
        --white:#f3f3f3;
        --blue:#0054e0;
        --shadow:0px 0px 15px 5px rgba(0,0,0,0.5);
        --blue_shadow: 0px 0px 15px 5px rgba(0,84,224,0.5);
        --right_shadow: 10px 10px 15px 1px rgba(0,84,224,0.5);
        --left_shadow: -10px -10px 15px 1px rgba(0,84,224,0.5);
        --radius:0.5rem;
}

html, body {
        font-family:'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size:18px;
}

body {
        background-image: url('../img/background.svg');
        background-repeat: repeat;
        background-position:0 0;
        background-size:600px 600px;
        background-attachment:fixed;
}

main {
        width:min(1100px,100%);
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-content:center;
        align-items:stretch;
        box-sizing:border-box;
        margin:3% auto;
        box-shadow:var(--shadow);
        background:var(--white);
}

#desc {
        background:linear-gradient(135deg, #73BEFF 0%, #0054E0 50%, #002054 100%);
        color:var(--white);
}

#frm {
        background:var(--white);
        color:var(--black);
        min-width:20rem;
}

#succ {
        background:var(--white);
        color:var(--black);
        min-height:30rem;
        text-align:center;
        padding:3rem;
}

#ss {
        border-top:10px solid #78FF8E;
}

.brand {
        display: flex;
        align-items:center;
        justify-content:center;
        gap:0.75rem;
}

.brand img {
        width:80px;
        height:auto;
        display:block;
        border-radius:var(--radius);
}

main > article {
        padding:2rem;
}

form > div {
        display:flex;
        flex-direction:column;
        align-items:start;
}

h1 {
        text-align:center;
        font-size:45px;
}

form > p {
        font-size:0.9rem;
        text-align:center;
        opacity:0.7;
}

a, a:link, a:visited, a:hover, a:focus, a:active {
        text-decoration:none;
        color:var(--blue);
        font-size:0.9rem;
}

a:hover {
        opacity:0.7;
}

input[name='name'], input[name='email'], input[name='subject'] {
        width:100%;
        height:2rem;
        border:none;
        background:#e0e0e0;
        border-radius:var(--radius);
        margin:0.5rem auto;
        padding:0.5rem;
}

input[name='name']:focus, input[name='email']:focus, input[name='subject']:focus {
        outline:none;
        box-shadow:var(--blue_shadow);
        transition:box-shadow 300ms ease;
}

textarea[name='description'] {
        width:100%;
        border:none;
        background:#e0e0e0;
        border-radius:var(--radius);
        margin:0.5rem auto;
        padding:0.5rem;
}

textarea[name='description']:focus,
textarea[name='description']:focus-visible {
        outline:none;
        box-shadow:var(--blue_shadow);
        transition:box-shadow 300ms ease;
}



button {
        background:linear-gradient(135deg, #73BEFF 0%, #0054E0 50%, #002054 100%);
        color:var(--white);
        font-size:16px;
        padding:18px 32px;
        border:none;
        width:100%;
        box-sizing:border-box;
        margin:1rem auto;
        border-radius:var(--radius);
        box-shadow:var(--right_shadow);
        transition: background-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

button:hover {
        box-shadow:var(--left_shadow);
        cursor:pointer;
        background:linear-gradient(135deg, #002054 0%, #0054E0 50%, #73BEFF  100%);
        transform:translateY(-2px);
}

@media (width <= 720px) {
        main {
                flex-direction:column;
                flex-wrap:wrap;
                margin:auto auto;
        }
        #frm {
                min-width:100%;
        }
        form > div {
                padding:auto 10px;
        }
        a {
                padding:1rem;
        }
}
/*
@media only screen and (min-width:720px) {
        main {
                flex-wrap:nowrap;
        }
}
*/