/*
    Name: [Your Name]
    Date: [Current Date]
    File Name: styles.css
*/

/* CSS Reset & Base Styles */
html,body,header,nav,main,footer,h1,h2,h3,p,ul,li,a,div,article,section,aside,figure,figcaption,form,fieldset,legend,label,input,select,textarea,button,table,caption,thead,tbody,tr,th,td,audio{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
}
body{
    font-family:'Roboto',sans-serif;
    line-height:1.6;
    color:#333;
    overflow-x:hidden
}

/* Accessibility & Skip Link */
.skip-link{
    position:absolute;
    top:-40px;
    left:0;
    background:#2c3e50;
    color:#fff;
    padding:8px;
    z-index:100;
    transition:top 0.3s
}
.skip-link:focus{
    top:0
}

/* Header Styles */
header{
    background-color:#2c3e50;
    color:#ecf0f1;
    padding:20px;
    text-align:center;
    font-family:'Lobster',cursive;
    position:relative
}
header h1{
    font-size:clamp(2rem, 5vw, 3rem);
    margin-bottom:10px
}
header p{
    font-size:1.2rem;
    font-family:'Roboto',sans-serif
}

/* Hamburger Menu */
.hamburger{
    display:none;
    padding:15px;
    background:none;
    border:none;
    cursor:pointer;
    position:absolute;
    right:20px;
    top:20px;
    z-index:1000
}
.hamburger-box{
    width:30px;
    height:24px;
    display:inline-block;
    position:relative
}
.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{
    width:100%;
    height:3px;
    background-color:#ecf0f1;
    position:absolute;
    left:0;
    transition:transform 0.2s ease
}
.hamburger-inner{
    top:50%;
    transform:translateY(-50%)
}
.hamburger-inner::before{
    top:-8px
}
.hamburger-inner::after{
    top:8px
}

/* Navigation */
.nav{
    transition:transform 0.3s ease
}
.nav-list{
    list-style-type:none;
    padding:10px;
    background-color:#34495e;
    text-align:center
}
.nav-list li{
    margin:10px 0
}
.nav-list a{
    color:#ecf0f1;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:bold;
    display:block;
    padding:8px 0;
    transition:color 0.3s ease
}
.nav-list a:hover{
    color:#1abc9c
}

/* Main Content */
main{
    padding:20px;
    font-family:'Roboto',sans-serif;
    background-color:#ecf0f1;
    transition:transform 0.3s ease
}
article,section,aside{
    background-color:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
    margin-bottom:20px
}

/* Footer & Social Media */
footer{
    background-color:#2c3e50;
    color:#ecf0f1;
    padding:20px 10px;
    font-family:'Roboto',sans-serif
}
.footer-content{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    gap:20px
}
.social-media{
    display:flex;
    justify-content:center;
    gap:15px
}
.social-icon{
    width:40px;
    height:40px;
    transition:transform 0.3s ease, opacity 0.3s ease
}
.social-icon:hover{
    transform:scale(1.1);
    opacity:0.8
}
.footer-links{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px
}
.footer-links ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
    list-style:none
}
footer a{
    color:#1abc9c;
    text-decoration:none;
    transition:color 0.3s ease
}
footer a:hover{
    color:#ecf0f1
}

/* Common Components */
.grid-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
    gap:20px
}
.text-shadow{
    text-shadow:2px 2px 4px rgba(0,0,0,0.3)
}
.box-shadow{
    box-shadow:4px 4px 8px rgba(0,0,0,0.3)
}

/* Form Styles */
form{
    display:flex;
    flex-direction:column;
    gap:15px
}
fieldset{
    border:1px solid #ccc;
    border-radius:10px;
    padding:15px
}
legend{
    font-weight:bold;
    color:#16a085
}
input,select,textarea{
    padding:10px;
    border:1px solid #ccc;
    border-radius:5px;
    width:100%
}
button{
    padding:10px 20px;
    background-color:#16a085;
    color:#fff;
    border:none;
    border-radius:5px;
    cursor:pointer;
    transition:background-color 0.3s ease
}
button:hover{
    background-color:#1abc9c
}

/* Responsive Tables */
.table-container{
    overflow-x:auto;
    margin-bottom:20px
}
table{
    width:100%;
    border-collapse:collapse
}
th,td{
    padding:10px;
    text-align:left;
    border-bottom:1px solid #ccc
}
th{
    background-color:#16a085;
    color:#fff
}
tr:nth-child(even){
    background-color:#f4f4f4
}

/* Audio Player */
.audio-container{
    margin:20px 0;
    padding:15px;
    background-color:#f4f4f4;
    border-radius:10px;
    text-align:center
}
audio{
    width:100%;
    max-width:400px;
    margin:10px auto;
    display:block;
    background-color:#fff;
    border-radius:5px;
    box-shadow:0 2px 5px rgba(0,0,0,0.1)
}

/* Mobile Styles */
@media screen and (max-width:767px){
    .hamburger{
        display:block
    }
    .nav{
        position:fixed;
        top:0;
        left:0;
        width:250px;
        height:100vh;
        background-color:#2c3e50;
        transform:translateX(-100%);
        z-index:999;
        padding-top:80px
    }
    .nav.active{
        transform:translateX(0)
    }
    .hamburger.active .hamburger-inner{
        transform:rotate(45deg)
    }
    .hamburger.active .hamburger-inner::before{
        transform:rotate(-90deg) translateX(-8px)
    }
    .hamburger.active .hamburger-inner::after{
        opacity:0
    }
    main.active{
        transform:translateX(250px)
    }
}

/* Tablet Styles */
@media screen and (min-width:768px){
    .nav-list{
        display:flex;
        justify-content:center
    }
    .nav-list li{
        margin:0 15px
    }
    h2{
        font-size:2rem
    }
    h3{
        font-size:1.5rem
    }
    .footer-content{
        grid-template-columns:1fr 1fr;
        align-items:center
    }
    .social-icon{
        width:50px;
        height:50px
    }
}

/* Desktop Styles */
@media screen and (min-width:1024px){
    #main-content{
        max-width:1200px;
        margin:0 auto;
        padding:40px
    }
    h2{
        font-size:2.5rem
    }
    h3{
        font-size:2rem
    }
    .footer-content{
        grid-template-columns:1fr 2fr
    }
    .footer-links{
        flex-direction:row;
        justify-content:flex-end
    }
}