@charset "utf-8";
/* CSS Document */
/* logo media */
.logo {
	width: 100%;
	height: auto;
	position: relative;
  text-align: center;
}
img.box{
	width: 100%;
	height: auto;
	}
img {
	width: 100%;
	height: auto;
	}
/* Text */
h1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #D5D5D5;
	text-align: left;
}
h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #D5D5D5;
	text-align: left;
}
p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #D5D5D5;
	text-align: left;
}
p.popis {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	color: #D5D5D5;
	text-align: center;
}

/* album */
.album {
	width: 100%;
	height: auto;
	position: relative;
  text-align: center;
}

/* album-content */ 
.album-content{
 	position: absolute;
	top: 1%;
}
.top-buffer { 
	margin-top: 12%; 
}

.tracklist{
 	position: absolute;
	top: 60%;
}
.center{
	padding: 20px;
}
/* button */
html{
	scroll-behavior: smooth;
	}
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: white; /* Set a background color */
  color: black; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
/* social buttons */
.socdivbut{
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 8%;
	}
.social-buttons a{
  display: inline-flex;
  text-decoration: none;
  font-size: 25px;
  width: 40px;
  height: 40px;
  color: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 8px;
}

.social-buttons a::before{
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg,#22a6b3,#30336b);
  border-radius: 50%;
  z-index: -1;
  transition: 0.3s ease-in;
}

.social-buttons a:hover::before{
  transform: scale(0);
}

.social-buttons a i{
  transition: 0.3s ease-in;
}

.social-buttons a:hover i{
  background: linear-gradient(45deg,#22a6b3,#30336b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}


/* texty */
/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
	  color: white;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
	color: white;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
	  color: white;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
	  color: white;
}
/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	color: white;
}
/* Centered text */
.nadpis {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%, -50%);
	color: white;
}