@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Luxurious+Roman&family=Merienda:wght@300..900&family=Playwrite+AU+SA:wght@100..400&display=swap');
body {
	margin: 0;
	padding: 0;
	background: #b76e79;
	font-size: 20px;
	/* font-family: "Luxurious Roman", serif; */
	font-family: "Baskervville", serif;
	color: #ffff;
	overflow: auto
}

a {
	color: #000;
	font-size: 14px;
}

#main {
	width: 100%;
}

#wrap {
	position: relative;
	margin: 0 auto;
	width: 1100px;
	height: 680px;
	margin-top: 10px;
}

#text {
	width: 400px;
	height: 425px;
	left: 60px;
	top: 80px;
	position: absolute;
}

#code {
	display: none;
	font-size: 16px;
	line-height: 2.5rem;
}

#clock-box {
	position: absolute;
	left: 60px;
	top: 520px;
	font-size: 28px;
	display: none;
}

#clock-box a {
	font-size: 28px;
	text-decoration: none;
}

#clock {
	margin-left: 48px;
	font-family: "Luxurious Roman", serif;
}

#clock .digit {
	font-size: 60px;
}

#canvas {
	margin: 0 auto;
	width: 1200px;
	height: 680px;
}

#error {
	margin: 0 auto;
	text-align: center;
	margin-top: 60px;
	display: none;
}

.hand {
	cursor: pointer;
}

.say {
	margin-left: 5px;
}

/* .space {
	margin-right: 150px;
} */
.s-digit{	
	font-size: 15px;
}
.time-holder{
	display: flex;
	justify-content: right;
	gap: 10px;
}
#music-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: transparent;
	cursor: pointer;
}

.cd{
	height: 50px;
	width: auto;
	transition: transform 0.3s ease;
}

.spin {
    animation: spin 3s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}