html, body {
height: auto !important;
overflow-y: auto !important;
}
body {
font-family: 'Merienda', cursive;
background: #000C16;
color: #006e99;
margin: 0;
text-decoration: none;
flex-direction: column;
cursor: pointer;
} 

a {
    text-decoration: none !important;
}

 h1 {
 color: #006e99;
 text-align: center;
 font-size: 40px;
}      
 h2 {
 color: #006e99;
 text-align: center;
 font-size: 20px;
 text-decoration-color: #000C16;
 text-decoration-line: underline;
 margin-top:0px;
} 
 h3 {
 text-align: left;
 text-decoration: none;
 margin-top:1px; font-size: .8em;
} 
 h4 {
 text-align: center;
 text-decoration: none;
 font-size: .8em;
}
 h5 {
 text-align: center;
 font-size: 1.00em;
 text-decoration: none;
 color: #006e99;
}
 h6 {
 text-align: center;
 font-size: 1.00em;
 text-decoration:
 none; color: #006e99;
}
 p{
 color: #006e99;
 font-size: .8em;
 text-decoration:
 none; margin-top:0px
}
 hr{
 border: 1px solid #006e99;
}
.fade-in {
opacity: 0;
transition:
opacity 0.8s ease-in;
}
.fade-in.loaded {
opacity: 1;
}
.modal.fade-in {
animation: fadeIn 0.4s ease forwards;
}
 @keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }}
.zoom {
padding: 50px;
background-color: green;
transition: transform 1.9s;
width: 200px;
height: 200px;margin: 0 auto;
}
.zoom:hover {-ms-transform: scale(1.5);-webkit-transform: scale(1.5);transform: scale(1.5);}

.subs a {
font-size: 28px !important;
cursor: pointer;text-decoration:none;
color: #FFFFCD;
} 
.dashboard-container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {margin-bottom: 20px;}
label {display: block; margin-bottom: 5px; color: #006e99;}
#modal-select {
-moz-appearance: none;
appearance: none;
padding: 14px;
font-size: 24px;
text-decoration: none;
color: #555;
border: 1px solid #999;
border-radius: 10px;
background-color: rgba(0, 12, 22, 0.9);
outline: none;
width: 50px;
position: fixed;
top: 86px;
right: 25px;
}
  #modal-select:hover {
  background-color: #000C16;
  border: 2px solid #0056B3;
  border-radius: 8px;
}   
  .modal-content form label,
  .modal-content form input,
  .modal-content form select {
  margin-bottom: 20px;
  font-size: 18px;
  border-radius: 6px;
}
.upload-photo-button,
.upload-video-button{
 display: block;
margin: 20px 0;
margin-left: 10px;
padding: 10px 20px;
background-color: #00FF00;
color: #006e99;
font-size: 18px;
border: 1px solid #999;
border-radius: 16px;
cursor: pointer;
 } 
 input[type=email],
 input[type=album],
 input[type=password],
 input[type=submit],
 input[type=button],
 input[type=send]{
 padding: 8px;
 margin-bottom: 10px;
 border:1px solid #006e99;
 border-radius: 8px;
 color: #eee;
 background-color: #000C16;
 
 background: linear-gradient(90deg, #ff00ff, #00eaff);
  border: none;
  
  font-weight: bold;
 
  
  cursor: pointer;
  transition: 0.15s;
 
 }
 input[type=submit],
 input[type=button] {
 background-color: #000C16;
 color: #006e99;
 cursor: pointer;
 }
 input[type=submit]:hover,
 input[type=button]:hover {
 background-color: #000C16;
 border: 2px solid #0056B3;
 transform: scale(1.02);
 box-shadow: 0 0 12px rgba(0,255,255,0.4);
 
 }
 textarea {
 resize: vertical;
 min-height: 18px;
 color: #CCFFFF;
 background-color: #000C16;
 width: calc(90% - 10px);
 }
 input[type="file"]{
 padding: 10px;
 border: 1px solid #0056B3;
 border-radius: 8px;
 background-color: #000C16;
 color: #FFF;
 font-family: 'Merienda', sans-serif;
 cursor: pointer;
 width: 100%;
 box-sizing: border-box;
 transition: background-color 0.3s ease;
 }
 input[type="file"]::file-selector-button {
 padding: 8px 16px;
 border: none;
 border-radius: 6px;
 background-color: #000C16;
 color: #999;
 font-weight: bold;
 cursor: pointer;
 transition: background-color 0.3s ease;
 }
 input[type="file"]::file-selector-button:hover { background-color: #0000FF;}
 input[type="text"]{
 padding: 10px;
 border: 1px solid #006e99;
 border-radius: 8px;
 background-color: #000C16;
 color: #eee;
 font-family: 'Merienda', sans-serif;
 cursor: pointer; width: 100%;
 box-sizing: border-box;
 transition: background-color 0.3s ease;
 }
 input[type="text"]::file-selector-button {
 padding: 8px 16px;
 border: none;
 border-radius: 6px;
 background-color: #000C16;
 color: #999;
 font-weight: bold;
 cursor: pointer;
 transition: background-color 0.3s ease;
 }
 input[type="text"]::file-selector-button:hover {
 background-color: #0000FF;
 }      
 .logout-link a {
 text-decoration: none;
 color: #006e99;
 }
 .logout-link a:hover {
 text-decoration: underline;
 }
 .login-box,
 .register-box {
 width: 320px;
 margin: 0 auto;
 margin-top: 50px;
 padding: 20px;
 border: 1px solid #006e99;
 border-radius: 5px;
 background-color: #000C16;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 .login-box h2,
 .register-box h2 {
 text-align: center;
 }          
 .back-button {
 display: inline-block;
 padding:4px  22px;
 margin-bottom: 2.2rem;
 text-decoration: none;
 color: #999;
 text-align: center;
 font-size: 2.4rem;
 margin-top:-10px;
 margin-left: 25px;
 border: 1px solid #006e99;
 border-radius: 10px;
 cursor: pointer;
 }
 .back-button:hover,
 .create-album-button:hover,
 .upload-photo-button:hover,
 .button:hover,
 .logout-button:hover,
 .modal-button:hover,
 .upload-video-button:hover {
  background-color: #000C16;
  border: 2px solid #0056B3;
 }     
 .login-create-album-buttons-container {
 display: flex;
 justify-content: flex-end;
 margin-right: 26px;
  }
 .create-album-button{
 display: block;
 margin: 20px 0 0 26px;
 padding: 10px 20px;
 background-color: rgba(0, 12, 22, 0.1);
 color: #FFFFCD;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 border: 1px solid #999;
 border-radius: 8px;cursor: pointer;
  }     
  button,
 .button {
 background-color: rgba(0, 12, 22, 0.2);
 border: none;
 color: #999;
 padding: 10px 20px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 28px;
 border: 2px solid #0056B3;
 margin: 20px 0;
 margin-left: 38px;
 border-radius: 10px;
 cursor: pointer;
  }
  button:hover,
 .button:hover {
 background-color: #000C16;
 border: 1px solid #000C16;
 border-radius: 8px;
  } 
 .login-button{
 background-color: rgba(0, 12, 22, 0.2);
 border: none;
 color: #006e99;
 padding: 4px 6px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 28px;
 border: 1px solid #4F738E;
 margin: 20px 0;
 margin-left: 38px;
 border-radius: 10px;
 cursor: pointer;
  }    
 .login-button:hover {
 background-color: #000C16;
 border: 2px solid #006e99;
 border-radius: 8px;
  } 
 .logout-button{
 background-color: rgba(0, 12, 22, 0.2);
 border: none;
 color: #006e99;
 padding: 4px 6px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 28px;
 border: 1px solid #4F738E;
 margin: 20px 0;
 margin-left: 38px;
 border-radius: 10px;
 cursor: pointer;
  }    
 .logout-button:hover {
 background-color: #000C16;
 border: 2px solid #006e99;
 border-radius: 8px;
  }
 .top-right {
 position: absolute;
 top: 26px;
 right: 20px;
  }
 .shared-banner {
 background-color: #000c16;
 color: #999;
 padding: 8px 12px;
 font-weight: bold;
 border-radius: 4px;
 text-align: center;
 margin-bottom: 10px;
  }
 .top-left {
 position: absolute;
 top: 30px;
 left: 20px;
  }
 .dashboard-content {
 padding: 20px;
  }
 .album-thumbnails {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 margin-top: 20px;
 color: #006e99;
  }
 .album-thumbnail {
 margin: 10px;
 text-align: center;
 position: relative;
  }
 .overlay-container {
 position: relative;
 display: inline-block;
  }
 .album-thumbnail img {
 max-width: 100%;
 height: auto;
 padding: 20px;
 border: 1px solid #999;
 border-radius: 5%;
  }
 .album-name-overlay {
 position: absolute;
 top: 70%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: #FFFFCD;
 font-size: 16px;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.6);
 padding: 5px;width: 60%;
 box-sizing: border-box;
 border-radius: 5px;
  }
 .welcome-container {
 display: flex;
 align-items: center;
 margin-top: 30px;
  }
 .welcome-container div{
  margin-right: 10px;
  } 
 .avatar {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid #ddd;
  } 
 img.avatar {
 border: 2px solid #999;
 border-radius: 50%;
 overflow: hidden;
 box-shadow: 0 0 10px 2px #555;
 animation: glow-border 1.5s infinite alternate;
  }
  @keyframes glow-border { 0% {
  box-shadow: 0 0 10px #CCCFFF;
  }
  100% 
  { box-shadow: 0 0 20px #CCCFFF;
  } }
  .video-container,
  .media-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding 12px;
  gap: 10px;
  text-align: center;
  margin-bottom: 20px;
   }
  #slideshowImage {
  transition: opacity 0.2s ease;
   }
  #slideshowContent {
  touch-action: pan-y; /* allow vertical scroll, but keep horizontal swipe */
   }
  .media-item {
  text-align: center;
  margin-bottom: 20px;
   }
  .media-thumb {
  width: 250px;
  height: 170px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #444;
  background-color: #000c16;
  box-shadow: 0 4px 8px rgba(0, 170, 255, 0.3);
  padding: 8px;
   }
  .media-caption {
  margin-top: 8px;
  font-size: 14px;
  color: #ddd;
   }
  .fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
   }
  .fade-in.loaded {
   opacity: 1;
   }     
  .photo-gallery {
   display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding 12px;
  gap: 10px;
   }
  .photo-gallery img {
  margin:12px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #999;
  box-shadow: 0 4px 8px 0 rgba(0, 170, 255, 0.5), 0 6px 20px 0 rgba(0,170,255, 0.3);
  transition: transform 0.2s;
   }
  .photo-gallery img:hover {
  transform: scale(1.05);
   }      
  .video-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: -5mm;
  gap: 26px;
   }      
  .filename-container {
  font-size: 10px;
  text-align: center;
  margin-top: 5px;
   }        
  .image-thumbnail {
  margin: 10px;
   }        
  .image-thumbnail img {
  max-width: 80%;
  height: auto;
  padding: 20px;
   } 

  .image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #999;
  padding 12px;
  gap: 10px;
    } 	  
  .dir-name {
  font-size: 14px;
  color: #999;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
    } 
  .dpixu-gradient{  
  font-weight: 700;
  background: linear-gradient(90deg, #00aaff, #7b2fff, #ff2fb2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
    }
  .video-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 12px;
  gap: 10px;
   }  
  .video-container {
  margin:12px;
  max-height: 170px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #999;
  box-shadow: 0 4px 8px 0 rgba(0, 170, 255, 0.5), 0 6px 20px 0 rgba(0,170,255, 0.3);
   }
  .photo-item {
  text-align: center;
  margin: 10px;
   }
  .file-name {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
   }
  .image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 12px;
  gap: 10px;
  background: #000C16;
  border-radius: 12px;
  transition: all 0.3s ease;
    }
  .image-container:hover img {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
  .image-container h2 {
  transition: color 0.3s ease;
    }
  .image-container:hover h2 {
  color: #333;
    }
  .image-container img{
  margin:12px;
  max-height: 170px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #555;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 170, 255, 0.5);
    }
  .image-container img :hover {
  -ms-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  transition: transform 1.9s
    }  
  .image-overlay {
  position: absolute;
  bottom: 28px;left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 12, 22, 0.1);
  color: #CCFFFF;
  border-radius: 10px;
  text-align: center;
     }
  .image-info {
  font-size: 12px;
  color: #555;
     }
  .overlay-text {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 12, 22, 0.3);
  color: #CCFFFF;
  font-size: 0.7rem;
  padding: 1px;
  border-radius: 5px;
  text-align: center;
     } 
  #loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #0000FF;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;z-index: 9999;
      }       
  @-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg);
  }
  100% { -webkit-transform: rotate(360deg);
  }}
  @keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg);
  }}
 

   #backToTopBtn {
    display: none;
    position: fixed !important;
    right: 25px !important;
    bottom: 25px !important;
    width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #444 !important;
    background: #000c16 !important;
    box-shadow: 0 4px 10px rgba(0,170,255,0.5);
    cursor: pointer;
    z-index: 2147483647 !important;
    isolation: isolate !important;
       }
   #backToTopBtn img {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    margin: auto !important;
      }

   #backToTopBtn:hover {
    box-shadow: 0 4px 15px rgba(0,170,255,0.9);
      }
   .tooltip-container {
   position: relative;
   display: inline-block;
   cursor: pointer;
      }
  .tooltip-container .custom-tooltip {
  visibility: hidden;
  width: 180px;
  background-color: #000C16;
  color: #555;
  text-align: center;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 8px;
  position: absolute;
  z-index: 1001;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
         }
  .tooltip-container:hover .custom-tooltip {
  visibility: visible;
  opacity: 1;
         }
  .album-container {
  display: flex;  
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 60px;
        }
  .album {
  width: 300px;
  text-align: center;
       }
  .album img {
  width: 90%;
  height: auto;
  max-width: 270px;
  max-height: 170px;
  object-fit: cover;
  background-color: #000C16;
  border-radius: 8px;
  border: 1px solid #555;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 170, 255, 0.2), 0 6px 20px 0 rgba(0,170,255, 0.2);
  transition: transform 1.9s;
         }    
  .modal, .logout-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
        }
  .modal-content, .logout-modal-content {
  background-color: #000C16;  
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #555;
  width: 300px;
  border-radius: 10px;
  color: #555;
       } 
  .close {
  position: absolute;
  top: 72px;
  right: 1%;
  color: #006e99;
  float: right; 
  font-size: 58px;
  font-weight: bold;
  cursor: pointer;
   background: linear-gradient(90deg, #ff00ff, #00eaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(0,255,255,0.4);
  transition: 0.2s;
  
       }
  .close:hover,
  .close:focus {
  color: #808080;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 0 18px rgba(255,0,255,0.6);
  transform: scale(1.15);
  
   }
    .modal-content {
    position: relative;
    padding: 20px;
    background-color: #000C16;
    border-radius: 5px;
    max-width: 500px;
    margin: auto;
    }
    .modal-content .close {
    position: absolute;
    top: -6px;
    right: 15px;
    font-size: 54px;
    font-weight: bold;
    color: #006e99;
    cursor: pointer;
    }
    .modal-button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #000C16;
    border: 1px solid #555;
    color: #555;
    border-radius: 5px;
    cursor: pointer;
    }        
    .zoom {
    padding: 50px;
    background-color: green;
    transition: transform 1.9s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    }
    .zoom:hover {
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    }
    .album {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    }
    .album a {
    font-size: 28px !important;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFCD;
    }
    .album img:hover {
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    }     
    .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;width: 100%;
    height: 100%;
    overflow: auto;
    border: 1px solid #999;
    background-color: rgba(0, 12, 22, 0.5);backdrop-filter: blur(8px);
    animation: fadeBackdrop 0.4s ease;
    }              
    .modal-content,
    .photo-modal-content {
    margin: 10% auto;
    padding: 16px 26px;
    border: 1px solid rgba(0,255,255,0.15);
    box-shadow: 0 0 25px rgba(0,255,255,0.15);
    border-radius: 10px;
    width: 80%;
    max-width: 18rem;
    background-color: rgba(0,12,22, 0.5);
    background-image:
    linear-gradient(#000C16, #000C16),
    linear-gradient(90deg, #ff00ff, #00eaff);
    }     
    #login-form {
    text-align: center;
    }
    #login-form label,
    #login-form input {
    display: block;
    margin: 10px;
    }
    #login-form input[type=text],
    #login-form input[type=password] {
    width: 100%;
    padding: 10px;
    border: 2px solid #555;
    }
    #login-form button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none; cursor: pointer;
    } 

.links a {
  background: linear-gradient(90deg, #ff00ff, #00eaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0,255,255,0.4);
  transition: 0.2s;
}

.links a:hover {
  text-shadow: 0 0 14px rgba(255,0,255,0.6);
  transform: scale(1.05);
}







    .photo_count{
    left:30px;
    }              
    .logout-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    }
    .logout-modal-content {
    background-color: rgba(0,12,22, 0.8);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #555;
    width:100%;
    max-width:300px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    }
    .logout-modal-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    }
    .modal-button {
    width: 75px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #555;
    color: #CCFFFF;
    background-color: rgba(0, 12, 22, 0.2);
    font-size: 18px;
    text-align:center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }      
    .image-info,        
    .pdf-info {
     margin: 10px;
     text-align: center;
     }
    .pdf-info a {
    text-decoration: none;
    color: blue;
    cursor: pointer;
     }      
    .footer {
    left: 0;
    bottom: 0;
    width: 100%;
    color: #000C16;
    text-align: center;
    }
    @media screen and (max-width: 768px) {    
    h1{ font-size: 28px;
    height:auto;
    width: 100%; 
    }/* Full-width columns on small screens */
   .help-block {
   display: block;
   margin-top: 5px;
   margin-bottom: 10px;
   color: red;
    }  
   #login-form {
   text-align: center;
    }
   #login-form label,
   #login-form input {
   display: block;
   margin: 10px;
    }
   #login-form input[type=text],
   #login-form input[type=password] {
   width: 100%;
   padding: 10px;
   border: 2px solid #808080;
    }
   #login-form button {
   background-color: #4CAF50;
   color: #ccffff;
   padding: 10px 20px;
   border: none; 
   cursor: pointer;
    } 
   .login-button-container {
   position: absolute;
   top: 52px;
   right: 45px;
   border-radius: 8px;
    }
   .photo_count{
   left:30px;
    } 
   .login-button-container {
   position: absolute;
   top: 96px;
   right: 100px;
    }
   .logout-button-container {
   position: absolute;
   top: 66px;
   right: 20px;
    }        
   .logout-button {
   background-color: #000C16;
   border: none;
   color: #ccffff;
   padding: 10px 20px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 20px;
   border: 1px solid #555;
   margin: 20px 0;
   margin-left: 24px;
   border-radius: 10px;
   cursor: pointer; 
    }       
   .media-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
    }      
   .image-info,.pdf-info {
   margin: 10px;
   text-align: center;
    }
   .pdf-info a {
   text-decoration: none;
   color: blue;
   cursor: pointer;
    }  
    pdf-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 12px;
    } 
   #pdf-modal .modal-content {
   max-width: 100%;
   overflow: auto;
   padding: 20px;
    }
   #pdf-canvas {
   width: 100%;
   height: auto;
   display: block;
    }
   #pdf-modal {
   display: none;
    } /* Keep hidden initially */
   #pdf-modal.show {
   display: block;
    }
   .video-container video {
   max-width: 270px;
   max-height: 180px;
   border-radius: 10px;
    }
   .video-overlay {
   position: absolute;
   bottom: 12px;
   left: 50%;
   ransform: translateX(-50%);
   background-color: rgba(0, 0, 0, 0.7);
   color: #FFFFCD;
   padding: 5px 10px;
   font-size: 18px;
   border-radius: 10px;
   text-align: center;
    }
   .video-info {
   padding: 0px;
   font-size: 12px;
   color: #FFFFCD;
    }       
   .video-modal-content {
   position: relative;
   margin: auto;
   width: 80%;
   max-width: 800px;
   ax-height: 80%;
   padding: 20px;
    }       
   #video-modal {
   display: flex;
   position: fixed;
   z-index: 999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgba(0, 0, 0, 0.9);
    }  
    input[type=text], select {
    width: 100%;
    padding:6px 10px;
    margin: 6px 0px;
    font-size: 22px;
    display: inline-block;
    border: 1px solid #555;
    border-radius: 4px;
    box-sizing: border-box;
    }
    input[type=password], select {
    width: 100%;
    padding:6px 10px;
    margin: 8px 0;
    font-size: 22px;
    display: inline-block;
    border: 1px solid #555;
    border-radius: 4px;
    box-sizing: border-box;
    }
    input[type=file], select {
    width: 100%;
    padding:6px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #555;
    border-radius: 4px;
    box-sizing: border-box;
    } 
    input[type=submit], select {
    width: 100%;
    padding:6px 10px;
    margin: 8px 0;
    font-size: 22px;
    display: inline-block;
    border: 1px solid #1555;
    border-radius: 4px;
    box-sizing: border-box;
    } 
    @media screen and (max-width: 768px)and (max-width: 1024px) {
    body {
    background-color: #000C16;
    font-size: 16px;
    height:auto;
    width: 100%;}
    }
    @media screen and (max-width: 320px) {body {background-color: #000C16;font-size: 16px;height:auto;width: 100%;}}
    @media screen and (max-width: 768px) { h1 {font-size: 4vw;}}
/* --- Smooth hover for all buttons --- */
    button,
   .button,
   input[type=button],
   input[type=submit] {transition: all 0.3s ease !important;}
   button:hover,
   .button:hover,
   input[type=button]:hover,
   input[type=submit]:hover {box-shadow: 0 0 10px #00BFFF;border-color: #00BFFF;transform: scale(1.03);}

/* --- Picture frame hover for images --- */
   .image-container img,
   .media-container img,
   .media-container video,
   .pdf-thumb {
   transition: all 0.4s ease !important;
   box-shadow: 0 0 6px rgba(0, 153, 204, 0.3);
   border-radius: 8px;
    }
   .image-container img:hover,
   .media-container img:hover,
   .media-container video:hover,
   .pdf-thumb:hover {
   transform: scale(1.05);
   border-color: #00BFFF;
   box-shadow: 0 0 16px #00BFFF;
    }

/* --- Gentle modal fade-in  --- */
   .modal-content {
   transition: transform 0.3s ease, opacity 0.3s ease;
    }
   .modal[style*="display: block"] .modal-content {
   opacity: 1;
   transform: translateY(0);
    }
   .modal:not([style*="display: block"])
   .modal-content {
   opacity: 0;
   transform: translateY(-10px);
    }
   .top-right {
   position: absolute;
   top: 10px;
   right: 10px;
    }
   .modal {
   display: none;
   position: fixed;
   top: 0;
   left:0;
   width: 100%; 
   height: 100%;
   background: rgba(0,0,0,0.6);
   z-index: 10000;
    }
   .modal-content {
   background: #111;
   margin: 10% auto;
   padding: 20px;
   border-radius: 8px;
   width: 300px;
   color: #fff; 
    }
   .close {
   float: right;
   font-size: 28px;
   cursor: pointer;
    }
   .image-container { 
   text-align: center; 
   margin: 5px; 
    }
   .image-container img { 
   border-radius: 10px;
   border: 2px solid #555;
   width: 250px;
   height: 200px; 
    }
   .image-container h2 {
   margin: 5px 0;
   font-size: 18px;
    }
   .footer {
   text-align: center;
   font-size: 12px;
   color: #0086BD;
   margin: 20px 0;
  }       
   .weather-bar {
   display: flex;
   flex-wrap:
   wrap; gap: 6px;
  }/* optional spacing */

/* Mobile breakpoint */
@media (max-width: 600px) {

  .weather-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .top-right {
    flex-direction: column;
    align-items: flex-start;
  }

  #slideshowContent button {
    display: none !important;
  }

}
    
 /*  Compact Mode for Mobile */
@media (max-width: 380px) {
  .top-right {
    top: 8px;
    right: 8px;
    gap: 6px; /* tighter spacing */
  }

  .top-right button {
    padding: 4px 6px !important; /* smaller buttons */
    border-radius: 5px !important;
  }

  .top-right button i {
    font-size: 16px !important; /* smaller FontAwesome icons */
  }

  .top-right button img {
    width: 20px !important;
    height: 22px !important; /* smaller image icons */
  }
}