body {
  background-image: url(images/assets/bgcrature1.png);
    background-repeat: repeat-y;
    background-position: right;
    background-color: rgb(255, 167, 23);
    color: rgb(57, 68, 37);
    font-size: medium;
    font-family: 'Ubuntu-Medium';
}

a:link {    
  text-decoration: underline;
  color: rgb(214, 120, 16);

}
a:visited {
  color: rgb(214, 120, 16);
}
a:hover {
  color: rgb(57, 68, 37);
}


#container {
    max-width: 800px;
    margin: 0 auto;
    width: 800px;
    display: flex;
    flex-direction: column;
}

/* header */

header img{
    width: 100%;
    margin-top: 20px;
    margin-bottom: -5px;
    padding-top: -1px;
}

.navtop{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: rgb(177, 187, 84);
  padding-top: 3px;
}

.navtop ul{
  display: inline-flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  gap: 55px;
  padding: 0 20px 0 20px;
}

.navtop li{
  position: relative;
  padding-bottom: 20px;
  width: 60px;
}

/* main */

.main {
    background-color: rgb(227, 223, 187);
}

.dividerbar {
    border-style: solid;
    border-width: 3px;
    border-color: rgb(177, 187, 84);
}

/* footer */

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    background-color: rgb(214, 120, 16);
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}

footer ul{
  display: inline-flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px 0 20px;
}

footer li{
  position: relative;
  width: 60px;
}

/* footer animation? effect? */
.contactbutton {
  transition: 0.2s;
}

.contact:hover .contactbutton {
  opacity: 0.3;
}

.contact .contactbutton:hover {
  opacity: 1;
}