@charset "utf-8";

html, body {

height: 100%;
display: flex;
align-items: center;
justify-content: left;
}


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


main {


width: 600%;
color: #EAEAEA;
text-align:left;
padding-left: 180px;
font-family: 'Vidaloka', serif;
font-size: 3.2em;


}

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


}




.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;
}


/* .navigation ul li a {
float: right;
font-size: 30px;
text-decoration: none;
color: white;

} */

/* I deleted/hid this style becuase it seemd to have no relevance to anything in the document. */


.btn-group .button {

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

}

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

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

header img {
float: left;
padding: 8px;
}