@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
*{
    font-family: 'Kanit', sans-serif;
}

body{
    /* background-color: #f5f5f5; */
    background-image: url('https://www.extremeit.com/wp-content/uploads/2016/12/white-background-5.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    /* ให้ body มีความสูงอย่างน้อยเท่ากับความสูงของหน้าจอ */

}

.navbar{
    background-color: #031633;
    position: sticky;
    top: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 5px solid rgba(0, 0, 0, 0.25);
    z-index: 9999;
    width: 100%;
    /* margin-bottom: 20px; */
}
.modal{
    z-index: 99999;
}

.card-3, a{
text-decoration: none;
}

.circleactive {
    border-radius: 50px;
    background-color: #1890ff;
    height: 32px;
    width: 32px;
}
.circleactive h3{
    color: rgb(255, 255, 255);
}

.circle {
    border-radius: 50px;
    border: gray 1px solid;
    height: 32px;
    width: 32px;
}
.circle h3{
    color: gray;
}


.preview-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
 }

 .preview-image {
    max-width: 100px;
    max-height: 100px;
    margin-right: 10px;
 }

 .delete-button {
    cursor: pointer;
 }


 .zoom-container {
    overflow: hidden;
  }
  
  .zoom-image {
    transition: transform 0.3s ease-in-out;
  }
  
  .zoomed {
    transform: scale(1.5); /* You can adjust the scale factor as needed */
  }


  
  footer {
margin-top: auto;
padding-top: 20px;
padding-bottom: 20px;
  }