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

.Myth {
	font-size: 25px;
	font-family: "Cursive", Arial, Constantia;
	color: #0F5A8F;
}

.Monster {
	font-size: 25px;
	font-family: "Cursive", Arial, Constantia;
	color: #2B5E03;
}

.Mortal {
	font-size: 25px;
	font-family: "Cursive", Arial, Constantia;
	color: #80750F;
}

.Gods {
	font-size: 25px;
	font-family: "Cursive", Arial, Constantia;
	color: #730707;
}

.Title {
	font-size: 36px;	
	font-family: "Book Antiqua", Calibri, Arial;
}

.Random {
	font-size: 25px;
	font-family: "Constantia", cursive;
}

.divMyth {
	background-color: #92B6D9;
	text-align: center;
	height: 100px;
	border-radius: 20px;
}

.divMonster {
    background-color: #97DCAF;
	text-align: center;
	height: 100px;
	border-radius: 20px;
}

.divMortal {
    background-color: #D4DA7D;
	text-align: center;
	height: 100px;
	border-radius: 20px;
}

.divGods {
	background-color: #DE8E8E;
	text-align: center;
	height: 100px;
	border-radius: 20px;
}

a:hover {
	color: #34995F
}

a {
	text-decoration: none;
}

.card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #92B6D9;
	color: #FFF;
	height: 200px;
	width: 300px;
	margin-left: 40px;
	border-radius: 4px;
	overflow: hidden;
	transition: all 500ms;	
	
	animation: cardEntrance 700ms ease-out;
	animation-fill-mode: backwards;
}

.animated-grid {
    height: 85vh;
	display: grid;
	
	grid-template-areas:
	  'a'
	  'b'
	  'c'
	  'd';
	
	grid-rows: repeat(3, 33%);
}

@keyframes containerEntrance {
  from {
      opacity: 0;
	  transform: scale(0.3);
	  filter: hue-rotate(180deg);
  }
  to {
      opacity: 1;
	  transform: scale(1);
	  filter: hue-rotate(0deg);
  }
}