html {
  color: #222;
  background-image: linear-gradient(to right, #012d32, #105c56, #18978e);
  font-size: 1em;
  line-height: 1.4;
}
.tagesschrift-regular {
  font-family: "Tagesschrift", system-ui;
  font-weight: 400;
  font-style: normal;
}
.sansation-light {
  font-family: "Sansation", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.sansation-regular {
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sansation-bold {
  font-family: "Sansation", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.sansation-light-italic {
  font-family: "Sansation", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.sansation-regular-italic {
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.sansation-bold-italic {
  font-family: "Sansation", sans-serif;
  font-weight: 700;
  font-style: italic;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

body{
  margin: 0;
}
.cover
{
  width: 100%;
  overflow: hidden;
  margin-top: -22%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: -29%;
  height: 50%;
  clip-path: inset(0 0 20% 0);
  padding: 0;
}
.name a
{
  text-decoration: none;
  color: #e3c5af;
}
.name a:hover
{
  color: #d6bba7;
}
.initial
{
  width: 100%;
  position: absolute;
  top: 0;
}
.links
{
  text-align: right;
  width: 40%;
  position: absolute;
  right: 0;
  display: inline-block;
  padding: 5px;
  margin-right: 10px;
}
.links a
{
  color: #e3c5af;
  text-decoration: none;
  text-underline: none;
}
.links a:hover
{
  color: #c3aa98;
}
.tilein
{
  width: 10%;
  height: 20%;
  padding: 2%;
  margin-right: 5px;
  display: inline-block;
  text-shadow: 1px 3px 2px black;
}
.signup
{
  box-shadow: 1px 1px 2px black;
}

.albumname
{
  text-align: center;
  width: 50%;
  height: 10%;
  font-size: 5em;
  font-family: Tagesschrift, serif;
  color: #E3C5AF;
  position: absolute;
  top:350px;
  left: 25%;
  right: 25%;
  margin-left: 0;
  margin-right: 0;
  text-shadow: 4px 5px 3px #003F45;
}
.albuminfo
{
  text-align: center;
  width: 50%;
  height: 5%;
  font-size: 2em;
  font-family: fantasy;
  position: absolute;
  top:520px;
  left: 25%;
  right: auto;
  margin-left: 0;
  margin-right: 0;
  text-shadow: 1px 4px 1px #003F45;
}
.listen
{
  text-align: center;
  display: inline-block;
  color: #E3C5AF;
  text-decoration: none;
  margin-right: auto;
}
.listen:hover
{
  opacity: 0.8;
}
.emptiness
{
  display: inline-block;
  width: 10%;
}
.presave
{
  text-align: center;
  display: inline-block;
  color: #E3C5AF;
  text-decoration: none;
  margin-left: auto;
}
.presave:hover
{
  opacity: 0.8;
}
.socials
{
  text-align: center;
  min-height: 5%;
  justify-content: center;
  width: 100%;
  position: absolute;
  top: 700px;
  padding-top: 1%;
  padding-bottom: 1%;
}

.soc
{
  text-align: center;
  width: 3%;
  display:inline-block;
  margin: 0 2% 0 2%;
}
.soc:hover
{
  opacity: 0.7;
}
/* The sidepanel menu */
.sidepanel {
  height: 50%; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
  position: fixed;
  left: 0;
  bottom: 20%;
}

.openbtn:hover {
  background-color: #444;
}
/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 50%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  bottom: 25%;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 20%; /* 100% width */
  left:0;
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.container
{
  background-color: #E3C5AF;
  width: 50%;
  position: absolute;
  top: 105%;
  left: 25%;
  right: 25%;
  margin: 0;
  box-shadow: #e3c5af 0 0 22px 8px;
}
.titleee
{
  text-align: center;
  width: 50%;
  margin: 8% 25% 10% 25%;
  display: grid;
  padding: 2px;
  font-size: 25px;
  font-family: Tagesschrift, serif;
  color: #003F45;
  text-shadow: 1px 1px 2px #012d32;
}
.ytt:hover
{
  opacity: 0.8;
}
.cd:hover
{
  opacity: 0.8;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
:root {
  --footer-top-bg: #e3c5af;
  --footer-top-text: #014a51;
  --footer-top-heading: #012d32;
  --footer-top-link-hover: #105c56;

  --footer-bottom-bg: #012d32;
  --footer-bottom-text: #bca391;
  --footer-bottom-link-hover: #fddbc2;
}

.footer-twotier {
  color: var(--footer-top-text);
  position: absolute;
  top: 350%;
  width: 100%;
}

/* === TOP TIER STYLES === */
.footer-twotier__top {
  background-color: var(--footer-top-bg);
  padding: 3rem 1.5rem;
}

.footer-twotier__top-container {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* Mobile-first: single column */
  gap: 2rem;
}

.footer-twotier__brand p {
  margin: 1rem 0 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-twotier__brand .logo {
  width: 150px;
  fill: var(--footer-top-heading);
}

.footer-twotier__heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--footer-top-heading);
  margin-top: 0;
  margin-bottom: 1rem;
}

.footer-twotier__links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-twotier__links li {
  margin-bottom: 0.75rem;
}

.footer-twotier__links a {
  color: var(--footer-top-text);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer-twotier__links a:hover {
  color: var(--footer-top-link-hover);
  text-decoration: underline;
}

/* === BOTTOM TIER STYLES === */
.footer-twotier__bottom {
  background-color: var(--footer-bottom-bg);
  color: var(--footer-bottom-text);
  padding: 1.5rem;
}

.footer-twotier__bottom-container {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* Mobile-first: stack */
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  text-align: center;
}

.footer-twotier__bottom a {
  color: var(--footer-bottom-text);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer-twotier__bottom a:hover {
  color: var(--footer-bottom-link-hover);
  text-decoration: underline;
}

.footer-twotier__copyright {
  margin: 0;
}

.footer-twotier__social ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.footer-twotier__social a:hover {
  text-decoration: none; /* Icons don't need underline */
}

.footer-twotier__social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Media query for tablets and larger */
@media (min-width: 768px) {
  .footer-twotier__top-container {
    grid-template-columns: 1.5fr 1fr 1fr; /* 3 columns on larger screens */
    gap: 3rem;
  }
  .footer-twotier__bottom-container {
    flex-direction: row; /* Arrange horizontally */
    justify-content: space-between;
    text-align: left;
  }
}