html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
	content: none;
}
table {
    border-collapse: collapse;
	border-spacing: 0;
}

/*____________________________________*/

:root {
    font-size: 10px;
    font-family: Inter, Helvetica Neue, Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: "Norse Bold";
    src: url('./src/Norse-Bold.otf');
}

body {
    display: flex; 
    background-color: hsl(0, 0%, 97%); 
}

#hero {
    /* border: 1px solid red;  */
    width: 40vw; 
    height: 100vh; 
    background-image: url(./src/anton-poznyak-in3-CLQb48A-unsplash.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hero-content {
    height: 100vh; 
    display: flex; 
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
}

.logo {
    margin-top: 25vh; 
    margin-bottom: 52vh; 
    display: flex; 
    background-color: rgba(0,0,0, .65); 
    width: calc(100% - 2rem); 
    justify-content: center;
    align-items: flex-end; 
    font-family: 'Norse Bold', sans-serif;
    padding: 0 1rem; 
    height: 18.5vh; 

    img {
        /* height: 12rem;  */
        padding: 1rem 0; 
        height: 80%; 
        width: auto; 
    }
    
    p {
        /* font-size: 10rem;  */
        margin-bottom: 1vh; 
        font-size: 12vh; 
        color: white; 
    }
}
    
.photo-cred {
    /* height: 10%;  */
    font-size: 1.25rem; 
    color: white; 
}

.photo-cred a {
    color: white; 
}

#info {
    /* border: 1px solid blue;  */
    max-width: 60vw; 
    height: 100%; 
    /* margin-top: 20vh;  */
}

h4 {
    font-size: 2.5rem;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: Inter, Helvetica Neue, Arial, Helvetica, sans-serif;
    font-weight: 500;
    
    em {
        font-style: italic;
    }
}

#info-text {
    padding-top: 0; 
    padding-bottom: 3vh;
    padding-left: 5rem; 
    padding-right: 18rem;
    height: 40%; 
    margin-bottom: 2vh;
    margin-top: 20vh; 
}

#form {
    /* max-width: 60vw;
    padding-top: 2rem; 
    padding-bottom: 6rem;
    padding-left: 5rem;  */
    /* padding-right: 20rem; */
    
    fieldset {
        max-width: 60vw;
        padding-top: 2rem; 
        padding-bottom: 1.5rem;
        padding-left: 5rem; 
        background-color: white;
        max-width: 100%; 
        margin-bottom: 2vh; 
        box-shadow: 0px 5px 4px rgb(220, 220, 220); 

        h4 {
            margin-bottom: 2vh; 
        }
    }

    .inputs {
        display: flex; 
    }

     div { /*inputs */
        /* display: flex; 
        flex-direction: columns;
        flex-wrap: wrap;
        flex: 1; 
        justify-content: space-evenly;
        align-content: space-between; */

        label {
            font-size: 1.25rem; 
            font-weight: 500;
            color: rgb(39, 36, 36); 
        }

        input {
            display: block; 
            height: min(2.5rem, 75px); 
            /* width: max(40%, 25rem);  */
            width: 25rem; 
            margin-top: .25rem; 
            margin-bottom: 2rem;
            margin-right: 7rem;  
            border-radius: 5px 5px; 
            border: 1px black solid; 
            padding: 0 1rem; 
        }

        /* input[type="password"] {
            border-color: red;
        } */

        input:focus {
            box-shadow: 1px 1px 5px lightgrey; 
        }

        .first-3, .last-3 {
            display: inline; 
        }
    }
}

.match {
    color: red; 
    font-size: 1.5rem; 
    font-weight: 400; 
    margin-top: -20px; 
}

button[type="submit"] {
    background-color: #596D48; 
    font-weight: 600;
    color: white; 
    border: none; 
    border-radius: 5px 5px;
    padding: 1.5rem 6rem; 
    margin-top: 2rem; 
    margin-left: 5rem; 
    font-size: 1.5rem;
    box-shadow: 1px 1px 5px #b5bbaf;
}

h5 {
    font-size: 1.75rem;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: Inter, Helvetica Neue, Arial, Helvetica, sans-serif;
    font-weight: 400;
    padding-top: 2rem; 
    padding-bottom: 2.5rem;
    padding-left: 5rem; 

    a {
        /* font-style: italic; */
        text-decoration: none;
        color: #596D48; 
    }
}