@charset "utf-8";
@keyframes comeout{
	0%{
		opacity: 0;
		transform: translateY(200px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
@media screen and (min-width: 1024px){
.info {
	display: flex;
	align-content: space-around;
    align-items: stretch;
	justify-content: center;
	max-width: 1280px;
	margin: 50px auto;
}

.info-box {
	flex: auto;
	line-height: 1.8em;
	margin: 10px 35px;
	border: 1px solid rgba(220,220,220,0.40);
	border-radius: 12px;
	background: var(--main-back-color);
	-webkit-backdrop-filter: blur(25px);
	backdrop-filter: blur(25px);
	padding: 15px;
	box-shadow: rgba(0,0,0,.25) 0 5px 10px 0;
	animation: comeout cubic-bezier(0.22,0.58,0.12,0.98) 0.4s backwards
}
	
.weather-box{
	padding: 0;
	overflow: hidden;
	display: flex;
	width: 400px;
	padding: 7px;
	flex: none;
	max-width: 560px;
	height: auto;
	-webkit-text-fill-color: var(--main-text-color);
}
.wv-lt-refresh {
    display: none;
}
.weather{
	width: 100%;
	height: 100%;
}

.resource-box{
	max-width: 200px;
    min-width: 125px;
	flex: none;
}
.banner-show{
	display: block;
}
}
@media screen and (max-width: 1023px){
.info {
	display: flex;
	margin-top: 50px;
	flex-direction: column;
	width: 100%;
}
.info-box {
	width: auto;
	height: auto;
	margin: 10px 25px;
	line-height: 1.8em;
	border: 1px solid rgba(220,220,220,0.40);
	border-radius: 20px;
	background: var(--main-back-color);
	-webkit-backdrop-filter: blur(25px);
	backdrop-filter: blur(25px);
	padding: 15px;
	box-shadow: rgba(0,0,0,.25) 0 5px 10px 0;
	animation: comeout cubic-bezier(0.22,0.58,0.12,0.98) 0.4s backwards
}
	
.weather-box{
	overflow: hidden;
	height: auto;
	-webkit-text-fill-color: var(--main-text-color);
}

.resource-box{
	flex: auto;
	width: 100%;
	white-space: nowrap;
}

.banner-show{
	display: none;
}
}

.mobile-show{
	display: flex;
    justify-content: space-around;
}