/**************
 * Body Styles *
 ***************/
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #1f1f1f;
  color: #1f1f1f;
}

/*********
 * Header *
 **********/
header {
  color: white;
  text-align: center;
  font-size: 3.5em;
  margin-bottom: 5%;
  margin-top: 3%;
}

h6 {
  color: white;
  text-align: center;
  margin-top: -20px;
}
  
   /**********************************
 * Wrapper Styles for Presentation *
 ***********************************/
.wrapper {
  margin-left: 15%;
  margin-right: 15%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
	align-items: center;
	justify-content: center;
}

/************************
 * Blanket Button Stlyes *
 *************************/
.button-1, .button-2, .button-3, .button-4, .button-5, .button-6, .button-7, .button-8, .button-9, .button-10, .button-11, .button-12, .button-13, .button-14, .button-15 {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 50px;
  padding-right: 50px;
  margin: 20px;
  border-radius: 5px;
  /*  Ease Transition  */
	transition: all 300ms ease;
  background-color: #1f1f1f;
}

/* Button 1 */
.button-1 {
  box-shadow: inset 0 0 0 3px #60993E;
  color: #60993E;
}
.button-1:active {
  color: #A1E44D;
  box-shadow: inset 0 0 0 3px #A1E44D;
}

.button-1:hover {
  cursor: pointer;
}

/* Button 2 */
.button-2 {
  box-shadow: inset 0 0 0 3px #A1E44D;
  color: #A1E44D;
}
.button-2:active {
  font-style: italic;
}

.button-2:hover {
  cursor: pointer;
}
/* Button 3*/
.button-3 {
  box-shadow: inset 0 0 0 3px #77FF94;
  color: #77FF94;
}
.button-3:active {
  font-size: 10px;
}
.button-3:hover {
  cursor: pointer;
}
/* Button 4 */
.button-4 {
  box-shadow: inset 0 0 0 3px #7AFDD6;
  color: #7AFDD6;
}
.button-4:active {
  font-size: 22px;
}
.button-4:hover {
  cursor: pointer;
}
/* Button 5 */
.button-5 {
  box-shadow: inset 0 0 0 3px #ADEEE3;
  color: #ADEEE3;
}
.button-5:active {
  background-color: #ADEEE3;
  color: #1f1f1f;
}
.button-5:hover {
  cursor: pointer;
}
/* Button 6 */
.button-6 {
  box-shadow: inset 0 0 0 3px #ADEEE3;
  color: #ADEEE3;
}

.button-6:active {
  background-color: #ADEEE3;
  color: #1f1f1f;
  box-shadow: 5px 5px #63CEAE;
}
.button-6:hover {
  cursor: pointer;
}
/* Button 7 */
.button-7 {
  box-shadow: inset 0 0 0 3px #7AFDD6;
  color: #7AFDD6;
  border-radius: 10px;
}

.button-7:active {
  border-radius: 0px;
}
.button-7:hover {
  cursor: pointer;
}
/* Button 8 */
.button-8 {
  box-shadow: inset 0 0 0 3px #77FF94;
  color: #77FF94;
}
.button-8:active {
  border-radius: 25px;
}
.button-8:hover {
  cursor: pointer;
}
/* Button 9 */
.button-9 {
  color: #A1E44D;
}
.button-9:active {
box-shadow: inset 0 0 0 3px #A1E44D;
}
.button-9:hover {
  cursor: pointer;
}
/* Button 10 */
.button-10 {
  background-color: #60993E; 
  color: #1f1f1f;
}
.button-10:active {
  background: rgba(0,0,0,0);
  box-shadow: inset 0 0 0 3px #60993E;
  color: #60993E;
}
.button-10:hover {
  cursor: pointer;
}
/* Button 11 */
.button-11 {
  box-shadow: inset 0 0 0 3px #60993E;
  color: #60993E;
}
.button-11:active {
   padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 45px;
  padding-right: 45px;
}
.button-11:hover {
  cursor: pointer;
}
/* Button 12 */
.button-12 {
  box-shadow: inset 0 0 0 3px #A1E44D;
  color: #A1E44D;
}

.button-12:active {
   padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 55px;
  padding-right: 55px;
}
.button-12:hover {
  cursor: pointer;
}
/* Button 13 */
.button-13 {
  background-color: #77FF94;
  color: #1f1f1f;
}
.button-13:active {
  box-shadow: 0 0 0 3px white;
  color: #1f1f1f;
}
.button-13:hover {
  cursor: pointer;
}
/* Button 14 */
.button-14 {
  background-color: #7AFDD6;
  color: #1f1f1f;
}

.button-14:active {
  box-shadow: 3px 3px #32FCBF;
}
.button-14:hover {
  cursor: pointer;
}
/* Button 15 */
.button-15 {
  box-shadow: inset 0 0 0 3px #ADEEE3;
  color: #ADEEE3;
  transition: none;
}

.button-15:active {
  box-shadow: none;
  border: dashed #ADEEE3 2px;
  transition: none;
  padding-top: 10px;
  padding-left: 45px;
}
.button-15:hover {
  cursor: pointer;
}
 /*********
 * Footer *
 **********/
footer {
  color: white;
  text-align: center;
  margin-top: 5%;
}