/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


.navbar {
  overflow: hidden;
  background-color: #114C22;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #114C22;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.main-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
}

.sidebar-left {
  flex: 0 0 20%;
  max-width: 250px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sidebar-right {
  flex: 0 0 20%;
  max-width: 250px;
}

.highlight {
  display: inline-block;
  padding: .25em 0;
  background: #FAEFD8;
  color: #114C22
}

.row {
  flex: 1;
  display: flex;
  flex-direction: row; 
  gap: 15px;
}


body {
  background-image: url('/images/bit-art-background.jpg');
  color: #114C22;
  font-family: "Lucinda Console", "Courier New", monospace;
  text-align: center;
  line-height: 1.75em;
  letter-spacing: .1rem;
  padding: 0;
  margin: 0;
  background-attachment: fixed;
}

p {
  color: #0E1819
}

.header {
  border: 3px double #0D2B44;
  background-image: url("images/bugs2.jpg") ;
  background-size: 10%;
  background-repeat: repeat;
  text-align: center;
  margin-top: 15px;
  top: 0;
  height: auto;
  color: #114C22;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-family: "Lucinda Console", "Courier New", monospace;
  letter-spacing: .2rem;
  font-size: 1.35em;
  }
  
.box {
  border: 3px double #0E1819;
  background: #FAEFD8;
  padding: 0;
  margin-top: 10px;
  }
  
.box2 {
  border: 3px double #0E1819;
  background: #FAEFD8;
  padding: 0;
  margin-top: 10px;
  }
  
.box h1, .box h2, .box2 h1, .box2 h2, .box3 h1, .box3 h2 {
  background: #508F74;
  color: #0E1819;
  margin: 0;
  padding: 0.35em 0.25em 0.3em 0.25em;
  text-align: center;
  border-bottom: 3px double #F7921E;
  font-family: "Lucinda Console", "Courier New", monospace;
  font-size: 1.3em;
  }
  
.box h3, .box h4, .box2 h3, .box2 h4, .box3 h3, .box3 h4 {
	background: #508F74;
  color: #0E1819;
  margin: 0;
  padding: 0.35em 0.25em 0.3em 0.25em;
  text-align: center;
  border-bottom: 3px double #F7921E;
  font-family: "Lucinda Console", "Courier New", monospace;
  font-size: 1.1em;
  }
  
a:link {
	color: #0E1819;
	text-decoration: none;
	}

a:hover {
	color: #701E9D;
	text-decoration: underline;
	}

hr {
  width: 85%;
  border-bottom: 3px double #0E1819;
  border-top: none;
  }
	
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #F7921E;
}

::-webkit-scrollbar-button {
  background: #84F731;
}

::-webkit-scrollbar-button:hover {
  background: #F7921E;
}

/*GUEST BOOK CSS */

.container {
    width: 400px;
    padding: 20px;
    background-color: rgba(250, 239, 216, 0.9);
    border-radius: 8px;
    margin: 40px auto;
    color: #114C22;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.container h1 {
    text-align: center;
}

.form-input {
    margin-bottom: 11px;
}

.form-input label {
    display: block;
    margin-bottom: 5px;
}

.form-input input {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.btn button {
    cursor: pointer;
    background-color: #007BFF;
    transition: background-color 0.4s ease;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 12px;
}

.guest-card {
    border: 1px solid #ccc;
    padding: 5px;
    margin: 5px 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.btn button:hover {
    background-color: #394b5e;
}

.guest-card h2 {
    margin: 0;
}

.guest-card p {
    margin: 5px 0;
}