.background{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background: url(/public/images/background.jpg);
	background-position: center;
	background-size: cover;
}

#main{
	text-align: center;
}

#main .phrase{
	margin: 0;
	margin-top: 50px;
	font-size: 36px;
}

#main .caption{
	color: var(--captiontext);
	margin-top: 20px;
	font-size: 20px;
}

#main .design{
	max-width: 500px;
	border-radius: 7.5px;
	margin-top: 30px;
	margin-left: 10px;
	margin-right: 10px;
} 

.intro{
	width: 100%;
	height: 100%;
	text-align: center;
	flex-grow: 1;
}


.intro .intro-info{
	min-height: 100px;
	width: 100%;
}

.intro .intro-info h1{
	color: var(--main);
	font: normal normal 600 96px/1.4em madefor-display-bold,helveticaneuew01-65medi,helveticaneuew02-65medi,helveticaneuew10-65medi,sans-serif;
}

.waves{
	position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
	background: url(/public/images/waves.svg);
        background-position: center;
        background-size: cover;
	opacity: 85%;
}

.center-text{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.center-text h1{
	font-family: arial;
	font-weight: bold;
	font-size: 4vw;
	color: white;
}


.icon {
	width: 32px;
	height: 32px;
	padding: 20px;
	color: #beaa37;
	cursor: pointer;
	transition: 0.1s;
}

.icon:hover {
	opacity: 50%;
}

@media only screen and (min-width: 1000px){
	.center-text h1{
		font-size: 54px;
	}
}