/*Sets background color to the entire webpage*/
html {
  height: 100%;
  width: 100%;
  background-color: rgb(225, 201, 178);
}
/*Removes text decoration to all elements*/
*{
  text-decoration: none;
}
/*Styles the header which is where the logo, website title, and navigation menu are located. Basically to align elements horizontally and vertically, as well as centers them.*/
header{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/*Styles the logo class which is the logo image. Sets width and height to 5%, and adds padding of 20px.*/
.logo{
  width: 5%;
  height: 5%;
  padding: 20px;
}
/*Styles the h1 selector, removes margin on right.*/
h1{
  margin-right: auto;
}
/*Styles the link class and li elements(its child) to create a navigation menu. Makes them be beside each other, moves 10px down, and adds padding of 20px.*/
.links li{
  display: inline;
  top: 10px;
  padding: 20px;
}
/*Styles the links, makes the text color black*/
a:link, a:visited{
  color: black;
}
/*Styles the links for when the links are hovered over, gives a white border and background color, sets the color of text to rgb(174, 97, 19)*/
.links li:hover, a:hover{
  border: 1px solid white;
  background-color: white;
  color: rgb(174, 97, 19);
}
/*Styles the footer, positions it at the bottom right of the website/viewport and makes sure that it's fixed even when user scrolls*/
footer{
  right: 0;
  bottom: 0;
  position: fixed;
}
/*Styles all sections, removes margin of right and sets background color to peachpuff*/
section{
  margin-right: auto;
  background-color: peachpuff;
}
/*Styles the sections when they are hovered over, adds a border of beige and sets background color to beige*/
section:hover{
  border:1px solid beige;
  background-color:beige;
}
/*Styles the intro class when they are hovered over, adds a border of beige and sets background color to beige*/
.intro:hover{
  border: 1px solid beige;
  background-color: beige;
}
/*Styles the images class, basically ensures that the images spread horizontally with equal spacing between each one. Sets width to 75%, height to 125px, and centers it.*/
.images {
  display: flex;
  justify-content: space-between;
  width: 75%;
  height: 125px;
  margin:auto;
}
/*Styles the s-info class, basically ensures that the paragraphs spread horizontally with equal spacing between each one. Sets width to 90%, centers text, and add padding of 60px to left.*/
.s-info{
  justify-content: space-between;
  display: inline-flex;
  width: 90%;
  text-align: center;
  padding: 0px 0px 0px 60px;
}
/*Styles the first class, sets width to 45%, sets position as relative, and moves it 3% to the right*/
.first{
  width: 45%;
  position: relative;
  right: -3%;
}
/*Styles the second class, sets width to 45%, sets position as relative, moves it 52% to the right and 130px to the top*/
.second{
  width: 45%;
  position: relative;
  right: -52%;
  bottom: 130px;
}
form{
  position: relative;
  left: 37%;
}
input[type=text],input[type=password],input[type=email]{
  width: 25%;
}