@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-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:"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
}