body {
background-image: url('http://dl7.glitter-graphics.net/pub/1319/1319617mp5e5sryl1.gif');
background-attachment: fixed;
background-repeat: repeat;
}

@font-face {
    font-family: 'Inter', sans-serif;    src: url(https://fonts.googleapis.com/font-family: 'Inter', sans-serif;al,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
}

.header {
    display: flex;
    margin: auto;
    justify-content: center;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.nav {
    display: flex;
    background-color: rgba(255, 255, 255, 0.67);
    width: 850px;
        height: 50px;
    margin: auto;
    justify-content: center;
    align-items: center;
      margin-bottom: 20px;
}
.navigation {
    display: flex;
    width: 850px;
    height: 50px;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.navigation ul {
    display: flex;         
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    justify-content: center; 
    gap: 60px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #ac7f5e;
}

.navigation ul li a {
  text-decoration: none;
  color: #ac7f5e;
  }

.main-content {
    display: flex;
    flex-direction: row;
    margin: auto;
    justify-content: space-between;
    width: 850px;
}

.pookie {
    display: flex;
    flex-direction: column;
    width: 220px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.67);
    align-items: center;
    padding: 10px;
    padding-bottom: 0;
    padding-top: 20px;
}

.pookie p{
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    margin-left: 12px;
    color: #ac6c5e;
    font-weight: 600;
}

.guestbook {
  display: flex;
  flex-direction: column;
  align-items: center;
    overflow: scroll;
  overflow-x: hidden;
  width: 600px;
  height: 650px;
  background-color: rgba(255, 255, 255, 0.67);
  padding-bottom: 10px;
  } 
  
.guestbook::-webkit-scrollbar {
  display: none; 
  width: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  }
  
.guestbook::-webkit-scrollbar-thumb {
  background: transparent;
  }  
.guestbook iframe {
    width: 600px;
    height: 600px;
    border: 0;
}



footer {
  position: fixed; 
  bottom: 0;        
  left: 0;
  width: 100%;    
  z-index: 999;      
  padding: 5px 0;
}

footer .webring {
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 600px) {


  
  
  .nav,
  .navigation {
    width: 100%;
    justify-content: center;
  }

  .navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 5%;
  }

.navigation ul li {
  flex: 0 0 20%;
  text-align: center;
}



 .main-content {
    flex-direction: column;
    width: 100%;
    align-items: center;
      overflow-x: hidden;
  }
  
  .pookie {
    margin-bottom: 20px;
    }
    
  .guestbook {
    height: 400px;
    }  
  
  .guestbook iframe {
    width: 350px;
    }
    
    footer {
  position: fixed; 
  bottom: 0;        
  left: 0;
  width: 100%;    
  z-index: 999;      
  margin-bottom: 20px;
  padding: 5px 0;
}

}