body {
  font-family:'Josefin Sans','Young Serif',Verdana;
   background-size: 100% 100%;
}
/* young-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/young-serif-v2-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/josefin-sans-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/josefin-sans-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/josefin-sans-v33-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/josefin-sans-v33-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/josefin-sans-v33-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/josefin-sans-v33-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/josefin-sans-v33-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/josefin-sans-v33-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color:#63A4A8;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #EC6943;
  border-style:outset;
  border-color:#EC6943;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #F08E51;
}
.container {
  max-width: 60rem;
	margin: 2vw auto 9px auto;
	outline-offset: 4px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	flex-direction:row;
	padding: 5px;
	gap: 5px;
/*	background-color:#F8ECBC;*/
  background-image: url('https://tiethief.neocities.org/images/tiles2.png');
  background-size:50% 50%;
  border:5px solid #3D767E;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.small { flex: 1 1 20%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.wide { flex: 1 1 75%; }

header {
  margin:3px;
  width: 100%;
  height: 110px;
  border:thick solid #3D767E;
  background-image: url('https://tiethief.neocities.org/images/beach.gif');
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  position: relative;
}
header span {
	font-size: 2.5rem;
	color:#FFF7E4;
	font-weight: 600;
	font-family: 'Young Serif';
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 5px;
	text-shadow: 3px 3px rgb(61, 118, 126, 100%);
}
.small {
  width: 30%;
  background-color:transparent;
  margin:3px;
  height:5%;
}
.wide {
  width:70%;
  background-color:transparent;
  margin:3px;
}
.full {
  margin:3px;
}
nav {
  padding: 5px;
  background-color:#95BBB0;
  border-radius: 10px;
  border:thick solid #3D767E;
}
nav div {
	text-align: center;
	font-size: 1.30rem;
	font-weight: 600;
	font-family: 'Young Serif';
	margin: 5px 5px 10px 5px;
	color:#FFF7E4;
	text-shadow: 1px 1px 2px rgba(60, 73, 74, 0.2), 0 0 25px rgba(60, 73, 74, 0.2), 0 0 5px rgba(60, 73, 74, 0.2);
}
nav a {
	display: block;
	margin: 5px;
	background-color:#EC6943;
	border: 5px outset #EC6943;
	padding: 2px 7px;
	text-decoration: none;
	color:#F6E6C5;
	font-size: 1rem;
}
nav a:hover, nav a:focus {
  background: linear-gradient(to right, #F08E51 50%, #EDAA42 100%);
  font-style: italic;
}
.nav-link:link {
  color:#EC6943;
 text-decoration:underline;
}
.nav-link:visited {
  color:#54A0AC;
 text-decoration:underline;
}
.nav-link:hover {
  color:#54A0AC;
 text-decoration:underline;
}
.nav-link:active {
  color:#EDAA42;
 text-decoration:underline;
}
/*My site button WIP*/
sbutton {
  background:transparent;
  margin:3px;
}
sbutton img {
  display: block;
	margin: 5px auto;
}
sbutton textarea {
  display: block;
	margin: 5px auto;
	margin-top:5px;
	resize: none;
	background-color:#95BBB0;
	border:thick solid #3D767E;
	color:#FFF7E4;
	height:50px;
}
.bigspace {
  background-color: white;
  height:90%;
  border-radius: 10px;
  border:thick solid #3D767E;
}
.bigspace iframe{
  background-color: transparent;
  border-radius: 5px;
  border-style:none;
}
#stats { 
  position:fixed;
  background:transparent;
  bottom:-290px;
  right:0;
  text-align:right;
  padding:5px;
}
#statButton {
  background:transparent;
  cursor:pointer;
  padding:0;
}
.closeAnim {
  animation:close 2s ease-out forwards;
}
@keyframes close {
  from {bottom:0;right:0;}
  to {bottom:-290px;right:0;}
}
.openAnim {
  animation:open 2s ease-out forwards;
}
@keyframes open {
  from {bottom:-290px;right:0;}
  to {bottom:0;right:0;}
}
#statPage {
  width:230px;
  outline-offset: 4px;
	border-radius: 10px;
	background-color:#FBEFD5;
  background-size:50% 50%;
  border:5px solid #3D767E;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}