html {
	height:100%;
}

	

#content {
	text-align: center;
	padding-top: 30%;
	padding-bottom: 0;

}
body {
	color: #afc1e0;
	background-image: url(SoundsTypingScreenshot.jpg);
	background-size: cover;
	background-position: center;
/*	font-family: 'Raleway', sans-serif;*/
	font-family: 'Comfortaa', cursive;
	height: 100%;
	overflow: hidden;
	background-repeat: no-repeat;
}

h1 {
	font-weight: : 700;
}




/*	-webkit-animation: AnimationName 13s ease infinite;
	-moz-animation: AnimationName 13s ease infinite;
	animation: AnimationName 13s ease infinite;

	@-webkit-keyframes AnimationName {
	    0%{background-position:0% 9%}
	    50%{background-position:100% 92%}
	    100%{background-position:0% 9%}
	}
	@-moz-keyframes AnimationName {
	    0%{background-position:0% 9%}
	    50%{background-position:100% 92%}
	    100%{background-position:0% 9%}
	}
	@keyframes AnimationName { 
	    0%{background-position:0% 9%}
	    50%{background-position:100% 92%}
	    100%{background-position:0% 9%}
	}*/

 .navbar-light .navbar-brand {
	color: red;
	font-family: 'Montserrat', sans-serif;
	font-size: 2em;
}

.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
	color: #5978d6;
}



.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}



.btn-1 {

	border: 3px solid #afc1e0;
	color: #afc1e0;
	border-radius: 50%;
}

.btn-1e {
	text-transform: uppercase;
	display: inline-block;
	text-align: center;
	height: 50px;
	width: 90px;
	margin: 50px;
	padding-top: 10px;
	color: #afc1e0;
	overflow: hidden;
	text-shadow: none;
}

.btn-1e:after {
	border-radius: 50%;
	width: 100%;
	height: 0;
	top: 50%;
	left: 50%;
	background: #FFD44F;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-1e:hover,
.btn-1e:active {
	color: #5978d6
}

.btn-1e:hover:after {
	height: 260%;
	opacity: 1;
}

.btn-1e:active:after {
	height: 400%;
	opacity: 1;
}
.Grid {
  display: flex;
}

.Grid-cell {

  flex: 1;
  padding-left: 2%;
  padding-top: 20%;
  padding-right: 2%;
}
h3 {
	font-size: 1.2em;
}
h1.fun {

	font-size: 2em;
}
p.hope {
	font-size: 1em;
}

.Grid--gutters {
  margin: -1em 0 0 -1em;
}
.Grid--gutters > .Grid-cell {
  padding: 1em 0 0 1em;
}

/* Alignment per row */
/*.Grid--top {
  align-items: flex-start;
}*/
.Grid--bottom {
  align-items: flex-end;
}
.Grid--center {
  align-items: center;
}

/* Alignment per cell */
.Grid-cell--top {
  align-self: flex-start;
}
.Grid-cell--bottom {
  align-self: flex-end;
}
.Grid-cell--center {
  align-self: center;
}




/* Base classes for all media */
.Grid--fit > .Grid-cell {
  flex: 1;
}
.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%
}
.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%
}
.Grid--1of4 > .Grid-cell {
  flex: 0 0 25%
}

/* Small to medium screens */
@media (min-width: 24em) {
  .small-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .small-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .small-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%
  }
  .small-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%
  }
  .small-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%
  }
}

/* Large screens */
@media (min-width: 48em) {
  .large-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .large-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .large-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%
  }
  .large-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%
  }
  .large-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%
  }