@charset "UTF-8";
/* CSS Document */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 20px;
}

/***parallax styles***/

#page {
    background-image: url("Image/sky_view.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: contain;
	padding-top: 30%; 
    position:relative;
}

.top h1 {
    font-size:30px;
    position:absolute;
    top:5px;
    left:10px;
    font-family: 'Marck Script', cursive;
}
.top p {
    position:absolute;
    top:45px;
    left:80px;
    line-height:1.3em;
    text-align:center;
    font-size:15px;
}

/***background colors for html pages***/

.main, .salespage, .workspage, .aboutpage {
     width:100%;
}

.salespage {
    background-color:#66a05e;
    }

.salespage h2 {
    color:white;
    }

.workspage {
    background-color: #c6a9c1;
    }

.aboutpage {
    background-color: #D19969;
    }

.main {
    background-color:#4d6b81;
}

h1, h2, p {
    margin:20px;
    text-align:left;
    line-height:1.4em;
}

.middle h1, footer h1 {
    margin-top:40px;
    Margin-left:30px;
    font-size: 40px;
    font-family: 'Marck Script', cursive;
}

.middle h2 {
    Font-size: 35px;
}

.middle p {
    margin-left:10%;
    margin-right:10%;
    font-size: 25px;
    font-family: 'Crimson Text', serif;
}

/***homepage specifics***/

#maincontent {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
}

.craft1 {
    width:300px;
    height:300px;
    border:2px solid #ffffff;
}

i {
    color:#ffffff;
    font-size: 30px;
    font-style:italic;
}

em {
    font-size:20px;
}

img {
    width:100%;
}

.bottom p {
    font-size:25px;
}

/***navigation styles***/

nav ul {
    margin:0px;
    list-style-type:none;
    display:flex;
    flex-direction:column;
}

nav ul li a {
	display:block;
    font-family: 'Crimson Text', serif;
	color:#ffffff;
	font-size:24px;
	padding:20px;
    text-decoration: none;
}

.home {
    background-color: #4d6b81;
}

.sales {
    background-color: #66a05e;
}
.works {
    background-color: #c6a9c1;
}

.about {
    background-color: #d19969;
}

/***works page specific***/

.header h2 {
    font-family: 'Marck Script', cursive;
    font-size:2.5em;
    color:#ffffff;
    text-align:center;
}

.headersteps {
    margin-top:40px;
}

#steps {
    color:#ffffff;
    font-size:1.5em;
}

.boonsteps {
    background-color: ivory;
    padding:20px;
    color:#000000;
    margin:30px;
}

.boonsteps h3 {
    font-size:1.5em;
    font-style:italic;
}

.boonsteps ol {
    list-style-type: upper-roman;
    font-size:1em;
    margin-left:25px;
    line-height:1.3em;
}

/***Footer styles***/

article h1, article h2, article address, article ul {
    margin:0px;
    padding:10px;
    padding-left:30px;
}

footer {
    display:flex;
    flex-direction:column;
    line-height:1.2em;
}

article h2 {
    color:#ffffff;
    font-size:1.2em;
}

address {
    font-size:1em;
    line-height:1em;
}

address a {
    font-size:1.5em;
    line-height:1.5em;
    margin-left:20px;
}

footer ul {
    list-style-type: circle;
    line-height:1.5em;
    font-size:20px;
}

footer ul li {
    margin-left:30px;
}

article {
    border-top:4px solid #1A2041;
    border-bottom:4px solid #1A2041;
}

/***form styles***/

form {
    background-image:url("Image/sky_house3.jpg");
    width:100%;
    padding:20px;
}

form label {
    color:violet;
    font-size:20px;
}

label, input {
    display:block;
}

input {
    margin-bottom: 20px;
    height:30px;
    width:200px;
}

fieldset input, fieldset label {
    display: inline;
}

fieldset label {
    margin-bottom: 20px;
}

@media only screen and (min-width: 700px){
    .main, .salespage, .workspage, .aboutpage {
        width:100%;
    }
    
    .top {
    width:100%
    }
    
    .top h1 {
    font-size:3em;
    position:absolute;
    top:5px;
    left:10px;
    }
    
    .top p {
    position:absolute;
    top:60px;
    left:180px;
    line-height:40px;
    text-align:center;
    font-size:1.2em;
    }
    
    .middle p, footer p, .bottom p {
        font-size:1.5em;
    }
    
    #maincontent {
    display:grid;
    grip-gap: 20px;
    grid-template-columns: 1fr 3fr;
    }
    
    .craft1 {
    margin:10px;
    width:200px;
    height:200px;
    border:2px solid #ffffff;
    }
    
    nav {
    box-sizing: border-box;
    position: static;
    width: 100%;
    }
    
    nav ul {
    display: flex;
    flex-direction:row;
    }
    
    nav ul li {
    flex: 1;
    border-top:3px solid #ffffff;
    border-bottom:#ffffff;
    }

    nav ul li a {
    text-align:center;
	font-weight:500;
	text-decoration:none;
    width:100%;
    height:80px;  
    }

    nav ul li a:hover {
	background:#696969;
    }
    
    footer {
        Flex-direction:row;
    }
    
    form {
        flex:1 45%;
    }
}
article{
    flex:1 45%;
}
@media only screen and (min-width: 960px){
    body {
    background-color: #525058;
    font-size:20px;
    display:flex; 
    justify-content:center;
    }
    
    #page{
        width:960px;
    }
    
    .top h1 {
    position:absolute;
    top:40px;
    left:100px;
    }
    
    .top p {
    position:absolute;
    top:110px;
    left:20%;
    font-size:1.3em;
    }
    
    .middle h1 {
    margin-left:40px;
    font-size: 40px;
    font-family: 'Marck Script', cursive;
    }
    
    h2 {
    Font-size: 1.5em;
    }
    
    p {
    text-align:left;
    font-size: 1.2em;
}
}