*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#111827;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    display:flex;
    justify-content:center;
    padding:30px;
}

.container{

    width:100%;
    max-width:850px;

}

.search-area{

    position:sticky;

    top:0;

    background:#111827;

    padding:18px 0 20px 0;

    z-index:100;

    border-bottom:1px solid #263347;

}

h1{

    text-align:center;
    font-size:40px;
    margin-bottom:8px;

}

.subtitle{

    text-align:center;
    color:#9CA3AF;
    margin-bottom:30px;
    font-size:18px;

}

#searchBox{

    width:100%;
    padding:18px 22px;

    font-size:20px;

    border-radius:14px;

    border:2px solid #2563EB;

    background:#1F2937;

    color:white;

    outline:none;

    margin-bottom:30px;

}

#searchBox:focus{

    border-color:#F59E0B;

}

.song{

    background:#1F2937;

    border-radius:14px;

    padding:18px;

    margin-bottom:15px;

    transition:.2s;

    cursor:pointer;

}

.song:hover{

    transform:translateY(-2px);

    background:#273549;

}

.artist{

    color:#60A5FA;

    font-size:15px;

    margin-bottom:8px;

    font-weight:bold;

}

.title{

    font-size:22px;

    font-weight:bold;

}

.discid{

    margin-top:10px;

    color:#9CA3AF;

    font-size:13px;

}

.welcome{

    text-align:center;

    color:#9CA3AF;

    margin-top:70px;

    font-size:22px;

}
#counter{

    color:#9CA3AF;

    margin-bottom:20px;

    font-size:15px;

}
@media (max-width:700px){

    body{

        padding:15px;

    }

    h1{

        font-size:32px;

    }

    .subtitle{

        font-size:15px;

        margin-bottom:20px;

    }

    .title{

        font-size:20px;

    }

    #searchBox{

        font-size:18px;

        padding:16px;

    }

}
.footer{

    margin-top:60px;

    text-align:center;

    color:#9CA3AF;

    font-size:14px;

    padding:30px 0;

}

.footer a{

    color:#60A5FA;

    text-decoration:none;

}

.footer{

    margin-top:40px;

    padding:30px;

    text-align:center;

    color:#888;

    font-size:16px;

}

.footer a{

    display:inline-block;

    margin-top:8px;

    font-size:24px;

    font-weight:700;

    color:#2563eb;

    text-decoration:none;

}

.footer a:hover{

    text-decoration:underline;

}

.footer a {
    color: #60A5FA;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}
.show-more{

    background:#2563eb;

    color:white;

    border:none;

    border-radius:8px;

    padding:14px 24px;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

}

.show-more:hover{

    background:#1d4ed8;

}