:root {
    --natuna-light-background: #f4efe9; /* rgb(244 239 233) */
    --natuna-background: #ece5db; /* rgb(236 229 219) */
    --natuna-light-green: #a0b5b0; /* rgb(160 181 176)*/
    --natuna-dark-green: #515f52; /* rgb(81 95 82) */
    --natuna-brown: #c2ab7f; /* rgb(194 171 127) */
    --natuna-grey: #52534b; /* rgb(82 83 75) */
    --natuna-gold: #9d8645; /* rgb(157 134 69) */
}

body {
    background-color: var(--natuna-background);
}

h1 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

header {
    margin-top: 0;
    margin-bottom: 2px;
    padding-right: 2%;
    background-color: var(--natuna-light-green);
    border-radius: 25px 25px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    color: var(--natuna-dark-green);
    font-size: 28pt;
    padding-left: 1em;
}

header span {
    color: var(--natuna-grey);
    font-size: 48pt;
}

.navContainer {
    position: sticky;
    top: 0px;
}

nav {
    padding: 1em 1em 1em 1em;
    background-color: var(--natuna-dark-green);
    border-radius: 0px 0px 25px 25px;
    position: sticky;
    top: -5px;
}

nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 0;
    margin-bottom: 0;
}

nav li {
    color: var(--natuna-background);
    list-style-type: none;
    color: var(--natuna-background);
    text-decoration: none;
    font-size: 16pt;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

nav a {
    color: var(--natuna-background);
    text-decoration: none;
    font-size: 16pt;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10;
  top: 0px;
  right: 0;
  background-color: var(--natuna-dark-green);
  overflow-x: hidden; 
  padding-top: 60px; 
  transition: 0.5s; 
  border: 2px solid var(--natuna-background);
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 25px;
  color: var(--natuna-brown);
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: var(--natuna-background);
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


#main {
  transition: margin-right .5s;
  padding: 20px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.buttonContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1% 20% 1% 20%;
    padding: 10% 0 10% 0;
    background-image: url("../images/Natuna_Bathroom.jpeg");
    background-size: 100% auto;
    border-radius: 25px;
}

.bookButton {
    background-color: var(--natuna-dark-green);
    color: var(--natuna-background);
    padding: 1em 1.5em 1em 1.5em;
    border-radius: 25px;
    font-size: 16pt;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border: var(--natuna-background) solid 2px;
}

.bookButton :hover {
    background-color: var(--natuna-light-green);
    color: black;
}

main div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 2.5%;
}

main .logo {
    width: 120px;
}

main h1 {
    color: var(--natuna-gold);
}

main p {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 14pt;
    text-align: center;
    /* margin: 10px 20% 30px 20%; */
    margin: 0 20% 0 20%;
}

.contactContainer {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.contactContainer div {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 0;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--natuna-light-green);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 20pt;
    padding: 2em 2em 2em 2em;
    margin: 0 0 0 0;
}

.copyright {
    text-align: center;
}