:root {
	--sans-serif: "Sans-Serif-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sans-serif-bold: "Sans-Serif-Bold", "Sans-Serif-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--light-blue: #D7DDE0;
	--transition-easing: ease-out;
	--transition-timing: .2s;
}

	html {
		font-size: 62.5%;
	}
	
	body {
		font-family: var(--sans-serif);
		font-weight: lighter;
		font-size: 1.6rem;
		line-height: 1;
		color: var(--light-blue);
	}
	
	h1 {
		font-family: var(--sans-serif-bold);
		font-weight: 400;
		font-size: 2.5rem;
		line-height: 1;
	}
	
	h2,
	h3 {
		font-family: var(--sans-serif-bold);
		font-weight: 400;
		font-size: 1.6rem;
		line-height: 1;
	}
	
	a {
		font-family: var(--sans-serif);
		font-weight: lighter;
		color: var(--light-blue);
		text-decoration: none;
		display: inline-block;
		transition: var(--transition-timing) var(--transition-easing);
	}
	
	a.underline {
		text-decoration: underline;
	}
	
	a:hover {
		color: #fff;
	}
	
	#wrapper {
		position: relative;
		width: 100%;
		min-width: 37.5rem;
		height: 100dvh;
		min-height: 50rem;
		padding: 4rem;
		background-image: url(assets/images/wsa-coming-soon-bg.webp);
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	#container {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10rem;
	}
	
	#content-1 {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
	}
	
	#content-1 svg {
		width: 80%;
		max-width: 46rem;
		height: auto;
		fill: var(--light-blue);
	}
	
	#content-1 img {
		width: 80%;
		max-width: 46rem;
		height: auto;
	}
	
	#content-2 {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 3rem;
	}
	
	.p {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: .5rem;
	}
	

@media only screen and (min-width: 600px) and (min-height: 740px) {

	h1 {
		font-size: 3rem;
	}
	
	#wrapper {
		padding: 5rem;
	}
	
	#content-1 {
		gap: 3rem;
	}
	
	#content-2 {
		position: absolute;
		bottom: 5rem;
		left: 0;
		gap: 5rem;
	}
	
}