@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Noto Serif SC, sans-serif;
}

#maintitle {
    display: flex;
    flex-direction: column;
    color: #666666;
    justify-content: center;
    align-items: center;
    margin-top: 35vh;
    list-style: none;
    padding-top: 20px;
    padding-bottom: 30px;
    background-color: white;
}

.title {
    font-size: 8vw;
}
 
#header {
    height: 12vh;
}

#body {
    margin-top: 3vh;
    margin-left: 10vw;
}

#catalog {
    margin-right: 28%;
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(210px, 210px)); 
    grid-gap: 10px;
    row-gap: 50px;
    align-items: left;
}

#footer {
    font-size: 10px;
    font-family: Arial, sans-serif ;
    color: #666666;
    transform:scale(1,1.3);
    margin-top: 60px;
    margin-bottom: 30px;
}

#nav {
    list-style-type: none;
    padding: 0;
    margin-left: 10%;
    margin-top: 3vh; 
    display: flex;
    justify-content: left; /* Centering the menu */
    
}

#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 100;
    overflow: hidden;
}

#lightbox img {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
}

#lightbox a {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    font-size: 50px;
    text-decoration: none;
    cursor: pointer;
}

#lightbox a:hover {
    color: rgb(156, 156, 156);
    transform:scale(1,1.5); 
}

#absolutebg-privilegeshoes {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: -1;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

#absolutebg-privilegeshoes img{
    /* auto fit screen? */
    object-fit: fill;
}

li a, .dropbtn {
    position: relative;
    display: inline-block;
    color: #666666;
    text-align: center; /* Center align text */
    text-decoration: none;
    font-size: 5vw;
    padding: 20px 20px;
    background-color: transparent;
    transform:scale(1,0.9); 
}

li a:hover {
    color: #333333;
    transform:scale(1,1.5); 
}

a {
    color: white;
}
a:hover {
    color: rgb(156, 156, 156);
}

#navselected {
    position: relative;
    display: inline-block;
    text-align: center; /* Center align text */
    text-decoration: none;
    font-size: 5vw;
    padding: 20px 20px;
    background-color: transparent;
    transform: scale(1,1.5); 
    color: #333333;
}


.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent;
    padding-left: 0;
    min-width: 160px;
    z-index: 1;
    list-style: none;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-sub-list {
    display: none;
    gap: 60px;
    align-items: center;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: transparent;
    min-width: 10px; /* Adjust width as needed */
    list-style: none;
    justify-content: start;
}

.dropdown-sub:hover > .dropdown-sub-list {
    display: flex;
    image-resolution: 3px;
    gap:60px;
}

.dropdown-sub {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
}

.dropdown-sub-list img {
    transition: transform 0.2s ease-in-out, z-index 0.1s ease; 
    z-index: 0;
    position: relative;
}

.dropdown-sub-list img {
    padding: 0px;
}
.dropdown-sub-list img:hover {
    transform: scale(3); /* Enlarge by 10% on hover */
    transition: transform 0.1s ease-in-out; 
    z-index: 10;
}

.image-container {
    grid-template-columns: (3, 1fr);
    width: 150px;
    height: 100%;
    background-color: rgb(201, 201, 201);
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: left;
    text-decoration: none;
}

.image-container:hover{
    background-color: rgb(114, 114, 114);
}

.image-title {
    font-size: 12px;
    color: #333333;
}

.image-container:hover>.image-title{
    color: #eeeeee;
}

.textparagraph {
    color: #666666;
    margin-right: 10vw;

}

#zoom-image {
    width: 100%;
    height: auto;
    transform-origin: 0 0;
    transition: transform 0.2s ease;
}

#canvas {
    border: 1px solid pink;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
}

#topbtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 4; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #666666; /* Set a background color */
    color: #eeeeee; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    font-size: 18px; /* Increase font size */
  }
  
#topbtn:hover {
    background-color: #333333; /* Add a dark-grey background on hover */
}

#workshorizontalsub {
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* For momentum scrolling on mobile devices */
}

#workshorizontalsub img{
    width: 30vw;
    max-width: 400px;
}

#workshorizontalsub.active {
    cursor: grabbing;
}

#eng-zh {
    font-size: 2.5vw;
    margin-top: 15px;
    cursor: default;
}
.language-select {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transform: scale(1,0.9);
}

.language-select:hover {
    transform:scale(1,2); 
    color: #333333; /* Add a dark-grey background on hover */
}

.language-select:active {
    transform: scale(1.3,1.5);
}

.selected {
    transform:scale(1,2); 
    color: #333333;
    pointer-events: none;
}