</html>@charset "utf-8";


html, body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: left;
}


body {
Background: url("images/web-about-background.jpg")
center center fixed; /* Images and all other display and download files should be in your "images" folder. */
background-size: auto;
}


header {
	color: white;
}


#logo{
position:absolute;
z-index: 1;
top: 3px;
left: 80px;


}


main {

	width: 90%;
	color: #EAEAEA;
	text-align:left;
	padding-left: 180px;
	padding-top: 180px;
	font-family: 'Vidaloka', serif;
	font-size: 2rem;


}

.container{
display: flex;
align-items:center;
justify-content: space-between;
float: right;
padding-right: 340px;
postion: relative; /* Added so that the absolute postioning of the dropdown menu would work. */
}


nav{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 79px; /* I made it fixed height so that the dropdown would work and the bottom of the buttons and the bottom of thrier container would match. */
text-align: center;
transition: 1s ;
/* overflow: hidden; */ /* I hid/deleted this becuase I needed the dropdown menu to show. */
background-color: #EC933C;
z-index: 100000; /* I added this so that the dropdown menu(s) would go over the top of whatever you needed. */
}

nav a {
display: inline-block;
text-align: center;
color: white;
text-decoration: none;
float: right;
padding: 20px;
font-size: 2em;
font-weight: bold;
font-family: 'Vidaloka', serif;

}


nav a:hover, nav a:active, nav a:focus {
color: black;
text-decoration: none;
transition: 1s background-color;
}


nav a:hover, nav a:active, nav a:focus {
color: white;
text-decoration: none;
display: block;
background: black;
transition: .5s background-color;
}

/* ~ Dropdown menu styles ~ */

/* -= Dropdown One on the About Button =- */

.dropdown-container:hover .dropdown-one {
visibility: visible; /* This makes the menu visible when the "dropdown-container" div is rolled over. */
} /* This is the trigger for the dropdown menu. When the "dropdown-container" div is rolled over, this style makes the menu visible. */

.dropdown-one {
display: block;
width: 240px; /* A size used to encapsulate the buttons. Feel free to expand if the button width/content demands it. */
position: absolute; /* This makes the menu movable in the "dropdown-container" div. */
visibility: hidden; /* This keeps the menu hidden until the "dropdown-container" div is rolled over. */
top: 100%; /* This pushes the menu down below the buttons so it won't push your main navigation menu around and make it disappear */
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
background-color: black; /* I hope you change this one. Lol! */
}

.dropdown-one li {
display: block;
}

.dropdown-one li a {
display: block;
float: none; /* Make sure the buttons stacked vertically. */
width: 200px; /* A size that seemed to fit the content best. Adjust as needed. */
}

/* -= Dropdown Two on the Gallery Button =- */

/* Yes, you'll have to duplicate and adjust these styles for every button you want a dropdown menu on. "dropdown-container-three", "dropdown-container-four", etc., etc. Otherwise one button will trigger multiple dropdowns. */

.dropdown-container-two:hover .dropdown-two {
visibility: visible; /* This makes the menu visible when the "dropdown-container-two" div is rolled over. */
} /* This is the trigger for the dropdown menu. When the "dropdown-container-two" div is rolled over, this style makes the menu visible. */

.dropdown-two {
display: block;
width: 240px; /* A size used to encapsulate the buttons. Feel free to expand if the button width/content demands it. */
position: absolute; /* This makes the menu movable in the "dropdown-container-two" div. */
visibility: hidden; /* This keeps the menu hidden until the "dropdown-container-two" div is rolled over. */
top: 100%; /* This pushes the menu down below the buttons so it won't push your menu around and make it disappear */
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
background-color: black; /* I hope you change this one. Lol! */
}

.dropdown-two li {
display: block;
}

.dropdown-two li a {
display: block;
float: none; /* Make sure the buttons stacked vertically. */
width: 200px; /* A size that seemed to fit the content best. Adjust as needed. */
}

/* ~ End of dropdown menu styles ~ */


.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #F18307;
   color: white;
   text-align: center;
	text-size: 1.5rem;
	font-family: 'Vidaloka', serif;
}


.square-1 {
  position: sticky;
  z-index: 1;
  border-top: 3px solid;
  border-bottom: 3px solid;
	border-top-color: chocolate;
	border-bottom-color: chocolate;
  
  margin-bottom: 1 em;
  margin-top: 3em;
  margin-right: 32em;
	padding: 9px;
}

.btn-group .button {
	
	background-color: black;
  border: 3px;
  color: white;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  cursor: pointer;
  top: 82%;
   transition: .25s background-color;
	
}

.btn-group .button:not(:last-child) {
  border-right: none;
}

.btn-group .button:hover {
  background-color: #EC933C;
}


@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);


form { max-width:420px; margin:380px auto; float: left; margin-left: 300px; }

.feedback-input {
  color:white;
  font-family: 'Vidaloka', serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #EC933C;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #CC4949; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Vidaloka', serif;
  width: 100%;
  background:#EC933C;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#EC933C; }