body {
  background: url("amer-football-2000.webp") no-repeat center center fixed;
  background-size: cover;
  color: #eee;
  font-family: 'Rock Salt', cursive;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.1));
  z-index: -1;
}
.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: fixed;
  z-index: 2; /* above the rain canvas */
}
.emo-nav {
  color: #d2b48c;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: rgba(0,0,0,0.90);
}

.emo-nav .nav-logo img {
  width: 100%;
  height: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: 12px;
  justify-content: flex-end; 
  flex-wrap: wrap;
}
.nav-links a {
  display: inline-block;
  padding: 6px 12px;
  text-decoration: none;
  color: rgba(0,95,0,0.65);
  font-weight: bold;
  text-shadow: 0 0 2px rgb(205,206,255);
  transition: all 0.2s ease-in-out;
}
.nav-links a:hover {
  background: rgba(0,95,0,0.65);
  color: white;
}
/* Big dramatic star wrapper */
.dog-bg {
  width: 400px;
  height: 431px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
} 
.radio-player {
  width: 100%;
  height: 100%;
  margin-left:30px;
  background-image: url("dogstarlogo.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
audio {
  width: 100%;
  outline: none;
  border-radius: 10px;
  margin-bottom: 10px;
}

button {
  /*background-image: url("/radio/dogstar-assets/placeholder-play.png");*/
  color: rgb(253, 101, 0);
  border: none;
  padding: 16px;
  background: rgba(67, 95, 40, 0.78);
  transition-duration: 0.2s;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
}
button:hover{
  color:green;
  background: rgba(1, 255, 1, 0.658);
  animation: wiggle .3s linear infinite;
}

.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  align-items: end;
  justify-content: space-between;

  padding: 0px 10px;
  min-height: 120px;

  background-image: url("bg-trees-transparent.png");
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: auto 180px;
  background-color: rgba(13, 14, 13, 0.001
  );


  font-size: 12px;
  color: rgba(0, 90, 0, 0.9);
}

.site-footer a {
  text-decoration: none;
  color: rgba(0,95,0,0.65);
}
/* Responsive star scaling */
@media (max-width: 1024px) {
  .dog-bg {
    width: 600px;
    height: 600px;
    padding: 8px;
  }
}
@media (max-width: 800px) {
  .dog-bg {
    width: 450px;
    height: 450px;
    padding: 6px;
  }
}
@media (max-width: 600px) {
  .emo-nav {
    flex-direction: column;
    align-items: center;
  }
  .nav-links {
    flex-direction: column;  
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .nav-links a {
    padding: 8px 0;
    width: 100%; 
  }
  .emo-nav .nav-logo {
    max-width: 200px;
    margin-bottom: 10px;
  }
  .dog-bg {
    width: 300px;
    height: 300px;
    padding: 5px;
  }
}

/*wiggly hover effect pulled from the Borderworld site*/
@keyframes wiggle{
  0% {filter: url("#dancingstroke0");}
  25% {filter: url("#dancingstroke1");}
  50% {filter: url("#dancingstroke2");}
  75% {filter: url("#dancingstroke3");}
  100% {filter: url("#dancingstroke4");}
}