.current-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.current-weather
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		background: rgba(160, 158, 151, 0.5)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 400px
		height: 400px
		font-size: 1.8rem
		font-family: cursive
		color: #ccc
		margin-bottom: 20px
		.city-name
			margin-bottom: 8px
			font-size: 1.6rem
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

	@media (max-width: 540px)
		.current-weather
			width: 45vh
			height: 45vh

	@media (max-height: 850px)
		.current-weather
			width: 45vh
			height: 45vh

.current-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.current-weather
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		background: rgba(160, 158, 151, 0.5)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 400px
		height: 400px
		font-size: 1.8rem
		font-family: cursive
		color: #ccc
		margin-bottom: 20px
		.city-name
			margin-bottom: 8px
			font-size: 1.6rem
			text-align: center
		.country
			margin-bottom: 10px

	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

	@media (max-width: 540px)
		.current-weather
			width: 45vh
			height: 45vh

	@media (max-height: 850px)
		.current-weather
			width: 45vh
			height: 45vh

Set margin to country in current weather
Set margin to country in current weather
