.subPage {
    width: 900px;
    max-width: 98%;
    background-color: transparent;
    outline: transparent;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 12px 12px 20px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

@font-face {
  font-family: CharlieType;
  src: url("../assets/fonts/CharlieType.otf");
}

@font-face {
  font-family: CharlieTypeHeavy;
  src: url("../assets/fonts/CharlieType-Heavy.otf");
}

@font-face{
  font-family: Elegantile;
  src: url("../assets/fonts/Elegantile.otf");
}

/* Style the blogTab */
.blogTab {
  overflow: hidden;
  background-color: transparent;
}

li {
	color: #ccc;
	list-style: #8464CF;
}

/* Style the buttons that are used to open the blogTab content */
.blogTab button {
  background-color: inherit;
  border: 3px solid #8464CF;
  border-radius: 20px;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  
  font-family: "Josefin Sans";
  font-size: 1.5em;
  color: white;
}

/* Change background color of buttons on hover */
.blogTab button:hover {
  background-color: #8464CF;
  color: #1e043d;
}

/* Create an active/current tablink class */
.blogTab button.active {
  background-color: #ccc;
  color: #1e043d;
}

/* Style the blogTab content */
.blogTabContent {
  display: none;
  padding: 6px 12px;
  border: 3px solid #8464CF;
  margin-top: 1em;
  margin-bottom: 2em;
  background-color: #1e043d88;
}

/* for pictures displayed to the left */
.rightPic {
  clear: left;
  float:right;
  margin-left:20px;
}

/* for pictures displayed to the left */
.leftPic {
  clear: right;
  float:left;
  margin-right:20px;
}

.cbContent {
	border: 3px solid #DF4A2F;
	background-color: #17171788;
}

.cbContent li {
	color: #E9E4D2;
	font-family: CharlieType;
}

.cbContent a {
	color: #DF4A2F;
}