* {
     padding: 0;
     margin: 0;
     font-family: 'Noto Sans', sans-serif;
     line-height: 1.6;
}

main {
     margin: 80px 10px;
}

header {
     display: flex;
     background: #333;
     height: 50px;
     width: 100vw;
     position: fixed;
     top: 0;
     color: #fff;
     z-index: 99999
}

.header-buttons {
     display: flex;
     margin-left: auto;
     gap: 10px;
}

.logo img {
     height: 50px;
     width: 50px;
     
}

.logo a {
     text-decoration: none;
     color: #fff;
     display: block;
     height: 50px;
     cursor: pointer;
}

.logo a:hover {
     border: 0.5px dotted #fff;
     height: 50px;
}

nav {
     background: white;
     width: 310px;
     height: calc(100vh - 50px);
     margin-top: 50px;
     position: fixed;
     overflow-y: auto;
     overflow-x: hidden;
     display: flex;
     flex-direction: column;
     right: -310px;
     top: 0;
     transition: right 0.3s linear;
     z-index: 1001;
}

nav a {
     text-decoration: none;
     color: #000;
     font-size: 24px;
     display: flex;
     padding: 15px;
     align-items: left;
     gap: 10px;
     border-bottom: 0.5px dotted #000;
}

.active {
     font-weight: bold;
     color: blue;
     border-right: 10px solid blue;
}

nav.open {
     right: 0;
}

nav a:hover {
     background: #dcdcdc;
     color: #ff0000;
     font-weight: bolder;
}

ul li {
     list-style: none;
}

.search-btn, .hamburger-btn{
     height: 50px;
     width: 50px;
     border: none;
     background: transparent;
     color: #fff;
     cursor: pointer;
}

.search-btn:hover, .hamburger-btn:hover{
     border: 0.5px dotted #fff;
}

.user-avatar {
     align-self: center;
}

.user-avatar img {
     margin-top: 10px;
     height: 30px;
     width: 30px;
     border: 1px solid white;
     border-radius: 50%;
     object-fit: cover;
     cursor: pointer;
     background: grey;
     margin: 0 auto;
     display: block;
}

#clock {
     font-size: 1rem;
     padding: 5px 10px;
     background: #00ffff;
     border-radius: 15px;
     border: 0.5px solid #000;
     text-align: center;
     font-weight: 1000;
     color: black;
}

.weekly-banner {
     height: auto;
     width: 100%;
     background: whitesmoke;
     color: black;
     border: 0.1px solid black;
     border-radius: 5px;
}

.weekly-banner img {
     height: auto;
     width: 100%;
     
}

.banner-description {
     padding: 15px;
}

.learn-more-btn {
     background: blue;
     border: none;
     height: 40px;
     width: 100px;
     cursor: pointer;
     font-size: 20px;
     color: white;
     border-radius: 5px;
     transition: all 0.2s ease;
}

.learn-more-btn:hover {
     box-shadow: 0 0 10px darkcyan;
}

.links-container {
     margin: auto;
     height: auto;
     background: whitesmoke;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
     border-radius: 10px;
}

.links-container a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    text-decoration: none;
    color: #000;
}

/* image left */
.links-container img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.links-container:hover {
     border: 0.5px dotted black;
}

footer {
     background: black;
     color: white;
     font-size: 16px;
     text-align: center;
   
}

footer a {
     color: white;
     text-decoration: none;
}

.audio-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 15px;
     border-bottom: 1px solid #e0e0e0;
     text-decoration: none; /* remove underline */
     color: inherit;        /* inherit text color */
}

.audio-img {
     width: 70px;
     height: 70px;
     border-radius: 5px;
     object-fit: cover;
     margin-right: 15px;
}

.audio-info {
     flex-grow: 1;
}

.audio-title {
     font-weight: bold;
}

.audio-duration {
     margin-left: 15px;
     white-space: nowrap;
     color: #666;
}