@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');

	*{
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}

	html{
		box-sizing: border-box;
		font-family: 'Roboto', sans-serif;
		font-size: 16px;
		font-weight: 300;
		margin: 0px;
		padding: 0px;
	}
	
	img{
		padding-top:10px;
		width: 80%;
	}
	
	#message{
		width: 100%;
		height: 60px;
		padding-top: 20px;
		padding-bottom: 20px;
		font-size: 20px;
		font-weight: 500;
		background-color: #FE9FF1;
		color:white; 
	}
	
	.error{
		color:red;
	}
	
	.container{
		max-width: 800px;
		margin-right: auto;
		margin-left: auto;
		padding: 0px 20px 1px 20px;
		box-sizing: border-box;
	}
	
	h3{
		color: #EA75D9;
		margin-bottom:15px;
	}
	
	input{
		margin:8px 0px 20px 0px;
		padding: 8px;
		font-size: 16px;
		width: 100%;
		border: 1px solid gray;
		box-sizing: border-box;
	}

	button{
		background-color: #FE9FF1;
		border-radius: 3px 3px 3px 3px;
		color: white;
		margin-top: 20px;
		padding: 10px;
		border: none;
		box-sizing: border-box;
		font-size: 16px;
		width: 100%;
	}
	
	.small{
		font-size: 14px;
		color:#EA75D9;
	}
	
	.registry{
		margin-bottom: 20px;
	}
	
	.info{
		margin-bottom: 20px;
	}
	
	.rsvp{
		margin-bottom: 20px;
	}

@media screen and (min-width: 600px) {
	
	img{
		padding-top:10px;
		width: 50%;
	}
	
	button{
		border-radius: 3px 3px 3px 3px;
		color: white;
		margin-top: 20px;
		padding: 10px;
		border: none;
		box-sizing: border-box;
		font-size: 16px;
		width: 20%;
	}

}