/********** fonts **********/

	@import url('https://fonts.googleapis.com/css?family=Amaranth&display=swap');

/********** color references **********

	red - 199,35,58

********** media queries **********/
	
	@media only screen and (max-width: 599px) {}
	
	@media only screen and (min-width: 600px) {}

	@media only screen and (min-width: 750px) {}

	@media only screen and (min-width: 990px) {}

	@media only screen and (min-width: 1200px) {}

	@media only screen and (min-width: 1920px) {}

	@media only screen and (min-width: 2500px) {}	

	@media only screen and (min-width: 3500px) {}

	@media only screen and (min-width: 4500px) {}

/**************************************************
	general CSS
**************************************************/
	
	a, a:visited, a:active {
		color: rgb(30,30,30);
		text-decoration: none;
	}
	
	a:hover {
		color: rgb(199,35,58);
	}
	
	:root {
		font-size: 62.5%; /* this percentage makes 1em or 1rem = 10px */
	}
	
		@media only screen and (min-width: 2500px) {
			:root {
				font-size: 70.3125%;
			}	
		}
		
		@media only screen and (min-width: 3500px) {
			:root {
				font-size: 117.1875%;
			}	
		}
		
		@media only screen and (min-width: 4500px) {
			:root {
				font-size: 148.4375%;
			}	
		}
	
	body {
		background-color: rgb(255,255,255);
		color: rgb(30,30,30);
		font-family: 'Amaranth', sans-serif;
	}
	
	body:before {
		background: url("../images/xmas-2560.jpg") top center no-repeat;
		background-size: cover;
		content: "";
		display: block;
		left: 0;
		top: 0;
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: -10;
	}
	
	.svg {
		vertical-align: top;
	}
	
	.body-text {
		font-size: 2.6rem;
	}
	
	.body-text-s {
		font-size: 2rem;
	}
	
	.body-text-xs {
		font-size: 1.6rem;
	}
	
	.body-text-l {
		font-size: 3.4rem;
	}
	
	.body-text-xl {
		font-size: 4.2rem;
	}
	
	.bold {
		font-weight: 900;
	}
	
	.red {
		color: rgb(199,35,58);
	}
	
	.white {
		color: rgb(225,225,225);
	}
	
	.flex-row {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}
	
	.flex-col {
		align-items: center;
		display: flex;
		flex-flow: column;
		flex-basis: 100%;
		flex-grow: 1;
		justify-content: center;
		margin: 0 2rem 2rem 2rem;
	}
	
	.wrapper {
		background: rgba(255,255,255,0.75);
		border-radius: 3rem;
		max-width: 600px;
		width: 100%;
		padding: 2rem;
	}
	
	.text-wrapper {
		text-align: center;
	}

/**************************************************
	header
**************************************************/

	.header {
		margin: 0 auto;
		padding: 1.5rem 0 2.5rem 0;
		text-align: center;
		width: 100%;
	}
	
		@media only screen and (min-width: 750px) {
			
			.header {
				padding: 3rem 0 4rem 0;
			}
			
		}

/**************************************************
	body
**************************************************/

	.main-cont {
		margin: 0 auto;
		max-width: 1920px;
		position: relative;
	}