:root { 
/* bg colors */
  --cocoa-bg: #FDE8E5; 
  --cocoa-bg-accent: #fff2f6;
  --cocoa-bg-dark: #FEC3CD; 
  
  --main-accent: #FF5C89; 
  --text-color: #2e0c16;
}

/* stolen nav code from [https://codepen.io/bradfrost/pen/ndygmR] begins here */

a.menu-link {
  	    float: center;
		    display: block;
		    padding: 1em;
		}
		nav[role=navigation] {
			clear: both;
			-webkit-transition: all 0.3s ease-out;  
			-moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}
		.js nav[role=navigation] {
			overflow: hidden;
			max-height: 0;
		}
		nav[role=navigation].active {
			max-height: 15em;
		}
		nav[role=navigation] ul {
			margin: 0;
			padding: 0;
			border-top: 1px solid #808080;
		}
		nav[role=navigation] li a {
			display: block;
			padding: 0.8em;
			border-bottom: 1px solid #808080;
		}
		
		@media screen and (min-width: 48.25em) {
			a.menu-link {
			   display: none;
			}
			.js nav[role=navigation] {
				max-height: none;
			}
			nav[role=navigation] ul {
				margin: 0 0 0 -0.25em;
				border: 0;
			}
			
			nav[role=navigation]  li {
				display: inline-block;
				margin: 0 0.25em;
			}
			nav[role=navigation] li a {
				border: 0;
			}
		}

/* stolen nav code ends here */

body {
  display: flex;
  background-color: var(--cocoa-bg);
  font-family: "verdana";
  font-size: 13px; 
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: "Calibri"; 
  font-size: 70px;
  color: var(--main-accent);
}

.infoContainer { 
  place-items: center;
  overflow: hidden;
  align-items: center;
  vertical-align: middle; 
  box-sizing: border-box;
  padding: 30px;
  width: 900px; 
  height: 560px; 
  background-color: var(--cocoa-bg-dark);
}

.botBox { 
  display: flex;
  flex-wrap: wrap; 
  flex-direction: row;
  gap: 1.3%; 
}

.bot {
  flex-direction: column; /* stack children vertically */
  align-items: flex-start; /* left-align text */
  justify-content: flex-start; /* content flows from top down */
  width: 180px; 
  height: 240px; 
  text-wrap: wrap;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
  margin: 10px;
  background-color: var(--cocoa-bg-accent); 
  box-shadow: 0 4px 8px rgba(227, 66, 117, 0.4);
}

.bot .face { 
  display: block;
  width: 100%; 
}

.bot h1 { 
  position: relative;
  color: var(--main-accent);
  font-size: 20px;
}

.bot p {
  position: relative;
  text-align: justify;
}