@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@font-face{font-family:"Basicdots";src:url(../fonts/Basicdots.ttf)format("truetype")}@font-face{font-family:"Charaille AOE";src:url(../fonts/Charaille\ AOE.ttf)format("truetype")}@font-face{font-family:"Digital-Dystopia";src:url(../fonts/Digital-Dystopia.otf)format("opentype")}@font-face{font-family:"DottyShadow";src:url(../fonts/DottyShadow.ttf)format("truetype")}@font-face{font-family:"DS-Digital";src:url(../fonts/DS-Digital.ttf)format("truetype")}@font-face{font-family:"DS-Digital-1";src:url(../fonts/DS-Digital-1.ttf)format("truetype")}@font-face{font-family:"LCD";src:url(../fonts/LCD.ttf)format("truetype")}@font-face{font-family:"LCDMono";src:url(../fonts/LCDMono.ttf)format("truetype")}@font-face{font-family:"LED Dot-Matrix";src:url(../fonts/LED\ Dot-Matrix.ttf)format("truetype")}@font-face{font-family:"Peg Holes";src:url(../fonts/Peg\ Holes.ttf)format("truetype")}@font-face{font-family:"Robo-Clone Two-Tone";src:url(../fonts/Robo-Clone\ Two-Tone.ttf)format("truetype")}@font-face{font-family:"Segmental";src:url(../fonts/Segmental.ttf)format("truetype")}*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",sans-serif}.footer,.header,body{display:flex;align-items:center}body{background-color:#1a1a1a;color:#fff;flex-direction:column;padding:20px;min-height:100vh}.footer,.header{text-align:center;justify-content:space-between;width:100%}.header{margin-bottom:30px}.footer{position:fixed;bottom:0;left:0;padding:5px;background-color:#1a1a1a;box-shadow:0-2px 4px rgba(0,0,0,.1);font-size:xx-small}.timezone-select{margin-top:0;justify-content:center;flex-wrap:wrap}button,select{color:#fff;border-radius:5px;cursor:pointer}select{padding:10px;width:200px;border:2px solid #4caf50;background-color:#2c2c2c}button{padding:10px 15px;background-color:#4caf50;border:0;font-size:1em;transition:background-color .3s}button:hover{background-color:#45a049}.color-picker,.font-picker,.footer-setting,.timezone-select{display:flex;align-items:center;gap:10px}.color-picker label,.font-picker label,.footer-setting label,select{font-size:1.1em}.color-picker input{height:35px;width:50px;border:0;background:0 0;cursor:pointer}.clock-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;width:100%;max-width:3200px;margin:0 auto 30px}.country-clock{background-color:#2c2c2c;border-radius:10px;padding:20px;box-shadow:0 0 15px rgba(0,0,0,.3);text-align:center;transition:transform .3s ease;position:relative;overflow:hidden}.country-clock:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,.5)}.delete-btn{position:absolute;top:10px;right:10px;background-color:transparent;color:#888;font-size:1.5em;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s;padding:0}.delete-btn:hover{color:#fff;background-color:rgba(255,0,0,.7)}.menu,.menu-btn{position:absolute;left:10px}.menu-btn{top:10px;background-color:transparent;color:#888;font-size:1.5em;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s;padding:0}.menu-btn:hover{color:#fff;background-color:rgba(0,0,0,.7)}.menu{display:none;top:40px;background-color:#2c2c2c;border-radius:5px;box-shadow:0 0 15px rgba(0,0,0,.3);z-index:1;min-width:120px}.menu-item{padding:10px;cursor:pointer;transition:background-color .3s;text-align:left}.menu-item:hover{background-color:#4caf50}.country-name{font-size:1.5em;color:#4caf50;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;padding-top:10px}.time-display{font-size:3em;margin-bottom:5px;font-weight:700;transition:color .3s;font-family:"DS-Digital",sans-serif;min-height:1.2em}.time-zone{color:#888;font-size:1.1em;margin-bottom:15px}.date-display{color:#aaa;font-size:1.2em;margin-right:5px}.weekday-display{color:#aaa;font-size:1.2em;margin-left:5px}.date-week-display{display:flex;justify-content:center;align-items:center}.loading{animation:rotate 2s linear infinite;font-size:2em;color:#4caf50}@media (min-width:1200px){.clock-container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media (min-width:1600px){.clock-container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}.social-sharing{text-align:center;background-color:rgba(0,0,0,.7);padding:10px;border-radius:5px}.social-sharing h3{margin-bottom:10px}.social-sharing a{margin:0 5px}.share-button img,.social-sharing img,.switch-language img{width:32px;height:32px;filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%)}.settings-icon{font-size:1.5em;cursor:pointer;margin-left:20px}.settings-popup{display:none;position:absolute;top:60px;left:20px;background-color:#2c2c2c;border-radius:5px;box-shadow:0 0 15px rgba(0,0,0,.3);padding:20px;z-index:1;opacity:.9;border:2px solid #4caf50}.share-button{right:20px;background-color:transparent;border:0;cursor:pointer;padding:0}.share-button img,.switch-language img{width:20px;height:20px}.switch-language:hover{background-color:#45a049}#time-setting-popup,.share-popup{display:none;background-color:#2c2c2c;border-radius:5px;box-shadow:0 0 15px rgba(0,0,0,.3);z-index:1;opacity:.9;border:2px solid #4caf50}.share-popup{position:fixed;top:60px;right:20px}.close-icon{cursor:pointer;font-size:1.5em;margin-right:20px}.pause-btn{position:absolute;bottom:10px;right:10px;background-color:transparent;color:#888;font-size:1.5em;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s;padding:0}.pause-btn:hover{color:#fff;background-color:rgba(0,0,0,.7)}#time-setting-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px}#time-setting-popup h3,.setting-time{font-size:clamp(12px,calc(var(--popup-width, 300)*.05*1px),18px)}#time-setting-popup h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center;margin:10px 0}.setting-time{margin:10px auto}.setting-time input{height:30px;width:clamp(40px,calc(var(--popup-width, 300)*.09*1px),55px);font-size:1.15em;margin-right:5px}.button-new-line{display:block;margin:10px auto;width:100%;text-align:center}