@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'Garlic Shrimp Demo';
    src: url('GarlicShrimpDemoRegular.eot');
    src: url('GarlicShrimpDemoRegular.eot?#iefix') format('embedded-opentype'),
        url('GarlicShrimpDemoRegular.woff2') format('woff2'),
        url('GarlicShrimpDemoRegular.woff') format('woff'),
        url('GarlicShrimpDemoRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Subtitle Font */

@font-face {
    font-family: 'Gange DEMO';
    src: url('GangeDEMO-Regular.eot');
    src: url('GangeDEMO-Regular.eot?#iefix') format('embedded-opentype'),
        url('GangeDEMO-Regular.woff2') format('woff2'),
        url('GangeDEMO-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Body Font */

@font-face {
    font-family: 'Soda Land';
    src: url('SodaLand.eot');
    src: url('SodaLand.eot?#iefix') format('embedded-opentype'),
        url('SodaLand.woff2') format('woff2'),
        url('SodaLand.woff') format('woff'),
        url('SodaLand.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Font for Quotes */


/* Font Families */

html {
	background-size: 100% 100vh;
}

body {
	background-image: url("../images/background_image_04.png");
	background-size: 100% 100vh;
	background-position: fixed;
	background-repeat: no-repeat;
	background-color: beige;
}


.home-button-01 { 
	position: absolute;
	/* background-color: red; */
	top: 2em;
	right: 1.55em;
	min-height: 160px;
	width: 122px;
}
/* controls the placement of the postage stamp */
	.box-01 { 
		/* background-color: blue; */
		min-height: 160px;
		width: 120px;
	} 
/* controls the size of the postage stamp INSIDE of "home-button-01" */
	.home-button { 
		background-image: url("../images/stamp_home_01.svg");
		position: center;
		background-size: cover;
	}
/* the postage stamp images INSIDE of "box-01" */

blockquote {
	font-family: 'Soda Land';
	transform: rotate(-20deg);
	margin-top: -4.5em;
	position: absolute;
	font-size: 20px;
	line-height: .5em;
	text-align: center;
	margin-left: 1.25em;
	z-index: 1005;
}

.scaled-blockquote-01 {
	font-size: 30px;
	margin-left: -1em;
}
.scaled-blockquote-02 {
	font-size: 30px;
	margin-left: 1.5em;
}

section .cover-image-01 {
	position: absolute;
	min-height: 300px;
	width: 400px;
	margin-top: -11em;
	margin-left: 3.5em;
	z-index: 1000;
	/* border: 3px dashed black; */
}
	section .box-02 {
		min-height: 595.5px;
		width: 555px;
		margin-left: 1.5em;
	}
	section .cover-image {
		background-image: url("../images/cover_image_02.png");
		position: center;
		background-size: 100%;
		background-repeat: no-repeat;
		mix-blend-mode: 100% normal;
	}

section .square-01 {
    background-color: #FED9B8;
    mix-blend-mode: multiply;
    height: 410px;
    width: 500px;
    margin-top: -3em;
    margin-left: 6em;
	position: absolute
}
/* Colored Block BEHIND Cover Image */

/* To: */
h1 {
	font-size: 38px;
    color: #0081A7;
    font-family: 'Garlic Shrimp Demo';
    text-transform: uppercase;
    text-align: left;
	position: absolute;
	margin-left: 20em;
	margin-top: 2em;
}

	.semi-colon-01 {
		font-family: 'Gange DEMO';
		font-size: 35px;
	}
/* To: */


/* Subtitle */
h2 {
	font-size: 30px;
    color: #0081A7;
    font-family: 'Garlic Shrimp Demo';
    text-transform: uppercase;
    text-align: left;
	line-height: .30em;
	display: block;
	margin-left: 28em;
	margin-top: 3.5em;
}

	.and-symbol-01 {
		font-family: 'Gange DEMO';
	}

		.line-01 {
			line-height: 1px;
		}
/* Subtitle */


/* From: Section */
h3 {
	position: absolute;
	line-height: 0;
	margin-top: -23em;
	margin-left: 1em;
	font-family: 'Garlic Shrimp Demo';
    text-transform: uppercase;
	color: #F07168;
}

#from {
	font-size: 25px;
    color: #0081A7;
    font-family: 'Garlic Shrimp Demo';
    text-transform: uppercase;
	padding-bottom: 5px;
}

.semi-colon-02 {
	font-family: 'Gange DEMO';
	font-size: 30px;
}

.numbers {
	font-family: 'Gange DEMO';
	font-size: 21.5px;
}
/* From: section */


body main p{
	font-family: 'Gange DEMO';
	font-size: 1.15rem;
	display: block;
	/* background-color: blue; */
	float: right;
	text-align: left;
	margin: 0 8em 1.5em 45.5em;
	padding: 5px;
}

header img {
	width: 25%;
	height: auto;
	display: flex;
	margin: 45px auto;
	padding-top: .5em;
	object-fit: contain;
	float: center;
}

.navigation {
	float: right;
	margin: 0 5em 0 0;
}
.navigation ul {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	text-align: center;
}

.navigation ul li {
	margin-left: .25em;
	margin-right: .25em;
}
	.navigation ul li a:hover {
		color: #00AFB9;
		border: 3px solid #00AFB9;
	}

	.navigation ul li a:active {
		color: #0081A7;
		border: 3px solid #0081A7;
	}

.navigation ul li a{
    font-family: 'Garlic Shrimp Demo';
    font-size: minmax(50px);
    color: #F07167;
    border: 3px solid #F07167;
    text-decoration: none;
    border-radius: 30px;
    padding: .80em 1.5em 0em 1.5em;
    letter-spacing: .5px;
}


/*FOOTER : Social Media Links: START */
footer {
	/* background-color: blue; */
	width: 325px;
	position: absolute;
	margin-left: 1em;
	margin-top: 16em;
	display: flex;
}

/* Tiktok Icon */
footer .tiktok {
	min-height: 40px;
	width: 40px;
	padding-right: 5px;
}
	.box-icon-01 {
		min-height: 40px;
		width: 40px;
	}
	.tiktok-icon {
		background-image: url("../images/tiktok_icon_01.svg");
		position: center;
		background-size: cover;
	}

/* Twitter Icon */
footer .twitter {
	min-height: 40px;
	width: 40px;
	padding-right: 5px;
}
	.box-icon-02 {
		min-height: 40px;
		width: 40px;
	}
	.twitter-icon {
		background-image: url("../images/twitter_icon_01.svg");
		position: center;
		background-size: cover;
	}

/* Instagram Icon */
footer .instagram {
	min-height: 40px;
	width: 40px;
	padding-right: 5px;
}
	.box-icon-03 {
		min-height: 40px;
		width: 40px;
	}
	.instagram-icon {
		background-image: url("../images/instagram_icon_01.svg");
		position: center;
		background-size: cover;
	}

/* Twitch Icon */
footer .twitch {
	min-height: 40px;
	width: 40px;
	padding-right: 5px;
}
	.box-icon-04 {
		min-height: 40px;
		width: 40px;
	}
	.twitch-icon {
		background-image: url("../images/twitch_icon_01.svg");
		position: center;
		background-size: cover;
	}

/* Tumblr Icon */
footer .tumblr {
	min-height: 40px;
	width: 40px;
	padding-right: 5px;
}
	.box-icon-05 {
		min-height: 40px;
		width: 40px;
	}
	.tumblr-icon {
		background-image: url("../images/tumblr_icon_01.svg");
		position: center;
		background-size: cover;
	}

/* Youtube Icon */
footer .youtube {
	min-height: 40px;
	width: 40px;
	padding-right: 5px;
}
	.box-icon-06 {
		min-height: 40px;
		width: 40px;
	}
	.youtube-icon {
		background-image: url("../images/youtube_icon_01.svg");
		position: center;
		background-size: cover;
	}