/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
     background: black;
}

body > section {
     margin: 25vh auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 500px;
}

body > section > section {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     width: 350px;
     gap: 10px 30px;
     margin: 15px;
}

/******************************************
/* LAYOUT
/*******************************************/

.hidden {
     display: none;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/