@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap");
body {
	background-color: #1a1a1a;
	overflow-x: hidden;
	color: #b9b9b9;
	margin: 0px;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
* {
	font-family: "Plus Jakarta Sans";
}
img{
	-webkit-user-drag: none;
}
.covers {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 90%;
	transition: transform 0.2s ease-in-out;
}

.covers > div {
	perspective: 400px;
	width: 80px;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
	padding: 10px;
}

.covers > div > .coverimg {
	transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
	width: 250px !important;
	border-radius: 10px;
	box-shadow: 1px 1px 20px black;
	height: 250px !important;
	transform: rotate3d(0, 1, 0, 65deg);
	filter: brightness(20%);
}
.covers > div:hover > .coverimg {
	transform: rotateX(0deg) rotateY(0deg);
	transition: 0.5s;
	width: 250px !important;
	height: 250px !important;
	filter: brightness(100%);
}

.covers > div:hover {
	transform: rotateX(0deg) rotateY(0deg);
	transition: 0.5s;
	width: 250px !important;
	height: 250px !important;
}

#metallica,
#linkinpark {
	display: none;
	flex-direction: column;
	transition: transform 0.4s ease-in-out;
}
.coverimg {
	border-radius: 20px;
}
.content {
	display: block;
	margin: 0 auto;
	width: 80%;
}

.met-info,
.lp-info {
	margin-bottom: 20px;
	color: #fff;
	padding: 5px;
	text-indent: 20px;
}
.tooltip {
	position: relative;
	display: inline;
	text-indent: 0px;
}
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #0a0a0a;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	position: absolute;
	padding: 5px;
	z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}
.tooltip .tooltiptext {
	width: 300px;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
	word-break: keep-all;
}
.tabs {
	display: flex;
	flex-direction: row;
	gap: 20px;
	border-radius: 20px;
	justify-content: space-evenly;
	background-color: #272727;
	border: 2px solid #000000;
	width: 300px;
}

.metallica-group-foto,
.linkinpark-group-foto {
	width: 50%;
	margin: 0 auto;
}
::-webkit-scrollbar {
	width: 8px;
	border-radius: 25px;
	background-color: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	transition: 0.5s;
}
#mettitle:hover,
#lptitle:hover {
	transform: scale(0.8);
	cursor: pointer;
	transition: 0.25s;
}
.screenshots {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.screenshot {
	width: 250px;
	border-radius: 10px;
	transition: transform 0.2s ease-in-out;
}
.screenshot:hover {
	transform: scale(1.07);
}
.vinyl {
	display: none;
	width: 200px !important;
	animation-name: spin;
	height: 200px;
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	position: relative;
	top: -20px;
	left: 5px;
	margin-top: -600px;
	border: 2px solid yellow;
	padding: 20px;
}
#baseInfo {
	padding-bottom: 30px;
}
#linkinpark > .covers {
	margin-top: -20px;
}
/* Snow */

.snowflakes {
	position: fixed;
    display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0; 
}

.snowflake {
	position: absolute;
	width: 8px;
	height: 8px;
	background-color: #fff;
	border-radius: 50%;
	opacity: 0.8;
	animation: snowflakes-fall linear infinite;
}

@keyframes snowflakes-fall {
	0% {
		transform: translateY(-10%);
	}
	100% {
		transform: translateY(100vh);
	}
}
.footer {
	position: sticky;
	margin-top: 40px;
	width: 100%;
	background-color: #2a2a2a;
	margin-bottom:0px;
	padding:5px;

}
.conns {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	padding-bottom: 10px;
	margin-bottom: 5px;
}
.footer-title {
	text-align: center;
}
.conns-lp {
	margin-top: 100px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.lpconn-btn {
	appearance: none;
	border: none;
	padding: 10px;
	border-radius: 5px;
	background-color: #272727;
	color: #ff4647;
}
.lpconn-btn:hover {
	background-color: #0a0a0a;
	transition: 0.27s;
	backdrop-filter: blur(5px);
}
.conn-link{
	text-decoration: none;
}
.container {
    display:none;
 z-index: 1;
 position: fixed;
 right: 15%;
 bottom: 31%;
}
@media only screen and (max-width:1440px) {
	.container {
		position: fixed;
		right: 14%;
		bottom: 39%;
	}
}
.socks {
 position: absolute;
 top: 80px; left: 10px;
 z-index: 1;
 transform: rotate(10deg);
}

.socks.two {
 position: absolute;
 top: 143px; left: -40px;
 z-index: 1;
 transform: rotate(-10deg);
}

.socks:hover {
 animation: 1.9s deco  linear infinite;
}

.top {
 position: absolute;
 width: 15px;
 height: 35px;
 background: #E54B4B;
 border-radius: 5px;
}

.foot {
 position: absolute;
 top: 20px; left: 0;
 width: 25px;
 height: 15px;
 border-radius: 30px;
 background: #E54B4B;
}


.foot.two {
 position: absolute;
 top: 20px; left: -10px;
 width: 25px;
 height: 15px;
 border-radius: 30px;
 background: #E54B4B;
}

.tree {
 position: absolute;
}

.base {
 width: 210px;
 height: 10px;
 position: absolute;
 top: 304px; left: -45px;
 border-radius: 100%;
}

.base:after {
 content: '';
 width: 20px;
 height: 20px;
 background: #84714F;
 position: absolute;
 top: -25px; left: 83px;
}

.layer {
 position: absolute;
 width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid #499F68;
}

.layer.two{
 position: absolute;
 top: 30px; left: -10px;
 border-left: 60px solid transparent;
   border-right: 60px solid transparent;
   border-bottom: 120px solid #499F68;
}

.layer.three{
 position: absolute;
 top: 50px; left: -30px;
 border-left: 80px solid transparent;
   border-right: 80px solid transparent;
   border-bottom: 160px solid #499F68;
}

.layer.four{
 position: absolute;
 top: 80px; left: -50px;
 border-left: 100px solid transparent;
   border-right: 100px solid transparent;
   border-bottom: 200px solid #499F68;
}


.bauble {
 z-index: 1;
 position: absolute;
 border-radius: 100%;
}

.bauble.one { 
 top: 65px;
 width: 13px;
 height: 13px;
 background: #FFE066;
} 

.bauble.two { 
 top: 105px; left: -30px;
 width: 13px;
 height: 13px;
 background: #FFE066;
} 

.bauble.three { 
 top: 110px; left: 15px;
 width: 13px;
 height: 13px;
 background: #FFE066;
} 

.bauble.four { 
 top: 163px; left: -30px;
 width: 13px;
 height: 13px;
 background: #FFE066;
} 

.deco {
 position: absolute;
 top: 130px; left: 30px;
 width: 50px;
 height: 20px;
 background: #EF476F;
 transform: rotate(0deg);
}
.line {
 z-index: 1;
 position: absolute;
 top: 70px; left: -43px;
 width: 70px;
 height: 0;
 background: #FFE066;
 border: 1px dashed #FFF;
 transform: rotate(-30deg);
}

.line.two {
 top: 93px; left: -50px;
 width: 85px;
 height: 0;
 background: #FFE066;
 border: 1px dashed #FFF;
 transform: rotate(-30deg);
}

.line.three {
 top: 123px; left: -60px;
 width: 106px;
 height: 0;
 background: #FFE066;
 border: 1px dashed #FFF;
 transform: rotate(-30deg);
}

.line.four {
 top: 153px; left: -80px;
 width: 136px;
 height: 0;
 background: #FFE066;
 border: 1px dashed #FFF;
 transform: rotate(-30deg);
}

.pressie {
 z-index: 1;
 position: absolute;
 top: 250px;  left: 120px;
 width: 60px;
 height: 60px;
 background: #F45B69;
}

.cover {
 position: absolute;
 left: -3px;
 width: 66px;
 height: 10px;
 background: #F45B69;
 border-bottom: 1px solid #AAA;
}
.wrap {
 position: absolute;
 left: 25px;
 background: #59C3C3;
 width: 10px;
 height: 60px;
}

.ribbon {
 position: absolute;
 top: -30px; left: 10px;
 background: #FFF;
 width: 12px;
 height: 25px;
 border-radius: 0 80% 20% 80%;
 border: 3px solid #59C3C3;
 transform: rotate(-10deg);
}

.ribbon:after {
 position: absolute;
 top: 0; left: 20px;
 background: #FFF;
 width: 12px;
 height: 25px;
 border-radius: 0 80% 20% 80%;
 border: 3px solid #59C3C3;
 transform: rotate(60deg);
 content: '';
}

.pressie:hover {
 animation: 0.2s move linear infinite;
}

@keyframes move {
 0% { transform: rotate(10deg)}
 50%{transform: rotate(-30deg)}
 100%{transform: rotate(10deg)}
}

@keyframes deco {
 0% { transform: rotate(5deg)}
 50%{transform: rotate(-10deg)}
 100%{transform: rotate(5deg)}
}

.light {
 box-shadow: 1px 1px 10px #CCC,
			  -2px 1px 10px #CCC,
				  0 -1px 10px #CCC
}

.star {
  z-index: 1;
  position: absolute;
  left: -49px; top: -40px;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right:  100px solid transparent;
  border-bottom: 70px  solid #FFE066;
  border-left:   100px solid transparent;
  transform: rotate(35deg) scale(.2);
}
.star:before {
  border-bottom: 80px solid #FFE066;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);

}
.star:after {
  position: absolute;
  display: block;
  color: red;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #FFE066;
  border-left: 100px solid transparent;
  transform:rotate(-70deg);
  content: '';
}

.star.two {
 transform: rotate(23deg) scale(.1);
 position: absolute;
 top: 102px; left: -60px;
}

.hidden{
	visibility: hidden;
}
.popup{
	z-index: 12;
	position: fixed;
	top:0px;
	left:0px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0, 0.75);
}
.modalbox{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 500px;
	height: 400px;
	border: 2px solid #000;
	border-radius: 20px;
	background-color: #1a1a1a;
	flex-direction: column;
	position: relative;

}
.modalbox >* {
	padding:20px;

}
  .modalButtons {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 10px;
  }
  
  .modaltitle{
	width: 100%;
	position: absolute;
	top:0px;
	margin: 0px;
	text-align: center;
  }
  .modalText{
	position: absolute;
	top:25px;
  }
  #close{
	appearance: none;
	border: none;
	padding: 10px;
	border-radius: 5px;
	background-color: #272727;
	color: #ff4647;
}

@keyframes snow {
	0% { background-position: 0 0, 0 0, 0 0, 0 0; }
	40% { background-position: 10px 14vmin, -20px 28vmin, 20px 20vmin, 10px 24vmin; }
	60% { background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin; }
	100% { background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin; }
  }
  
  @keyframes blink {
	0%, 6%, 100% { height: 12%; }
	3% { height: 0%; }
  }
  
  @keyframes moveMustache {
	0%, 40%, 44%, 100% { transform: translate(-100%, 0) rotate(25deg); }
	42% { transform: translate(-100%, 0) rotate(30deg); }
  }
  
  @keyframes moveMustache2 {
	0%, 40%, 44%, 100% { transform: rotate(-25deg); }
	42% { transform: rotate(-30deg); }
  }
  
  @media (prefers-reduced-motion) {
	* {
	  animation: none !important;
	}
  }
  
  
  .canvas {
	--skin: #fca;
	--eyes: #630a;
	--cheeks: #f001;
	--beard: #eee;
	--mustache: #fff;
	--suit: #a00;
	--belt: #222;
	--belt-buckle: gold;
	width: 15vmin;
	aspect-ratio: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-10%, -5%);
  }
  
  
  
  .head {
	--positionX: 27%;
	--positionY: 63%;
	position: absolute;
	top: 10%;
	left: 50%;
	border-radius: 50%;
	width: 25%;
	height: 25%;
	transform: translate(-50%, 0);
	background: var(--skin);
  }
  
  .eye {
	position: absolute;
	top: var(--positionY);
	left: var(--positionX);
	width: 12%;
	height: 12%;
	background: var(--eyes);
	border-radius: 50%;
	animation: blink 5s infinite linear;
  }
  
  .eye + .eye {
	left: auto;
	right: var(--positionX);
  }
  
  .cheek {
	position: absolute;
	top: calc(var(--positionY) + 7%);
	left: calc(var(--positionX) - 12%);
	width: 20%;
	height: 12%;
	background: var(--cheeks);
	border-radius: 50%;
  }
  
  .cheek + .cheek {
	left: auto;
	right: calc(var(--positionX) - 12%);
  }
  
  .beard {
	position: absolute;
	top: 10%;
	left: 50%;
	width: 30%;
	height: 40%;
	background: var(--beard);
	transform: translate(-50%, 0);
	border-radius: 100% / 120% 120% 80% 80%;
  }
  
  .mustache {
	position: absolute;
	top: 88%;
	left: 52%;
	width: 40%;
	height: 40%;
	background: var(--mustache);
	border-radius: 100% 10% 100% 0;
	transform-origin: top right;
	transform: translate(-100%, 0) rotate(25deg);
	animation: moveMustache 7s infinite linear;
  }
  
  .mustache + .mustache {
	left: 48%;
	border-radius: 10% 100% 0 100%;
	transform-origin: top left;
	transform: rotate(-25deg);
	animation: moveMustache2 7s infinite linear;
  }
  
  .hat {
	position: absolute;
	width: 98%;
	height: 80%;
	background: var(--suit);
	border-radius: 100% 20% 0 0;
	top: -40%;
	left: 50%;
	transform: translate(-50%, 0) rotate(1deg);
  }
  
  .hat::before {
	content: "";
	display: block;
	position: absolute;
	bottom: -17%;
	left: -5%;
	width: 110%;
	height: 40%;
	border-radius: 100% / 50%;
	transform: rotate(-2deg);
	background: radial-gradient(200% 100% at 50% 100%, #0000 30%, var(--mustache) 31%);
  }
  
  .hat::after {
	content: "";
	display: block;
	position: absolute;
	right: -25%;
	top: -15%;
	width: 40%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--beard);
  }
  
  .body {
	position: absolute;
	top: 35%;
	left: 50%;
	width: 50%;
	height: 50%;
	background: var(--suit);
	border-radius: 100% / 150% 150% 25% 25%;
	transform: translate(-50%, 0);
	background-image:
	  /* buttons */
	  radial-gradient(circle at 50% 36%, var(--belt) 2.75%, #0000 3%),
	  radial-gradient(circle at 50% 48%, var(--belt) 3%, #0000 3.25%),
	  radial-gradient(circle at 50% 60%, var(--belt) 2.75%, #0000 3%),
	  radial-gradient(circle at 50% 90%, var(--belt) 2.25%, #0000 2.5%),
	  /* belt */
	  radial-gradient(circle at 50% -50%, transparent 75%, var(--belt) 75.1% 83%, transparent 83.1%),
	  /* flap */
	  linear-gradient(to right, transparent 42%, white 42.2% 57%, transparent 57.2%);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 51% 100%, 50% 96%, 49% 100%, 0% 100%);
  }
  
  .belt {
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 23%;
	height: 15%;
	background: 
	  linear-gradient(var(--belt-buckle) 0 0) 75% 50% / 25% 12% no-repeat,
	  linear-gradient(var(--belt) 0 0) 50% 50% / 85% 80% no-repeat,
	  var(--belt-buckle);
  }
  
  
  .arms {
	position: absolute;
	top: 37%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 65%;
	height: 40%;
	background: #a00;
	border-radius: 100% / 170% 170% 25% 25%;
	background-image: linear-gradient(transparent 20%, #0003);
  }
  
  .hand {
	--positionX: 18%;
	position: absolute;
	top: 70%;
	left: var(--positionX);
	width: 13%;
	height: 13%;
	background: var(--belt);
	border-radius: 50%;
  }
  
  .hand + .hand {
	left: auto;
	right: var(--positionX);
  }
  
  .leg {
	position: absolute;
	top: 75%;
	left: 29%;
	width: 19%;
	height: 25%;
	background: var(--suit);
	transform: skew(2deg);
	background-image: linear-gradient(#0002, transparent 70%, var(--belt) 0);
  }
  
  .leg + .leg {
	left: 52%;
  }
  
  .leg::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: -6%;
	width: 110%;
	height: 20%;
	background: black;
	border-radius: 50% / 100% 100% 0 0;
  }
  
  .leg + .leg::after {
	left: -4%;
  }


.notblink{
	animation: none;
	height: 12%;
	width: 12%;
}