body{
  background: linear-gradient(#04D4F0,#059DC0);
  background-attachment: fixed;
}

html{
	direction: rtl;
}

#container{
	text-align: center;
	padding: 55px;
	color: red;
	font-size: 20px;
	border-radius: 10px;
	border-color: darkcyan;
}
#convert{
	font-size: 25px;
	border-radius: 25px;
	border: 4px solid;
	border-color: darkcyan;
	background-color: gold;
	color: red;
}

#result{
	color: red;
	font-size: 25px;
	border-radius: 10px;
	background-color: gold;
}

#date{
	background-color: gold;
	color: red;
	font-size: 25px;
	border-radius: 25px;
	border: 4px solid;
	border-color: darkcyan;
}

#day{
	background-color: gold;
	color: red;
	font-size: 20px;
	border-radius: 25px;
	border: 4px solid;
	border-color: darkcyan;
}
#month{
	background-color: gold;
	color: red;
	font-size: 20px;
	border-radius: 25px;
	border: 4px solid;
	border-color: darkcyan;
}
#year{
	text-align: center;
	background-color: gold;
	color: red;
	font-size: 20px;
	border-radius: 25px;
	border: 4px solid;
	border-color: darkcyan;
}

.bord{
	text-align: center;
	width:550px ;
	height: 350px;
	border-radius: 25px;
	background-color: #1de2e1;
	margin: 0 auto;
	border: 4px solid;
	border-color: darkcyan;
}

@media screen and (max-width: 720px){
	.bord{
		width: 100%;
	}
	#date{
		width: 280px;
	}

	@media screen and (max-width: 520px){
	.bord{
		width: 100%;
	}
	#date{
		width: 280px;
	}