@charset "UTF-8";
/* CSS Document */
html,body{
	overflow: hidden;
	background-color: #F4F4F4;
	font-family: 'Inter', sans-serif;
	overflow-x: hidden;
	overflow-y: hidden;
	
	
}


nav{
	
	display: flex;
	width: 95vw;
	flex-direction: row;
	justify-content: space-between;
	padding: 1%;
}

.title{
	margin-left: 18%;
	align-items: center;
	justify-content: center;
	width: 60vw;
	position: sticky;
	align-content: space-between;
	text-align: center;
	background-color: #6FD0FF;
	border-radius: 8px;
	padding: 1%;
	box-shadow: 1px 2px 2px 1px grey;
}


.date-time{
	text-align: center;
}


.date{
	display: flex;
	justify-content: space-between;
	padding: 1%;
	
}

.Thu {
	background-color: #FFF4CC;
	border-radius: 25px;
	box-shadow: 1px 3px 2px 1px grey;
	
	
}

.weather{
	margin-top: 10%;
	margin-bottom: 10%;
	position: absolute;
}



.current_weather{
	display: grid;
    align-items: flex-end;
	justify-content: flex-end;
	padding: 2%;
	margin-top: 85%;
	

}


.date-04 ul{
	display: flex;
	flex-direction: row;
	text-align: center;
	width: 90vw;
	height: auto;
	justify-content: space-between;
	position: absolute;
	margin-left: -7%;
	font-size: 2em;
	margin-top: -12%;
	color: #00A7B1;
	
	
	
}

.day-04 ul{
	display: flex;
	flex-direction: row;
	text-align: center;
	width: 85vw;
	justify-content: space-between;
	margin-top: 6%;
	margin-left: -6%;
	position: absolute;
	
}


.date-04 .Select:first-of-type{
	color:#FFC700;
	background-size: 10%;
	border-radius: 25%;
	
}

.day-04 .Select:first-of-type{
	color:#FFC700;

	
}



.hourly-weather{
	text-align: center;
	
	
}



.hourly05-weather{
	text-align: center;
	margin-top: 23%;
	position:absolute;
	justify-content: space-between;
	z-index: -2;
	
}


#Hourly-05{
	width: 100vw;
	height: 100vh;
	top: -600px;
    right: 190px;
	left:0;
	/* toggle display flex */

	flex-direction: column;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	
}




.date-05 ul{
	display: flex;
	flex-direction: row;
	text-align: center;
	width: 90vw;
	height: auto;
	justify-content: space-between;
	position: absolute;
	margin-left: -7%;
	font-size: 2em;
	margin-top: -12%;
	color: #00A7B1;
	
	
	
}

.day-05 ul{
	display: flex;
	flex-direction: row;
	text-align: center;
	width: 85vw;
	justify-content: space-between;
	margin-top: 6%;
	margin-left: -6%;
	position: absolute;
	
}

.navi-bar ul{
	/*background:url("navi_bg.png");*/
	
	width: 95vw;
	justify-content: space-between;
	padding: 2%;
	list-style: none;
	text-align:center;
	text-align-last: justify;
	z-index: 3;
	margin-top: -10%;
	position: sticky;
	
	
}



.box{
	position: absolute;
	width: 45px;
	height: 45px;
	bottom: 15px;
	margin-left: 16%;
	margin-bottom: -2%;
	background-color: #F4F4F4;
	z-index: -1;
	border-radius: 40%;
	
}

.background-box{
	position: absolute;
	width: 96vw;
	height: 60px;
	bottom: 15px;
	left: 0%;
	margin-bottom: -2%;
	background-color: #FCC843;
	z-index: -2;
	border-radius: 30px 30px 0px 0px;
}

.date-05 .Select:first-of-type{
	color:#FFC700;
	background-size: 10%;
	border-radius: 25%;
	
}

.day-05 .Select:first-of-type{
	color:#FFC700;

	
}



.navi-bar05 ul{
	/*background:url("navi_bg.png");*/
	
	width: 95vw;
	justify-content: space-between;
	padding: 2%;
	list-style: none;
	text-align:center;
	text-align-last: justify;
	z-index: 3;
	margin-top: 164%;
	position: sticky;
	
	
}



.box05{
	position: absolute;
	width: 45px;
	height: 45px;
	bottom: 15px;
	margin-left: 16%;
	margin-bottom: -2%;
	background-color: #F4F4F4;
	z-index: -1;
	border-radius: 40%;
	
}

.background-box05{
	position: absolute;
	width: 96vw;
	height: 60px;
	bottom: 25px;
	left: 0%;
	margin-bottom: -2%;
	background-color: #FCC843;
	z-index: -1;
	border-radius: 30px 30px 0px 0px;
}