/* Some selectors to get you started */
/* brawler-regular - latin h */
@font-face {
  font-family: 'Brawler';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/brawler-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/brawler-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/brawler-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/brawler-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/brawler-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/brawler-v19-latin-regular.svg#Brawler') format('svg'); /* Legacy iOS */
}

/* amiko-regular - latin p */
@font-face {
  font-family: 'Amiko';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/amiko-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/amiko-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/amiko-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/amiko-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/amiko-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/amiko-v12-latin-regular.svg#Amiko') format('svg'); /* Legacy iOS */
}


body {
	margin: 50px;
	background-image: linear-gradient(#C0847A, #E4926D) ;
}

h1 {
	font-family: Brawler;
	font-size: 2em;
	text-align: center;
}

h2 {
	font-family: Brawler;
	font-size: 1.6em;
	text-align: center;
	
}

h3 {
	
}


p {
	font-family: Amiko;
	font-size: 1.2em;
}

img {
	width: 60%;
	padding-top: 30px;
}

.portrait {
	text-align: center;
}

#defense,
#offense {
  background-color: #F9D599;
  min-height: 500px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: flex-start;
  box-align: center;  
  padding: 50px;
}

.defense,
.offense {
  width: 100px;
  height: 800px;
  border: 4px solid white;
  margin: 10px 30px;
  text-align: center;
  box-flex: 1;
  flex: 1 1 auto; 
  justify-content: center;

}


.defense.left {
	flex-grow: 1;
	

}
.defense.center {
	flex-grow: 1;

}
.defense.right {
	flex-grow: 1;

}

.offense.left {
	flex-grow: 1;

}

.offense.right {
	flex-grow: 1;

}