:root {
	--yellow : #FFC700;
	--violet : #8F00E7;
	--night:  #042B6F;
	--virgil:  #F0F0F0;
	--tomat:  #FF4D00;
	--base_width: 36vw;
	--half_base_width: calc(var(--base_width) / 2);
	--page_padding : 16px;
	--double_page_padding : calc(var(--page_padding) * 2);
}

* {
	font-family: 'Outfit', sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-y: hidden;
	font-size: 16px;
}

html {
	background-color: var(--virgil);
}

main {
	padding: var(--page_padding);
	text-align: center;
}

header {
	font-size: 2rem;
	color: var(--tomat);
	font-weight: 700;
	text-align: left;
	top: 0;
	left: 0;
	padding: 2vh 2vw;
}

#carousel-container {
	width: calc(var(--base_width) + 96px); 
	margin-left: calc( 50vw - var(--half_base_width) - var(--page_padding) - 48px);
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	padding-top: 5vh;
}

#dream-container {
	width: var(--base_width);
	height: var(--base_width);
	border-radius: 2vw;
	overflow: hidden;
	/*margin-top: calc(50vh - calc(var(--base_width) - var(--double_page_padding)));*/
	/*margin-left: calc( 50vw - var(--half_base_width) - var(--page_padding));*/
	box-shadow: -15px 15px 15px rgba(4, 43, 11, .2);
}

.owl-item {
	height: 70px !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dream-img {
	width: var(--base_width);
}

.dream-img img {
	width: 100%;
	object-fit: cover;
}

#title-container {
	margin-top: 5vh;
	/*padding: 1.5vh;*/	
	background-color: var(--tomat);
	color: var(--virgil);
	width: var(--base_width);
	height: 8vh;
	border-radius: 8vh;
	/*margin-left: calc(50vw - var(--half_base_width) - var(--page_padding));*/
	overflow: hidden;
	display: flex;
	align-items: center;
}

#dream-title-container {
	display: flex;
	width: var(--base_width);
	background-color: var(--tomat);
}

span.dream-title {
	width: var(--base_width);
	text-align: center;
	color: var(--virgil);
	font-size: 1.8rem;
	vertical-align: top;
}