@import url(reset.css);

/* CSS Variables */
:root {
    --primary-color: #707070;
    --text-color: #464545;
    --background-color: #f5f5f5;
    --color-1:#FFFFFF;
    --color-2:#BBE2EC;
    --color-3:#838383;
    --color-4:#FFF6E8;
    --color-5:#229276;
    --color-6:#40A2E3;
    --color-7:#464444;
}

/* Apply box-sizing rule */
* {
    box-sizing: border-box;
}

/* Body Styles */
body {
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 0;
    font-family:  "peridot-pe-variable",sans-serif;
    font-variation-settings: 'wght' 700, 'wdth' 100, 'ital' 0;;
}
header {
    background-color: var(--color-1);
    color: var(--color-5) ;
    padding: 20px;
    text-align: center;}

/* Header Styles */


header p {
    font-size: 1.2em;
    font-size: large;
    font-weight: 700;
    color: var(--color-3);
}


#logo {
    border-radius: 50%;
    max-width: 100%;
}

/* Navigation Styles */

nav {
    padding: 10px;
}


nav ul {
    list-style: none;
    ;
    align-items: center;
    text-align: center;
}
nav ul :hover{
    color: var(--color-1);
    background-color: #229276;

}

nav ul li {
    margin-bottom: 10px;
}

nav a {
    text-decoration: none;
    color: var(--color-6);
    font-weight: bolder;
    font-size: large;
    display: block
}

.home-hero-section button{
    margin: 0;
    padding: 0;
}
.home-hero-section img{
    width: 50%;
    z-index: -1;
}

/* Web Development Section */
picture img{
    width: 375px;
    margin: auto;
}

.section-one {
    margin-bottom: 30px;
    text-align: center;
    padding-top: 50px;
}

.section-one h2 {
    color: var(--color-5);
        font-family: "peridot-pe-variable",sans-serif;
        font-variation-settings: 'wght' 800, 'wdth' 100, 'ital' 0;
      
}
.section-one p {
    padding: 18px;
}

/* Coding Challenge Section */

section h2 {
    color: var(--color-5);
}
section h3{
    color: var(--color-6);
    text-align: center;
}
.section-two {
    background-color:var(--color-4);
    text-align: center;
}

section p {
    padding: 10px;
}

#section-link {
    background-color:var(--color-4);
    text-align: center;
}
.quote-bg{
    background-color: #40A2E3;
    height: 203pt;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    font-style: italic;
    font-weight: 700;
    font-size: x-large;
    color: var(--color-7);
}

pre {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    text-align:left;
}

/* Form Styles */

h2 {
    text-align: center;
    font-family: "peridot-pe-variable",sans-serif;
    font-variation-settings: 'wght' 800, 'wdth' 100, 'ital' 0;
}

form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px; 
}

label {
    display: block;
    margin-bottom: 5px;
}

input,
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}
.section-one button{
    margin: 0;
}
button{
    background-color: var(--color-2);
    color: var(--color-6);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1.1em;

    margin-left: 40%;
    margin-bottom: 10px;
}

button:hover {
    background-color:var(--color-5);
    color: var(--color-1);
}

/* Footer Styles */
footer {
    background-color: var(--color-4);
    color:var(--color-3);
    padding: 20px;
    text-align: center;
}

.home-hero-section{
    display:none;
}

@media  screen and (min-width:810px) {
    .main-header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 20;
        align-items:flex-end;
    }
    .header-first-part{
        flex:50% ;
        text-align: left;
    }
    .main-header nav{
        flex: 50%;
        text-align:right;
        padding-right: 0;
        font-size:2%;
    }

    .main-header nav ul li{
        display: inline-block;
        width: 30%;
        text-align: center;  
    }
    .home-hero-section{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 20;

    }
    .hero-first-part{
        text-align: center;
        justify-content: center;
        margin-top: 10%;
        margin-left: 40px;
    }
    .section-one{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        padding-top: 20;
        margin: 0;
    }
    .section-one-one{
        text-align: right;
    }
    .picture{
        text-align: left;
    }
    .section-two{

        padding-top: 50px;
    }  
    .four-one{
        display: flex;
        flex-direction: row;
        justify-content:baseline;
        padding-top: 20;
        align-items:flex-start;
    }
    .form{
        flex:50% ;
        text-align: left;
    }
    .quote-bg{
        flex: 50%;
        text-align:right;
        padding-right: 0;
        background-color:var(--background-color);
        color: var(--color-2);
    }
    .section-four h2 h3{
        text-align: left;
    }
   
}

@media screen and(min-width:1280px){    
    .body{
        font-size: larger;
    }
}