body {font-family: 'Merienda';background: #000C16;color: #006e99;height: 100%;margin: 0;text-decoration: none;flex-direction: column;cursor: pointer;} 
 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; }
     p1{color: #006e99; font-size: .7em; text-decoration: none; margin-top:0px}
    p2{color: #034d24;}
   p3{color: #006e99; font-size: 1.0em;} 
  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 #999; border-radius: 8px; color: #eee; background-color: #000C16;}
    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;}
    textarea {resize: vertical;min-height: 18px;color: #CCFFFF; background-color: #000C16; width: calc(90% - 10px);}
    input[type="file"]{padding: 10px;border: 1px solid #999;border-radius: 8px;background-color: #FFF;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 #999;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: 1px 14px;margin-bottom: 2.2rem;text-decoration: none;color: #999; text-align: center;font-size: 2.8rem;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: 1px solid #999;margin: 20px 0;margin-left: 38px;border-radius: 10px;cursor: pointer;}
     button:hover,
     .button:hover { background-color: #000C16; border: 2px solid #0056B3;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: 20px; 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; }/* Adjust the margin-top as needed */
     .welcome-container div{margin-right: 10px;} /* Adjust spacing as needed */
     .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; } }
     .media-container {display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;}
     

     .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;}
     .video-container,.media-container {display: flex;flex-wrap: wrap;justify-content: center;align-items: center; padding 12px;gap 10px;}
     .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;} 	  
     .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: #9BD8ED;}
     .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;bottom: 20px;right: 30px;z-index: 99;font-size: 18px;border: 1px solid #999;outline: none;background-color: #000C16;color: #CCFFFF;cursor: pointer;padding: 15px;border-radius: 8px;}
      #backToTopBtn:hover {background-color: #000C16;border: 2px solid #0056B3;}
    .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;}
    .top-right {position: absolute;top: 60px;right: 20px;}
    .modal, .logout-modal {display: none;position: fixed;z-index: 1000;left: 0; top: 0; width: 100%; height: 100%;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;}
    .close:hover,
    .close:focus {color: #808080; text-decoration: none; cursor: pointer;}
    .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: #999; 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 #999;border-radius: 10px;width: 80%;max-width: 18rem;background-color: rgba(0,12,22, 0.5);}     
      #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;} 
       .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%;transform: 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;max-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;}
@media (max-width: 600px) {.top-right {flex-direction: column;align-items: flex-start;}
}