/* Congratulations! No Error Found. CSS Validated at https://jigsaw.w3.org/css-validator/ */
html, body {
/* 100% width and height makes document responsive in all screen sizes */
width : 100%;
height : 100%;
margin : 0;
padding : 0;
background-color: #fff;
font-family : Arial;
color : #583A2F;
overflow-x : hidden;
/* Adds padding so that nav bar doesn't cover headings */
scroll-padding-top : 45px;
}
p {
/* The use of vw unit for font sizing will make 
the text size follow the browser size */
font-size : 2vw;
line-height : 1.6;
text-align : justify;
padding-left : 25px;
padding-right : 25px;
}
/* Centre text within CSS now rather 
than in the html document */
h1 {
letter-spacing : 10px;
text-transform : uppercase;
text-align : center;
color : #fff;
font-size : 4vw;
}
h2 {
text-align : center;
color : #fff;
font-size : 3vw;
}
h3 {
text-align : center;
color : #583A2F;
font-size : 2.5vw;
text-decoration : underline;
text-decoration-style : dotted;
}
h4 {
text-align : center;
color : #583A2F;
font-size : 2vw;
}
/* Putting auto and percentage makes the image 
responsive and able to scale up and down */
img {
height : auto;
vertical-align : middle;
width : 100%;
}
a:link {
color : #4C878B;
background-color : transparent;
text-decoration : underline;
}
a:hover {
color : #F39AA0;
background-color : transparent;
text-decoration : underline;
}
/* Top Navigation */
.navbar {
overflow : hidden;
background-color : #4C878B;
position : fixed;
top : 0;
width : 100%;
}
.navbar a {
float : left;
display : block;
color : #fff;
text-align : center;
padding : 14px 16px;
text-decoration : none;
}
.navbar a:hover {
background : #F39AA0;
color : #fff;
}
* {
box-sizing : border-box;
}
/* Styling for columns */
.column {
float : left;
width : 100%;
}
.left {
width : 55%;
}
.right {
width : 45%;
}
.row:after {
content : "";
display : table;
clear : both;
}
/* Styling for each section */
#about {
height : auto;
background : #9ABCBE;
display : inline-block;
width : 100%;
}
#menu {
height : auto;
background : #EE9CA0;
display : inline-block;
width : 100%;
}
#zerowaste {
height : auto;
background : #BE97AC;
display : inline-block;
width : 100%;
}
#contact {
height : auto;
background : #A5D8C2;
display : inline-block;
width : 100%;
}
footer {
background-color : #4C878B;
padding : 10px;
}
footer p {
font-size : 1.80vw;
color : #fff;
text-align : justify;
}
/* Extra styling required for Tablet (recommended break point 768 x 1024 pixels) */
@media screen and (max-width: 1023px) {
html, body {
overflow-x : hidden;
/* Change padding for tablet view */
scroll-padding-top : 45px;
}
.navbar a {
	/* Change font size for top navigation for tablet view */
font-size : 2.50vw;
}
/* Makes colums stack on top of each other in tablet view */
.column {
float : left;
width : 100%;
}
}
/* Extra styling required for Mobile(recommended break point 360 x 640 pixels) */
@media only screen and (max-width: 639px) {
html, body {
overflow-x : hidden;
/* Change padding for mobile view */
scroll-padding-top : 38px;
}
.navbar a {
/* Change font size and padding for top navigation for mobile view */
font-size : 3.50vw;
padding : 12px 9px;
}
p {
font-size : 3.50vw;
}
h1 {
font-size : 4.00vw;
letter-spacing : 8px;
}
h2 {
font-size : 3.50vw;
}
h3 {
font-size : 3.80vw;
}
h4 {
font-size : 3.60vw;
}
footer p {
font-size : 2.70vw;
color : #fff;
text-align : justify;
}
/* Makes colums stack on top of each other in mobile view */
.column {
float : left;
width : 100%;
}
}