/* Theming */
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); 
/* import font */
:root{
    --white: #f9f9f9; --black: 
    #36383F;
    --gray: #85888C;
}
 /* variables*/
/* Reset */ *{ margin: 0; 
    padding: 0; box-sizing: 
    border-box;
}
body{ background-color: 
    var(--white); font-family: 
    "Poppins", sans-serif;
}
a{ text-decoration: none;
}
ul{ list-style: none;
}


/* Header */ 
.header{ 
    background-color: 
    var(--black); box-shadow: 1px 
    1px 5px 0px var(--gray); 
    position: sticky; top: 0; 
    width: 100%;
}
/* Logo */ .logo{ display: 
    inline-block; color: 
    var(--white); font-size: 
    60px; margin-left: 10px;
}



/* Nav menu */ .nav{ width: 100%; 
    height: 100%; position: 
    fixed; background-color: 
    var(--black); overflow: 
    hidden;
}
.menu a{ display: block; padding: 
    30px; color: var(--white);
}
.menu a:hover{ background-color: 
    var(--gray);
}
.nav{ max-height: 0; transition: 
    max-height .5s ease-out;
}



/* Menu Icon */ .hamb{ cursor: 
    pointer; float: right; 
    padding: 40px 20px;
}/* Style label tag */
.hamb-line { background: 
    var(--white); display: block; 
    height: 2px; position: 
    relative; width: 24px;
} /* Style span tag */
.hamb-line::before, 
.hamb-line::after{
    background: var(--white); 
    content: ''; display: block; 
    height: 100%; position: 
    absolute; transition: all .2s 
    ease-out; width: 100%;
}
.hamb-line::before{ top: 5px;
}
.hamb-line::after{ top: -5px;
}
.side-menu { display: none;
} /* Hide checkbox */


/* Toggle menu icon */ 
.side-menu:checked ~ nav{
    max-height: 100%;
}
.side-menu:checked ~ .hamb 
.hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb 
.hamb-line::before {
    transform: rotate(-45deg); 
    top:0;
}
.side-menu:checked ~ .hamb 
.hamb-line::after {
    transform: rotate(45deg); 
    top:0;
}
body:has(.side-menu:checked) { 
  overflow: hidden;
}









.music-nav-container { 
    background-color: #f5f5f5; /* 
    Light grey background from 
    image */ padding: 20px; 
    text-align: center; 
    font-family: 'Arial Black', 
    Gadget, sans-serif;
}
/* Link Styling */ .links { 
    line-height: 1.8; 
    margin-bottom: 20px;
}
.links a { color: #ff1a1a; /* 
    Bright red */ 
    text-decoration: none; 
    font-weight: 900; font-size: 
    1.2rem; white-space: nowrap;
}
/* Double Bar Separators */ 
.links a:not(:last-child)::after 
{
    content: " || "; color: #000; 
    /* Black bars */ padding: 0 
    5px;
}
/* Search Input */ 
.search-section {
    max-width: 400px; margin: 0 
    auto 20px auto;
}
.search-input { width: 100%; 
    padding: 10px; border: 1px 
    solid #ccc; background: #fff; 
    margin-bottom: 10px;
}
/* Buttons Base */ button { 
    background-color: #ef5350; /* 
    Reddish button color */ 
    color: white; border: none; 
    font-weight: bold; cursor: 
    pointer; text-transform: 
    uppercase;
}
.btn-search { padding: 12px 60px; 
    font-size: 1rem;
}
/* Action Buttons Container */ 
.action-buttons {
    display: flex; 
    justify-content: center; gap: 
    10px;
}
.btn-download, .btn-play { 
    padding: 10px 20px; 
    border-radius: 4px; display: 
    flex; align-items: center; 
    gap: 10px; font-size: 0.9rem; 
    box-shadow: 0 2px 4px 
    rgba(0,0,0,0.2);
}
.icon { font-size: 1.2rem;
}




/* General Reset */ body { 
    font-family: Arial, 
    sans-serif; line-height: 1.4; 
    color: #333; padding: 15px; 
    background-color: #fff;
}
.container { max-width: 600px; 
    margin: 0 auto;
}
/* Header Styling */ header h1 { 
    font-size: 24px; font-weight: 
    800; text-transform: 
    uppercase; margin-bottom: 
    20px; letter-spacing: -0.5px;
}
/* Post Container */ .post { 
    border-top: 1px solid #eee; 
    padding: 25px 0;
}
.post-content { display: flex; 
    gap: 15px; align-items: 
    flex-start;
}
/* Image Styling */ .thumbnail { 
    width: 130px; height: auto; 
    object-fit: cover;
}
/* Text Styling */ .title { 
    font-size: 18px; font-weight: 
    bold; margin: 0 0 8px 0; 
    cursor: pointer;
}
.highlighted { color: #e5534b; /* 
    The reddish-orange color from 
    the top post */
}
/* Metadata (Date/Author) */ 
.meta {
    color: #999; font-size: 13px; 
    display: flex; align-items: 
    center; gap: 8px;
}
.source { margin-top: 15px; 
    color: #999; font-size: 12px; 
    text-transform: uppercase;
}
/* Responsive adjustments */ 
@media (max-width: 480px) {
    .thumbnail { width: 100px;
    }
    .title { font-size: 16px;
    }
}








/* Base Styles */ body { 
    font-family: Arial, 
    sans-serif; margin: 0;
}
/* Contact Section */ 
.contact-section {
    padding: 20px;
}
.section-title { border-bottom: 
    3px solid #e5534b; display: 
    inline-block; padding-bottom: 
    5px; margin-bottom: 15px; 
    font-weight: bold;
}
.contact-box { background-color: 
    #cceeff; /* Light blue 
    background */ padding: 20px; 
    line-height: 1.6; 
    font-weight: bold;
}
.contact-box a { color: #000; 
    text-decoration: none;
}
/* Footer Section */ .main-footer 
{
    background-color: #333; /* 
    Dark grey/black background */ 
    color: #999; text-align: 
    center; padding: 30px 15px; 
    font-size: 14px;
}
.main-footer p { margin: 10px 0;
}
.main-footer strong { color: 
    #ccc;
}
/* Footer Navigation */ 
.footer-links {
    margin: 20px 0;
}
.footer-links a { color: #e5534b; 
    /* Red links */ 
    text-decoration: none; 
    font-weight: bold; font-size: 
    16px;
}
/* Social Icons Placeholder */ 
.social-icons {
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; gap: 8px; 
    margin-top: 20px;
}
.icon { width: 35px; height: 
    35px; display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 4px; color: 
    #fff;
    font-weight: bold; 
    background-color: #444; /* 
    Default bg */
}
/* Specific Brand Colors 
(Optional) */ .fb { 
background-color: #3b5998; } .tw 
{ background-color: #00acee; } 
.gp { background-color: #db4a39; 
}
.ig { background-color: #3f729b; 
}