.forecast-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.forecast-weather
		background: rgba(160, 158, 151, 0.7)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 350px
		height: 350px
		.content
			font-size: 1.6rem
			font-family: cursive
			position: absolute
			top: 60%
			left: 50%
			transform: translate(-50%, -50%)
			text-align: center
			color: #ccc
			span
				display: block
			.city-name
				margin-bottom: 8px
				font-size: 1.8rem
			.condition-text
				margin-top: -9px
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

.forecast-weather-container
	height: 100%
	width: 100%;
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.forecast-weather
		display: flex
		padding: 50px
		font-size: 1.6rem
		font-family: cursive
		position: absolute
		top: 60%
		left: 50%
		transform: translate(-50%, -50%)
		text-align: center
		color: #ccc
		span
			display: block
		.city-name
			margin-bottom: 8px
			font-size: 1.8rem
		.condition-text
			margin-top: -9px
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

Update style for forecast container
Update style for forecast container
