@font-face {
	font-family: "Joey-Reg";
	src: url("./fonts/Joey-Regular.ttf");
}

@font-face {
	font-family: "Const-Reg";
	src: url("./fonts/Constellation-Regular.ttf");
}

@keyframes pan {
	0% { background-position: 20vw 100vh; }
	100% { background-position: 0vw 0vh; }
}

.header {
	display:flex;
	flex-flow: row nowrap;
	justify-content:space-evenly;
	align-items:center;
	max-height:8vh;
	background: radial-gradient(ellipse at center, hsla(190, 70%, 90%, 1.0) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
}

.nahbar {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	display:flex;
	flex-flow: row nowrap;
	justify-content:space-evenly;
	align-items:center;
	margin: 0;
	padding-top:0.7em;
	padding-bottom:1em;
	background: linear-gradient(#ff1b8d 0%, #fdda06 50%, #a5e6f0 100%);
}

.navbar {
	display:flex;
	justify-content:center;
	align-items:center;
	max-width:40%;
	width:10vw;
	height:10vw;
	color:black;
	text-decoration: none;
}

.navbar:hover {
	text-decoration: underline black wavy;
}

.current {  
	font-weight:bold;
}

.logo {
	align-self:center;
	display:flex;
	justify-content:center;
	align-items:center;
	max-width:10vw;
	height:auto;
	background-image:url("./images/Conjurers.svg");
}

body {
	margin: 0vh 5vw;
	padding: 0;
	display:flex;
	flex-flow: column nowrap;
	justify-content: center;
	text-align:center;
	background-image: url("./images/BackgroundTile.png");
	background-color: #a5e6f0;
	background-repeat: repeat;
	background-size: 2.5%;
	animation: pan 180s linear infinite;
	font-family: 'Courier New', Courier, monospace;
}

.vignette {
	position:fixed;
	top:0vh;
	left:0vw;
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(165, 230, 240, 1.0) 100%);
	z-index:-1;
}

.h1 {
	margin: 0vh 5vw;
	padding: 0;
}

.region {
	padding:1em; display:flex;
	justify-content:space-between;
	background-color:hsla(190, 70%, 90%, 1.0);
	box-shadow: 0 0 2em 1em hsla(190, 70%, 90%, 1.0);
	margin: 10rem;
}

.handwritten {  
	font-family: "Joey-Reg";
}

/*Sticky color: #ffe56b*/
.sticky {
	display: inline-block;
	margin: 2em;
	padding: 1em;
	background-color: aliceblue;
	font-family: "Joey-Reg";
	font-size: 130%;
}

#showcase {
	display: flex;
	justify-content: space-around;
	flex-flow: row wrap;
}

.art {
	max-width: 100%;
	height: auto;
}

.plaque {
	align-items: center;
	padding: 1vh;
	max-width: 30%;
	height: auto;
	border: 1vh outset;
	border-color: #c2b067;
	background-color: #c2b067;
	color: #FDE897;
}

.framed {
	width: 35vw;
	height:auto;
	border: 2vh solid transparent;
	border-image: url(./locations/photoGallery/frame.jpg) 10% round;
}

@media (max-width: 768px) {
  .region {
    margin: 2rem;
  }
}

/* Testing */

.circle {
  transform: translate(100px,100px);
  width: 25em;
  height: 25em;
  background-color: deepskyblue;
  border-radius: 50%;
  transition: transform 2s;
}

.circle:hover {
  transform: scale(1.2,1.2);
}

table-item {
  text-align: center;
}

attention-text {
  animation: greentoblack 3s infinite;
}

WordWorld {
  display: inline-block;
  background-color: goldenrod;
  color: white;
  transition: transform 1s;
}

WordWorld:hover {
  transform: scale(10,10);
}