/*Body Styling*/
body {
    background-color:beige;
}
/*Header Styling*/
header {
    color: black;
    background-color: teal;
    display:flex;
    align-items: center;
}
/*Image Styling*/
img{
    margin-left: 15px;
}
/*Styling for the text class in the header section*/
.text {
    flex: 1;
    margin: 20px;
    padding: auto;
    height: 300px;
    text-align: center;
    background-color: teal;
}
/*Styling for h1,h2 and paragraphs*/
h1,h2,p {
    text-align: center;
    color: rgb(22, 19, 19);
}
/*Navigation Styling*/
nav {
    text-align: center;
    color: lightgrey;
    justify-content: center;
    border-top: 2px solid beige;
}
nav ul li {
    float: left;
    border-right: 1px solid #c7acac;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: teal;
  position: sticky;
  top: 0;
}
/*Link Styling*/
a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/*Link Styling upon hovering*/
a:hover{
    background-color: rgb(90, 149, 170);
}
li:last-child {
  border-right: none;
}
/*Button Styling*/
button {
    width:200px;
    height:50px;
    background-color: teal;
    display: block; 
    margin: 0 auto;
}
button a:hover:not(.active) {
    color: white;
    text-decoration: none;
}
/*Form Styling*/
#form {
  border-radius: 5px;
  background-color: lightgray;
  padding: 20px;
}
/*Form Input Styling*/
input[type=text],input[type=email] ,select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=submit] {
  width: 100%;
  background-color: teal;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/*Message box Styling*/
#comment {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #9b9191;
    border-radius: 4px;
    box-sizing: border-box;
}
/*Footer Styling*/
footer {
    background-color: beige;
    text-align: left;
}
.account {
    text-align: left;
}