html {scroll-behavior: smooth; scroll-padding-inline: 1;}
a, div, section { transition: all 2s ease-out;}
body {
  font-family: serif;
  background: #f2f2f2;
  padding: 30px;
}

.audio-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); margin: 0px;
  padding: 12px;
  gap: 45px;
  border: 1px solid #f00;
  width: 100%;
}
h1 {min-width: 100%;
  text-align: center;
  margin-bottom: 30px;
}

.audio-box {
  width: 90%;
  max-width: 90%;
  margin: 25px auto;
  background: #ffffff;
  padding: 50px 5px 5px 5px;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.18);
}

.audio-box h2 {
  text-align: center;
  margin-top: 0;
}

.controls { padding: 4px; box-shadow: 0px 0px 7px #000; border-radius: 1em;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap; background: #eee;
}

button {width: 31%;
  padding: 25px 10px;
  font-size: 1.5em;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 0px 7px #000;
  color: #007; 
}

button:hover {
  background: #ff0; color: #f00;
}

.progress-area {
  margin: 18px 0px; height: 30px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 10px;
}

.current-time,
.duration-time {
  font-size: 1.2em;
  color: #333;
  text-align: center;
}

.progress-bar {background: #aaa;
  width: 100%; 
  cursor: pointer;
}

.info {
  margin-top: 12px;
  text-align: center;
  font-size: 1em;
  color: #333;
}
a:link {display: grid; width: 90%; padding: 7px; text-align: center; background: #ddd; color: #000; margin: 14px auto; border-radius: 20px; text-decoration: none; box-shadow: 0px 0px 7px #00f;}
@media only screen and (max-width: 1020px) {
.audio-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90%, 1fr));
  gap: 25px;}
button {
  padding: 70px 7px;
  font-size: 3em;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background: #1976d2;
  color: white;
}
a:link {font-size: 70px; padding: 10px; margin: 40px auto; border-radius: 50px;}
p, h2 {font-size: 70px;}
h2 {color: red;}
.progress-area {
  margin: 28px 0px; height: 60px;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  align-items: center;
  gap: 10px;
}

.current-time,
.duration-time {
  font-size: 2.5em;
  color: #333;
  text-align: center;
}

.progress-bar {background: #aaa; height: 100px;
  width: 100%; 
  cursor: pointer;
}
button {width: 31%; margin: 14px 7px;}
.controls {padding: 21px 14px; gap: 3px;}
.info {font-size: 3em; color: #00f;}
}