html{
	height: 100%;
	width: 100%;
}

/* ===================== */
/* STUFF FOR GRID LAYOUT */
/* ===================== */
* {
	box-sizing: border-box;
}

/* Formatierung für alle cols */
[class*="col-"]{
	width: 100%;
	float: left;
	padding: 5px 15px;
	###border: 1px solid red;	/*LAYOUT TESTING*/
}


/* ===================== */
/* ====== C S S ======== */
/* ===================== */

body{
	width: 100%;
	height: 100%;
	color: color: #ea9960;
	background-color: white;
	font-family: "Verdans", sans-serif;
	line-height: 1.5em;
	margin: 0;
}

.container{
	text-align: center;
}

.disclaimer{
	margin: 0 10%;
}

.disclaimer p, p.blocktext{
	text-align: justify;
	margin: 0px;
}

a{
	text-decoration: none;
	color: #ea9960;
}

h1{
	font-size: 2em;
	font-variant: small-caps;
	color: #ea9960;
	line-height: 1em;
}

h2{
	font-size: 2em;
	font-variant: small-caps;
	color: #ea9960;
	line-height: 1em;
}

h3{
	font-size: 1em;
	color: #ea9960;
}

/* Less space on main page, disclaimer page is not in col-12 */
.col-12 h1{	margin: 0	}
.col-12 h2{	margin-top: 0;	}

img#banner{
	width: 100%;
	min-height: 30%;
	max-height: 338px;
	object-position: center;
	object-fit: cover;
	margin-left:auto; 
	margin-right:auto; 
	display:block;
}

img#profile{
	width: 75%;
	min-height: 400px;
	max-width: 350px;
	max-height: 500px;
	object-position: center;
	object-fit: cover;
	margin-left:auto; 
	margin-right:auto; 
	display:block;
}

.link-element-wide{
	padding-top: 0px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
	padding-bottom: 10px !important;
	margin-bottom: 0px !important;
}

.nopaddingtop{
	padding-top: 0 !important;
}

img.icon{
	width: 20px;
	height: 20px;
	position: absolute;
	left: 10%;
}

/* yt icon is in a ball, thus make it bigger */
img.icon#icon-youtube{
	width: 25px;
	height:25px;
}	

a:hover{
	text-decoration: underline;	
}

.button {
  background-color: transparent;
  border: 2px solid #ea9960;
  border-radius: 25px;
  box-sizing: border-box;
  color: #ea9960;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  margin: 0;
  margin-bottom: 4px;
  width: 50%;
  min-height: 60px;
  min-width: 200px;
  padding: 16px 24px;
  text-decoration: none;
  will-change: transform;
}

.button:hover {
  color: #fff;
  background-color: #ea9960;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  text-decoration: none;
}

.button:hover > img#icon-youtube{
	content:url("youtube2.png");
}

.button:hover > img#icon-spotify{
	content:url("spotify2.png");
}

.button:hover > img#icon-instagram{
	content:url("instagram2.png");
}

.button:hover > img#icon-facebook{
	content:url("facebook2.png");
}

.button:hover > img#icon-tiktok{
	content:url("tiktok2.png");
}

.button:hover > img#icon-bandcamp{
	content:url("bandcamp2.png");
}

.footer{
	text-align: center;
	position: fixed;
	width: 100%;
	bottom: 0;
	background: white;
}

iframe#spotify-player{
	width: 80%;
	border-radius: 12px;
}

/* ============================= */
/* = M E D I A   Q U E R I E S = */
/* ============================= */

/* big screens / Desktop */
@media only screen and (min-width: 1000px){
	.col-1{ width: 8.33%; }
	.col-2{ width: 16.66%; }
	.col-3{ width: 25%; }
	.col-4{ width: 33.33%; }
	.col-5{ width: 41.66%; }
	.col-6{ width: 50%; }
	.col-7{ width: 58.33%; }
	.col-8{ width: 66.66%; }
	.col-9{ width: 75%; }
	.col-10{ width: 83.33%; }
	.col-11{ width: 91.66%; }
	.col-12{ width: 100%; }
	
	[class*="col-"]{
		float: left;
		padding: 25px;
	}
	
	iframe#spotify-player{
		width: 50%; !important
	}
	
	.showbelow1400 iframe#spotify-player{
		width: 100% !important;
	}
	
	.showbelow1400 .button{
		min-width: 200px;
		width: 100%;
	}
	
	img#profile{
		width: 100%;
	}
	
	h1{
		font-size: 3em;
	}
	
	h2{
		font-size: 3em;
	}
	
	h3{
		font-size:1.5em; 
	}
	
	.button{
		width: 90%;
	}
	
}

/* ======================== */
/* = H I D E  /   S H O W = */
/* ======================== */

.hidebelow1000{
	display: none;
}

@media only screen and (min-width: 1000px){
	.hidebelow1000{
		display: block;
	}
	
	.showbelow1000{
		display: none;
	}
}

.hidebelow1400{
	display: none;
}

@media only screen and (min-width: 1400px){
	.hidebelow1400{
		display: block;
	}
	
	.showbelow1400{
		display: none;
	}
}