/* - 

CONTENTS:

1. RESET CODE

2. HEADER & BODY & FOOTER ELEMENTS

3. BODY TEXT

4. NAVIGATION ELEMENTS

5. IMAGE & SEPARATOR ELEMENTS

6. CONTACT FORM ELEMENTS

- */

/*#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#1#*/

/* - v - RESET CODE - v - */

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

/* - ^ - RESET CODE - ^ - */

/*#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#2#*/

/* - v - HEADER & BODY & FOOTER ELEMENTS - v - */

body {
    background-image: url("images/bg800bulbs.jpg"); /*Sets background*/
    margin: auto; /*Centers the body*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 50vw; /*Makes sure the width scales to device resolution*/
    font-family: 'Poppins', sans-serif; /*Google Font "Poppins*/
}

header {
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}

footer {
    background-color: #d66717;
    display: flex;
    align-items: center;
    padding: 0.1rem 0.1rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.copyright {
    color: white;
}

.header-image {
    display: flex;
}

.page-border {
    background-color: white;
}

/* - ^ - HEADER & BODY & FOOTER ELEMENTS - ^ - */

/*#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#3#*/

/* - v - BODY TEXT - v - */

h1, h2, h3, p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    margin: 1rem;
}

h1 {
    margin-top: 4rem;
    font-size: 2.5rem;
}

h2 {
    margin-top: 4rem;
    font-size: 2rem;
}

output {
    display: inline;
}

/* - ^ - BODY TEXT - ^ - */

/*#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#4#*/

/* - v - NAVIGATION ELEMENTS - v - */

/*Sets the styling of the links in the navigation bar/page heading.*/

li {
    list-style: none;
    justify-content:space-between;
    display: inline-block;
    margin: 1rem;
}

.navigation-bar a {
    color: black;
    padding: 1rem 1rem;
}

.navigation-bar a:visited {
    color: black;
    padding: 1rem 1rem;
}

.navigation-bar a:hover {
    color: white;
    background-color: black;
    padding: 1rem 1rem;
}

/*Sets the styling of the buttons and the "Back To Top" button.*/

button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
    border-radius: 1rem;
    padding: 0.5rem 5rem;
    cursor: pointer;

}

.back-top {
    background-color: #e4e4e4;
    width: 24vw;
    height: 3vw;
    font-size: 1rem;
    padding: 2rem;
}

.back-top:hover {
    background-color: #ffffff;
}

/* - ^ - NAVIGATION ELEMENTS - ^ - */

/*#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#5#*/

/* - v - IMAGE & SEPARATOR ELEMENTS - v - */

.image-right {
    min-width: 4rem;
    width: 40%;
    max-width: 11rem; /*Makes sure the image doesn't become too large*/
    float: right;
    display: block;
    margin: 1rem;
    border-radius: 1rem;
}

.image-left {
    max-width: 20%;
    min-width: 1rem;
    height: auto;
    float: left;
    display: block;
    margin: 1rem;
}

/*Underline Element to Sub-Headings*/

.sub-heading {
    border-top: 0rem;
    border-left: 0rem;
    border-right: 0rem;
    border-bottom: 0.1rem;
    border-style: solid;
}

/*Makes sure the sub-headings are underlined properly.*/

article {
    margin-top: 7rem;
    margin-bottom: 7rem;
}

/*Sets the styling for the testimonial boxes.*/

.testimonials {
    background-color: #f8fffe;
    min-width: 15rem 15rem;
    min-height: 15rem;
    margin: 1rem;
    border-top: 0.2rem;
    border-left: 0.9rem;
    border-right: 0.9rem;
    border-bottom: 0.2rem;
    border-style: solid;
    border-color: #b0d2cb;
}

/* - ^ - IMAGE & SEPARATOR ELEMENTS - ^ - */

/*#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#6#*/

/* - v - CONTACT FORM ELEMENTS - v - */

.contact-form {
    min-width: 15rem 15rem;
    min-height: 15rem;
    display: flex;
    justify-content: center;
    background-color: #b0d2cb;
    margin: auto;
    padding: 1rem;
    height: auto;
    max-width: 80%;
}

/*.contact-form p {
    text-align: left;
    width: 50vw;
    height: 2rem;
    margin: auto;
} A now unused style element, however might be useful just in case.*/

.contact-form label {
    font-size: 1rem;
}

input {
    display: flex;
    margin: auto;
}

input[type=text] {
    width: 35vw;
    height: 2rem;
    padding-left: 0.5rem;
}

input[type=tel] {
    width: 35vw;
    height: 2rem;
    padding-left: 0.5rem;
}

/*Sets the styling for the client message box*/

.contact-form textarea {
    display: flex;
    width: 35vw;
    height: 2rem;
    margin: auto;
}

#ucomment {
    min-width: 35vw;
    width: 35vw; /*To make sure you can't make the text box too thin*/
    max-width: 35vw;
    height: 40rem;
    padding-top: 0.5rem;
    padding-left: 0.5rem;
}

/*Sets the styling for the tickboxes*/

.contact-tickboxs {
    display: flex;
    flex-direction: row;
    flex-wrap:nowrap;
    justify-content: space-evenly;
    margin: auto;
}

input[type=checkbox] {
    margin-left: 0.5rem;
}

.tickbox {
    display: flex;
    flex-wrap: nowrap;
    padding: 1rem;
}

.tickbox:hover {
    color: white;
    background-color: black;
    
}

/*Sets the styling for the submit button.*/

input[type=submit] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: auto;
    margin-top: 1rem;
    min-width: 0.5rem;
    max-width: 5.5rem;
}

input[type=reset] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: auto;
    margin-top: 1rem;
    min-width: 0.5rem;
    max-width: 5.5rem;
}

.submit-client-message-2 { 
    border-style: groove;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 4rem;
    padding-right: 4rem;
    border-radius: 0rem;
    cursor: pointer;
}

.submit-client-message-2:hover { 
    background-color: #e4e4e4;
    color: #00e4b6;
}

.submit-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* - ^ - CONTACT FORM ELEMENTS - ^ - */

/*#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#END#
*/