*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#ffffff;

    overflow-x:hidden;

    font-family:'Be Vietnam Pro', sans-serif;
}

#navbar{

    position:absolute;

    top:5px;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-around;
    align-items:center;

    z-index:1000;
}

#navbar a{

    font-family:'Lost Vietnam';

    font-size:2rem;

    color:#C75739;

    text-decoration:none;
}

#navbar a:hover{

    text-decoration:underline;
}

#nav-middle{

    display:flex;

    justify-content:center;
    align-items:center;
}

#nav-logo{

    width:100px;

    height:auto;

    display:block;
}

#nav-home{

    display:none;
}

#navbar.scrolled{

    position:fixed;

    top:0;

    background:#C75739;

    padding:7px 0;
}

#navbar.scrolled a{

    color:white;
}

#navbar.scrolled #nav-logo{

    display:none;
}

#navbar.scrolled #nav-home{

    display:block;
}

@media (max-width:768px){

    #navbar a{

        font-size:1.25rem;
    }

    #nav-logo{

        width:70px;
    }

}

.archives {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 40px;
}

.archive-project {
  margin-bottom: 60px;
}

p, .project-header {
  margin-bottom: 30px;
  font-family: "Be Vietnam Pro", sans-serif;
}

.project-header h2 {
  margin-bottom: 10px;
  font-family: "Playwrite VN", cursive;
}

.project-header a {
  text-decoration: none;
  color: black;
}

.project-header a:hover {
  color: #c75739;
}

.scroll-gallery {
  display: flex;
  gap: 12px;

  overflow-x: auto;

  padding-bottom: 16px;

  scrollbar-width: auto;
}

.scroll-gallery img {
  height: 180px;
  width: auto;

  object-fit: cover;

  flex-shrink: 0;
}

.scroll-gallery::-webkit-scrollbar {
  height: 10px;
}

.scroll-gallery::-webkit-scrollbar-thumb {
  background: #c75739;
  border-radius: 20px;
}

@media (max-width: 768px) {

  .archives {
    padding: 100px 20px;
  }

  .scroll-gallery img {
    height: 260px;
  }

}