:root {
	--green: #c1d72e;
}

html {
  scroll-behavior: smooth;
}

:target {
  display: block;
  position: relative;
  top: -120px; 
  visibility: hidden;
}

.bodyWrapper{
	background: #fff url(images/bkgrnd.jpg) bottom right / cover fixed no-repeat ;
	
}

.splashWrapper{
	min-height: calc(100vh);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.splash{
	max-width: 80%;
	margin-top: 2em;
	margin-bottom: 2em;
}

.splash img{
	width: 600px;
}
.scroll{
	margin-top: 3em;
	margin-bottom: 40px;
}
hr {
	/*border-top: 3px solid #ddd7ff;*/
	border-top: 2px solid #ccc;
	width: 80%;
}
a,
a:link,
a:visited{
	color: #aaa;
}
a:hover,
a:active{
	color: #ccc;
}

.thumb {
	padding: 4px;
	border: #ddd solid 1px;
	background-color: #fff;
}
.customContainer {
	width: clamp(calc(320px - 40px), calc(100% - 40px), 1024px);
	margin: 0 auto;
}


/*Sections*/

.section {
	padding-top: 4rem;
	padding-bottom: 4rem;
	background-color: rgb(0 0 0 / 50%);
}

.section.red {
	background-color: rgb(95 0 0 / 70%);
}

.section.yellow {
	background-color: rgb(255 186 0 / 39%);
}

.section.green {
	background-color: rgb(185 199 89 / 53%);
}

.section.blue {
	background-color: rgb(0 168 255 / 57%);
}

.section.pink {
	background-color: rgb(185 153 190 / 59%);
}

/* Sporify Grid */

.spotifyGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
}
.spotifyGrid .mediaItem iframe {
	width: 100%;
	height: 400px;
}

/* Social Section */

section.links {
	padding: 2rem;
	background-color: rgba(0, 0, 0, 0.6);
}

section.links .audiospheraImage {
	display: inline-block;
	width: 120px;
}


/* Google Icons */

.material-icons.md-18 {
	font-size: 18px;
}
.material-icons.md-24 {
	font-size: 24px;
}
.material-icons.md-36 {
	font-size: 36px;
}
.material-icons.md-48 {
	font-size: 48px;
}
.material-icons.md-dark {
	color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
	color: rgba(0, 0, 0, 0.26);
}
.material-icons.md-light {
	color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
	color: rgba(255, 255, 255, 0.3);
}

#mediaSection {
	padding-top: 4rem;
	padding-bottom: 4rem;
	background-color: rgba(185, 155, 242, 0.4);
	;
}


/* Media Grid */

.mediaGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
}
	
.mediaGrid .mediaItem iframe{
	width: 100%;
	height: 400px;
}

/* Social Section */

section.links{
	padding: 2rem;
	background-color: rgba(178, 183, 254, 0.8);
}

section.links iframe{
	margin-bottom: 2rem;
	width: 220px;
}

section.links .audiospheraImage{
	width: 120px;
}