@keyframes colorShift {
  	0%   { color: #ffffff; }
  	25%  { color: #FF97F8; }
  	50%  { color: #FF0004; }
	75%  { color: #FFE000; }  
	95%  { color: #5AEAFF; }
  	100% { color: #ffffff; }
}


/* TYPE! */
p1{font-family: source-serif-pro, serif;
	padding-left: 30px;
	color:#FF4D00;
	font-size: 1em;
}


p2{
	color:#787878;
	font-family: source-serif-pro, serif;
	padding-left: 0px;
	letter-spacing: -0.02em;
	font-weight: 400;
	font-size: 1.5em;
	animation: colorShift 1s infinite;
}

p3{
	color:#A0A0A0;
	font-family: source-serif-pro, serif;
	font-weight: 200;
	font-size: 1.7em;
}

p4{
	font-family: source-serif-pro, serif;
	color:#787878;
	font-size:0.8em;
}

p5{
	color:#787878;
	/*color:#787878;*/
	/*background-color: rgba(0,0,0,0.24);*/
	font-family: source-serif-pro, serif;
	padding-left: 50px;
	font-weight: 100;
	font-size: 2em;
}

h1{ /*BIG TITLE*/
	font-family: roboto-condensed, sans-serif;
	
	text-transform: uppercase;
	font-weight: 500;
	font-size: 5em;
		letter-spacing: -0.02em;
	position: relative;
	top: 0;
	left: 0;
	margin:0;
	padding-left: 20px;
	padding-top: 10px;
}



h2{ /*buttons*/
	font-family: roboto-condensed, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 1.4em;
	position: relative;
	margin: auto;
}

h3{ /*SMALL ITEM TITLE*/
	font-family: roboto-condensed, sans-serif;
	font-weight: 1000;
	text-transform: uppercase;
	font-size: 1em;
	position: relative;
	margin: auto;
	line-height: 1em;
	margin-top: 5px;

}


/* - - - - - - TOP MENU - - - - - - - */

body            
{
    margin:auto;
    width:100%;
    background-color: black;
	font-size:14px;
}

.top{
	width: 100%;
	height: 10%;
	position: fixed;
	top: 2%;
	right: 2%;	
	text-align: right;
}

.bottom{
	position: fixed;
	width: 20%;
	height: 5%;
	bottom: 2.5%;
	left: 40%;
	text-align: center;
}

.cover{
	display: block;
   width: clamp(160px, 35vw, 320px);
  height: 100%;
  	aspect-ratio: 1 / 1;/* perfect vierkant */
  	margin: 16px 0;
  	border-radius: 2px;
  	overflow: hidden;
  	box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.cover img{
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	display: block;
}

.cover a{
  display: block;
  width: 100%;
  height: 100%;
}

.cover .label{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bandcamp{
	position: relative;
	left: 0%;
  	display: flex;
  	justify-content: center;
 	margin-top: 10px;
	/*outline: 2px solid red;*/
}

.logo{
	background-image: url("http://www.burntmilk.nl/images/BM_05.gif");
  	background-size: cover;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	width: 66%;
  	height: 66%;
  	display: flex;
  	flex-direction: column;
  	align-items: center; /* 🔥 dit is de sleutel */
	border-radius: 20px;   /* 🔵 ronde hoekjes */
  	overflow: hidden;      /* 🔥 dit is essentieel */
}


/* =========================
   Mobile fixes (onderaan plakken)
   ========================= */

/* iOS/Android: geen rare zoom */
html { -webkit-text-size-adjust: 100%; }

/* Maak fixed menu’s bruikbaar op kleine schermen */
@media (max-width: 600px){

  body{
    font-size: 16px;           /* basis iets groter voor mobiel */
    padding-top: 64px;         /* ruimte zodat .top niet over content hangt */
    padding-bottom: 72px;      /* ruimte voor .bottom */
  }

  /* TITEL kleiner en minder padding */
  h1{
    font-size: clamp(2.2em, 10vw, 3.4em);
    padding-left: 12px;
    padding-top: 8px;
    letter-spacing: -0.01em;
  }

  /* Buttons/headers iets compacter */
  h2{ font-size: 1.1em; }
  h3{ font-size: 0.95em; line-height: 1.1em; }

  /* Jouw p1..p5 schaalbaar maken */
  p1{ font-size: 1em; padding-left: 12px; }
  p2{ font-size: 1.15em; }            /* 1.5em was groot op mobiel */
  p3{ font-size: 1.25em; }
  p4{ font-size: 0.95em; }
  p5{ font-size: 1.2em; padding-left: 12px; }  /* 50px is veel op mobiel */

  /* TOP menu: niet te breed, meer padding, netjes in beeld */
  .top{
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    padding: 10px 12px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    z-index: 1000;
  }

  /* BOTTOM: full width, zodat het niet “zweeft” op rare plek */
  .bottom{
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 10px 12px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    z-index: 1000;
  }

  /* Cover: lekker groot maar niet te breed */
  .cover{
    width: min(86vw, 320px);
    margin: 14px auto;   /* center */
  }

  /* Label absolute position werkt alleen als parent relative is */
  .cover{ position: relative; }

  /* Logo iets kleiner zodat hij niet buiten beeld valt */
  .logo{
    width: 78%;
    height: 78%;
    border-radius: 16px;
  }

  /* Bandcamp: wat ruimte */
  .bandcamp{
    margin-top: 14px;
    padding-inline: 12px;
  }
}

/* Extra: voor hele smalle schermen */
@media (max-width: 360px){
  h1{ font-size: 2em; }
  p2{ font-size: 1.05em; }
}