.top-image-area{
    width: 100%;
    height: 400px;
    background-image: url("https://user-images.githubusercontent.com/94958239/228766816-fc289ce7-8588-4d42-a89d-f1e4fe5dba46.jpg");
    background-position: 50% 20%;
    background-size: cover
    }
    .menu {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #007bff;
    }
    .menuu {
        float: left;
        border-right: 1px solid #bbbbbb;
    }
    .menuu:last-child {
        border-right: none;
    }
    .menuu a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    .menuu a:hover:not(.active) {
        background-color: #a9bce2;
    }
    .active {
        background-color: #12ff91;
    }
.article-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.article {
  width: 30%;
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ccc;
}

.thumbnail {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info {
  margin-top: 10px;
}

.title a {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.subtitle {
  font-size: 1rem;
  color: #777;
}