@font-face{ font-family: 'CharlieType'; src: url("../font/CharlieType.otf") format('opentype'); }
@font-face{ font-family: CharlieTypeHeavy; src: url("../font/CharlieType-Heavy.otf");}
@font-face{ font-family: Elegantile; src: url("../font/Elegantile.otf");}

p, h1 {
  color: #E9E4D2;
  font-weight: normal;
}

p {
  font-family: CharlieType;
  color: #E9E4D2;
  font-size: 120%;
}

b {
  font-family: CharlieTypeHeavy;
}

a {
  text-decoration: none;
  color: #DF4A2F;
}

a:hover {
  color: #FFFFFF;
}

h1 {
  text-align: center;
  font-family: Elegantile;
	font-size: 700%;
	margin-block-start: 0.3em;
	margin-block-end: 0.3em;
	line-height: 0.8em;
	text-decoration-line: overline underline;
	text-decoration-style: solid;
	text-decoration-thickness: 5px;
	text-underline-offset: 10px;
}

@media screen and (max-width: 920px) {
  h1 {
    line-height: 0.94em;
  }
}
@media screen and (max-width: 610px) {
  h1 {
    font-size: 400%;
    line-height: 1.03em;
  }
}

img {
	display: block;
	-webkit-user-select: none;
	margin: auto;
	background-color: black;
	transition:background-color 30ms;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.beegbutton {
	border-radius: 20px;
	display: inline-block;
	padding: 10px;
	font-family: CharlieType, Arial, sans-serif;
	font-size: 175%;
	font-weight: bold;
	background-color: #DF4A2F;
	color: #E9E4D2;
	cursor: pointer;
	width: 30%;
	margin-bottom: 2em;
	
	transition: all .2s ease-in-out
}

.beegbutton:hover {
	border-radius: 20px;
	width: 25%;
	
	transform: scale(1.1);
}

.clearfix img {
	overflow-clip-margin: content-box;
	overflow: clip;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.charPic {
	max-width: 100%;
}

.leftPic {
	clear: left;
	float: right;
	margin-left: 20px;
}

.rightPic {
	clear: right;
	float: left;
	margin-right: 20px;
}