/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}

/** This is my CSS **/
/* The defaulf setting is for mobile viewport. min-width: 500px */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #E4D0FF;
    margin: auto;
    width: 100%;
}

/* This part of the code adds the new Font to the new page */
nav#nav,
section#home,
section#about,
section#contact,
footer {
    font-family: 'Proxima Nova', Georgia, sans-serif;
    font-size: 1rem;
    color: #000000;
}

/** The styles bellow belong to the Nav menu **/
nav#nav {
    background-color: #BBB3E8;
    margin: auto;
    width: 100%;
    padding: 0px;
    /* The other style file has a border in this part of the layout. I added this line of code to erase it from my css */
    border: none;
    /* Flexbox will allow the menu to change from "row" to "column" when the browser reaches the first breakpoint */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
}

a.nav-link {
    display: flex;
    justify-content: center;
    padding: 10px;
    margin: 0;
}

a.nav-link:link,
a.nav-link:visited {
    background-color: #C4CBFF;
}

a.nav-link:hover,
a.nav-link:active {
    background-color: #D8B3E8;
}

/** The styles bellow belong to the Content **/
#main {
    margin: auto;
    width: 100%;
}

section#home {
    width: 100%;
    height: auto;
	background-color: #FEC4FF;
	padding: 10% 5%;
}

section#about {
    width: 100%;
    height: auto;
    background-color: #C4CBFF;
}

section.about .about-image {
    width: 20%;
    height: auto;
    margin: .5rem;
}

section#contact {
    width: 100%;
    height: auto;
    background-color: #D8B3E8;
}

/** The styles bellow belong to the Text **/
section h1,
section h2 {
    margin-bottom: 20px;
}

section p {
    font-size: .9rem;
    line-height: 1.2rem;
    margin: auto 20px;
}

/** The styles bellow belong to the Form **/
form.contact-form {
    width: auto;
    background-color: #D8B3E8;
}

.contact-form{
    width: 100%;
    /* Flexbox will resize the form when the browser reaches the breakpoint */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.contact-form label {
    width: 100%;
}

.contact-form-section{
    flex: 1 0 61%;
    margin: .2rem;
}

.contact-form-section:nth-child(1),
.contact-form-section:nth-child(2){
    flex-basis: 60%;
    /* This line of code resizes the input for Name and E-mail on the form */
    flex-wrap: nowrap;
}

button {
    flex-basis: 60%;
    width: 50px;
    height: 60px;
}

button:link,
button:visited {
    background-color: rgb(107, 107, 107);
}

button:hover,
button:active {
    text-decoration: underline;
    font-weight: bold;
}

/** The styles bellow belong to the Footer **/
footer {
    background-color: #BBB3E8;
    text-align: center;
    font-size: .8rem;
    padding: .75em;
}

/* I used the nth-child in this case to add the styles only on the first line of text, the firs p tag*/
footer p:nth-child(1) {
    font-weight: 600;
    font-style: italic;
}

/** Breakpoints for different viewports **/
/* First Breakpoint */
@media screen and (min-width: 768px) {
    /** Styles for the Nav menu **/
    nav#nav{
        /* This will change the menu from "row" to "column" when it reaches the breakpoint */
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
		flex-direction: row;
		position: fixed;
		z-index: 100;
    }

    a.nav-link {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
    }

    /** Styles for the Text in the second section ("About Me") **/
    /* section#about {
        display: flex;
        flex-direction: row;
    }


    section.p:nth-child(1),
    section.p:nth-child(2) {
		flex-basis: 50%;
    } */

	/* section#about{
		padding-left: 100px;
		padding-right: 250px;
	}

	*/
	section#about{
		padding-left: 30px;
		padding-right: 30px;
	}
	section#about .section-title{
		display: inline-block;
	}
	section#about .about-image {
		transform: translateY(-30%);

	}
    /** Styles for the Contact Form **/
    .contact-form-section:nth-child(1),
    .contact-form-section:nth-child(2){
        flex-basis: 40%;
        /* This line of code resizes the input for Name and E-mail on the form */
        flex-wrap: nowrap;
    }

    button{
        flex-basis: 40%;
        flex-wrap: nowrap;
        order: 1;
        width: 40px;
        height: 50px;
    }
}