/* 2024 */

@font-face {
	font-family: 'HH2017LStretch';
	src: url('../assets/fonts/Butterfly/HH2017LStretch.eot');
	src: url('../assets/fonts/Butterfly/HH2017LStretch.eot?#iefix') format('embedded-opentype'),
		url('../assets/fonts/Butterfly/HH2017LStretch.woff2') format('woff2'),
		url('../assets/fonts/Butterfly/HH2017LStretch.woff') format('woff'),
		url('../assets/fonts/Butterfly/HH2017LStretch.ttf') format('truetype'),
		url('../assets/fonts/Butterfly/HH2017LStretch.svg#HH2017LStretch') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Bloody';
	src: url('../assets/fonts/Bloody/Bloody.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Bloody-Light';
	src: url('../assets/fonts/Bloody/Bloody-Light.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}



/* new 2024 */

.flexbox {
	display: flex; /* Use flexbox to put items in grid */
	flex-wrap: wrap; /* Items continue on next row rather than off screen */
/*	align-items: flex-start; */
	max-width: 100%;
}

.flexitem {
	flex-basis: 50%; /* Each item gets 50% of its row. */
	padding-right: 18px; /* There is space between items in rows. */
	padding-bottom: 18px; /* There is space between rows. */
	box-sizing: border-box; /* The 50% represents the entire element, not only the content. */
}

.subhead {
	font-size: 1.25em;
	margin-right: 5%;
}

.moonbullet {
	height: 120px;
	margin-top: 60px;
}


a {
	color: white;
}

body {
	height: 100vh;
	background-color: black;
	font-size: 2.5em;
	font-family: Bloody, Arial, sans-serif;
	color: #DDD;
	margin-top: -36px;
	text-decoration: none;
}

footer {
	height: 120px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

h1 {
	text-align: left;
	margin-left: 72px;
}

input[type="submit"] {
	background-color: #000;
	color: red;
	padding: 5px 10px;
	border: none;
	font-size: 48px;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
}

input[type="text"], input[type="email"], select {
	width: 95%;
}

ul {
	margin-block-end: 0;
	padding-left: 0px;
}

.arrowlink {
	color: red;
}

.card {
	background-size: cover;
	background-repeat: no-repeat;
	padding: 12px;
}

.cardlabel {
	font-size: 60px;
	cursor: pointer;
	margin-top: 36px
	margin-bottom: 72px;
	color: red;
}

.cardlabel:hover {
	text-decoration: underline;
}

.center {
	text-align: center;
	font-size: 1.25em;
	margin-left: 10%;
	margin-right: 10%;
}

.copy {
	font-family: Bloody-Light, Arial, sans-serif;
	text-align: center;
}

.current {
	color: red !important;
}

.displaytext {
	font-size: 3.5em;
}

.feature {
	display: flex;
	flex-direction: column;
	text-align: right;
	justify-content: space-around;
	margin-top: 24px;
	padding-right: 144px;
	box-sizing: border-box;
	cursor: pointer;
	filter: grayscale(5%);
	height: 360px; /* */
}

.info {
	margin-top: 18px;
	margin-bottom: 18px;
	font-size: 1.4em;
}

.infoblock {
	text-align: center;
	justify-content: space-around;
}

.logo {
	height: 60px;
	cursor: pointer;
}

.logobox {
	display: inline-block;
}

.navarrow {
	font-size: 6em;
	cursor: pointer;
}

.navbutton {
	color: white;
	display: inline-block;
	text-align: center;
	text-decoration: none !important;
	padding: 12px 24px 12px;
}

.navbutton:hover, a:hover {
	color: red;
	cursor: pointer;
}

.point {
	margin-top: 18px;
}

.rightside {
	text-align: right;
}

.storyimage {
	height: 60vh;
}

.tagline {
	color: red;
	margin-top: -6px;
	margin-bottom: 30px;
}

.textbutton {
	color: red;
	text-align: right;
	text-decoration: none;
}

.textbutton:hover {
	text-decoration: underline;
}

.themetext {
	text-align: left;
	padding-left: 72px;
	font-size: 1.5em;
}

.themeyear {
	display: inline-block;
}

.year {
	margin-top: 10px;
	width: 60px;
	text-align: center;
	cursor: pointer;
}

.yearbox {
	width: 25%;
	display: inline-block;
}

#contactgrid {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 72px;
	margin: 0 25%;
}

#gallery {
	border: 6px solid #000;
	width: 420px;
	height: 420px;
}

#gallerycard {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 60vh;
}

#home {
  display: block;
  margin-left: auto;
  margin-right: auto;
	margin-top: 18px;
	height: 50%;
}

#imagebox {
	position: fixed;
	width: 100%;
	z-index: -1;
	top: 70px;
	background-image:linear-gradient(rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,1));
}

#logobox {
	position: absolute;
	bottom: 20px;
}

#logolist {
	padding-top: 45%;
	display: grid;
	overflow: auto;
	grid-template-columns: 72px auto;
}

#main {
	height: 100vh;
}

#navbar_themes {
	width: 100%;
	position: fixed;
	text-align: center;
	background-color: black;
}

#navbar {
	text-align: center;
}

#navbarmask {
	height: 72px;
}

#selectedimage {
	width: 100%;
}

#selectedlogo {
	margin-top: 360px;
	height: 180px;
}

#selectedtheme {
	top: 75%;
	position: absolute;
}

#selectedtagline {
	margin-left: auto;
}

#sender {
	grid-column-start: 1;
	grid-column-end: 3;
	width: calc(100% - 4px);
	height: 96px;
	box-sizing: border-box;
}

#title {
	text-align: center;
	font-size: 1.5em;
}

@media screen and (orientation: portrait) {
	p {
		font-size: 1.5em;
	}
	.storyimage {
		width: 60vw;
		height: auto;
	}
}