/* POSITION OPERATONS */






/* PAGE ELEMENTS */
body {
	position: absolute;
	top: 10%;
	transform: translateX(-50%);
	left: 50%;
	  
	width: 80%;
	max-width: 1000px;
	
	margin: 15px 15px 0px 15px; /* TOP RIGHT BOTTOM LEFT */
	
	background-image: url('pines.jpg') !important;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.26), 0px 2px 10px 0px rgba(0, 0, 0, 0.16);
	/*-webkit-box-shadow: 0px 0px 62px 1px rgba(0,0,0,0.47);
	-moz-box-shadow: 0px 0px 62px 1px rgba(0,0,0,0.47);
	box-shadow: 0px 0px 62px 1px rgba(0,0,0,0.47);*/
	-webkit-transition: width 1s ease;  				
    -moz-transition: width 1s ease;  				
    -o-transition: width 1s ease;  				
    transition: width 1s ease;
	
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
main { /* THIS IS THE OUTLINE */
	padding: 1em 1em 3em 1em; /* TOP RIGHT BOTTOM LEFT */
	background-color: rgba(0, 0, 0, 0.5);
}
.main-container { /* https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png */
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	
	flex-direction: row;
	
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
}
.main-item {
	padding: 20px 40px 20px 40px;
	border-radius: 10px;
}




.perk-container { /* https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png */
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	
	flex-direction: column;
	
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	
	justify-content: flex-start;
	align-content: flex-start;
	align-items: normal;
}
.perk-item {
	border-radius: 10px;
	background: rgba(227, 170, 35, 0.25);
	
	/* margin: space around an element's border
	   padding: space between border and the element's content */
	   
	margin: 10px 0px 0px 0px; /* TOP RIGHT BOTTOM LEFT */
	padding: 5px 15px 0px 0px; /* TOP RIGHT BOTTOM LEFT */
		
	vertical-align: middle;
}
.perk-icon {
	height: 30px;
	margin: 0px 15px 5px 15px; /* TOP RIGHT BOTTOM LEFT */
	vertical-align:middle;
}




/* STRUCTURAL ELEMENTS */
hr.pine {
	border-top: 1px solid #47ff52;
	padding: 0px;
	margin: auto;
}






/* FONT STYLES */
.twin-peaks {
    font-family: "OTPI";
	text-align: center;
    font-weight: bold;
    color: #644647;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #47ff52, -1px -1px 0 #47ff52, 1px -1px 0 #47ff52, -1px 1px 0 #47ff52, 0px 1px 0 #47ff52, 1px 0px 0 #47ff52, 0px -1px 0 #47ff52, -1px 0px 0 #47ff52, 4px 2px 0 #333;
}
@font-face {
    font-family: "OTPI";
    src: url("../fonts/OPTINational-Gothic.otf");
}
.retro {
    font-family: "Retro";
	text-align: center;
    font-weight: bold;
    color: #644647;
}
@font-face {
    font-family: "Retro";
    src: url("../fonts/Retro.otf");
}
h1 {
    font-size: 60px;	
    display: block;
    margin-top: 0.40em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h2 {
    font-size: 50px;
    display: block;
    margin-top: 0.50em;
    margin-bottom: 0.50em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h3 {
    font-size: 40px;
    display: block;
    margin-top: 0.7em;
    margin-bottom: 0.7em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h4 {
    font-size: 30px;
    display: block;
    margin-top: 0.7em;
    margin-bottom: 0.7em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h5 {
    font-size: 20px;	
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h6 {
    font-size: 10px;
    display: block;
    margin-top: 0.7em;
    margin-bottom: 0.7em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}




/* ANIMATIONS */