@font-face{
	font-family: "snabfont";
	src: url("Snabfont-Regular.ttf") format("truetype");
}

*{
	font-family: "snabfont";
}

header{
	text-align: center;
	background-color: #efbbff;
}

body{
	background-color: 	#d896ff;
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #be29ec;
  justify-content: center;
  display: flex;
  outline: 5px solid;
  margin-top: 5px;
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #800080;
}

footer {
  text-align: center;
  background-color: #efbbff;
  border: 5px solid black;
}

.featured img{
	object-fit: cover;
	width:100%;
	height:100%;
}

.header{
	grid-area: header;
	text-align: center;
	background-color: #efbbff;
	border: 5px solid black;
}

.content{
	grid-area: featured;
}

.menu {
  grid-area: menu;
  display: flex;
  flex-direction: column;
  border: 5px solid black;
  background-color: #efbbff;
}

.menu a {
  display: block;
  background-color: #fff;
  color: black;
  text-decoration: none;
  text-align: left;
  padding: 2px;
  font-size: 3em;
  border: 2px solid black;
  transition: 0.3s;
}

.featured{
	display: grid;
	grid-template-columns: repeat(4, minmax(250px, 2fr));
	grid-template-rows: 80px 250px 250px; 
	grid-template-areas:
		"text text text text"
		"main main slotA slotC"
		"main main slotB slotD";
	color: black;
	border: 5px solid black;
	text-align: center;
	background-color: #efbbff;
}

.text{
  grid-area: text;
  text-transform: 250%;
}

.subtext{
	opacity: 0%;
	transition: 0.3s;
}

.main{
	grid-area: main;
	border: 5px solid black;
	margin-left: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
	text-transform: bottom;

}

.main:hover, .slotA:hover, .slotB:hover, .slotC:hover, .slotD:hover{
	z-index: 2;
	box-shadow: 0 0 50px 20px;
	outline: 2px solid black;
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 1px;
	margin-bottom: 1px;
	transition: 0.3s ease;
	
}

.slotA{
	grid-area: slotA;
	border: 5px solid black;
	margin-left: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
	
}

.slotB{
	grid-area: slotB;
	border: 5px solid black;
	margin-left: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
}

.slotC{
	grid-area: slotC;
	border: 5px solid black;
	margin-right: -5px;
	margin-bottom: -5px;
}

.slotD{
	grid-area: slotD;
	border: 5px solid black;
	margin-right: -5px;
	margin-bottom: -5px;
}

.youtube{
	grid-area: youtube;
}

.twitter{
	grid-area: twitter;
}

.newgrounds{
	grid-area: newgrounds;
}

.itch{
	grid-area: itch;
}

.elsewhere{
	grid-area: elsewhere;
	size: 250%;
}