@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');

#clock {
	text-align: center;
	font-family: "Doto", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 900;
	font-variation-settings: "ROND" 0;
	margin: 30px;
}

#date {
	font-size: 2rem;
	background: linear-gradient(-20deg, rgb(58, 180, 64) 0%, rgb(24, 209, 24) 50%, rgb(69, 252, 145) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#time {
	font-size: 6rem;
	display: inline-block;
	min-width: 80%;
	padding-inline: 20px;
	border: 1px solid #888;
	box-shadow: inset 0 0 15px #888;
	background: linear-gradient(-20deg, rgb(58, 70, 180) 0%, rgb(29, 107, 253) 50%, rgb(69, 225, 252) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#watch {
	text-align: center;
	margin: 30px;
	font-family: "Doto", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 900;
	font-variation-settings: "ROND" 0;
}

#watch_time {
	font-size: 6rem;
	display: inline-block;
	min-width: 80%;
	padding-inline: 20px;
	border: 1px solid #888;
	box-shadow: inset 0 0 15px #888;
	background: linear-gradient(-20deg, rgb(58, 70, 180) 0%, rgb(29, 107, 253) 50%, rgb(69, 225, 252) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.buttons {
	margin: 30px;
}

.button {
	position: relative;
    overflow: hidden;
    border-radius: 3px;
    text-decoration: none;
    max-width: 300px;
    margin: 10px 20px;
    padding: 10px 20px;
    font-family: "Noto Sans Japanese";
    text-align: center;
    line-height: 1.8;
    text-decoration: none;
    font-weight: 500;
    outline: 0cap;
	border: 0px;
}

.button[disabled='false'] {
	background: rgb(165, 201, 154);
	color: rgb(165, 201, 154);
}

.button[disabled='true'] {
	cursor: not-allowed;
	background: rgb(123, 150, 115);
	color: rgb(123, 150, 115);
}