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


body {

    font-family:Arial, Helvetica, sans-serif;
    background:#080808;
    color:white;
    line-height:1.6;

}



/* =========================
   HERO
========================= */


.hero {

    min-height:720px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;


    background:

    linear-gradient(
    135deg,
    rgba(0,0,0,.92),
    rgba(80,0,90,.55)
    ),

    url("../images/background.jpg");


    background-size:cover;
    background-position:center;

}



.hero-content {

    max-width:900px;
    padding:40px;

}



.logo {

    width:190px;
    margin-bottom:25px;

    filter:
    drop-shadow(0 0 25px rgba(255,255,255,.25));

}



.hero h1 {

    font-size:75px;
    letter-spacing:4px;

}



.hero p {

    font-size:26px;
    color:#ddd;
    margin-bottom:30px;

}







/* =========================
   BUTTONS
========================= */


.buttons {

    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;

}



.buttons a,
.booking-button {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:14px 30px;


    background:white;


    color:#111;


    border-radius:40px;


    text-decoration:none;


    font-weight:bold;


    transition:.3s;


}



.buttons a:hover,
.booking-button:hover {


    transform:translateY(-5px);


    box-shadow:

    0 10px 25px rgba(255,255,255,.25);


}







/* =========================
   NEUE SINGLE
========================= */


.latest-release {


    margin:40px auto;


    max-width:700px;


    display:flex;


    align-items:center;


    gap:25px;


    padding:25px;


    border-radius:30px;


    background:

    rgba(255,255,255,.08);


    backdrop-filter:blur(15px);


}



.latest-release img {


    width:170px;


    border-radius:20px;


}



.latest-release-content {

    text-align:left;

}



.latest-release span {


    color:#ff4fd8;

    font-weight:bold;

}



.latest-release h2 {

    font-size:32px;

}



.latest-release a {


    display:inline-block;


    margin-top:10px;


    margin-right:8px;


    background:white;


    color:black;


    padding:10px 18px;


    border-radius:25px;


    text-decoration:none;


}







/* =========================
   SECTIONS
========================= */


section {

    padding:70px 8%;

}



h2 {

    text-align:center;

    font-size:40px;

    margin-bottom:45px;

}







/* =========================
   STREAMING
========================= */


.streaming-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));


    gap:30px;


}



.stream-card {


    padding:35px;


    border-radius:30px;


    text-align:center;


    background:#141414;


    border:

    1px solid rgba(255,255,255,.08);


    transition:.3s;


}



.stream-card:hover {


    transform:translateY(-10px);


}



.stream-card h3 {


    font-size:30px;

}



.stream-card a {


    display:inline-block;


    margin-top:20px;


    padding:12px 25px;


    background:white;


    color:black;


    border-radius:30px;


    text-decoration:none;


    font-weight:bold;


}



.youtube h3 {

    color:#ff3333;

}



.spotify h3 {

    color:#1ed760;

}



.tiktok h3 {

    color:#ff4fd8;

}







/* =========================
   ABOUT
========================= */


.about {

    text-align:center;

}



.about p {


    max-width:850px;


    margin:0 auto 25px auto;


    font-size:18px;


}







/* =========================
   ÜBER MICKYMOOD
========================= */


.artist-bio,
.artist-style,
.artist-links {


    text-align:center;


}



.artist-bio p,
.artist-style p {


    max-width:850px;


    margin:

    0 auto 25px auto;


    font-size:18px;


}



.artist-bio strong,
.artist-style strong {


    font-size:22px;


}







/* =========================
   RELEASES / VIDEOS
========================= */


.release-grid,

.video-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));


    gap:30px;


}



.release-card,

.video-card {


    background:#141414;


    padding:20px;


    border-radius:25px;


    text-align:center;


    transition:.3s;


}



.release-card:hover,

.video-card:hover {


    transform:translateY(-8px);


}



.release-card img,

.video-card img {


    width:100%;


    border-radius:20px;


    margin-bottom:15px;


}



.release-card a,

.video-card a {


    color:white;


    text-decoration:none;


    margin:8px;


}







/* =========================
   DISCOGRAFIE BUTTON
========================= */


.more-releases {


    display:flex;


    justify-content:center;


    margin-top:50px;


}



.more-releases a {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:16px 40px;


    background:

    linear-gradient(
    135deg,
    #ffffff,
    #dddddd
    );


    color:#111;


    border-radius:50px;


    text-decoration:none;


    font-size:18px;


    font-weight:bold;


    transition:.35s;


}



.more-releases a:hover {


    transform:

    translateY(-6px) scale(1.03);


}







/* =========================
   ZURÜCK BUTTON
========================= */


.back-button {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    margin-top:30px;


    padding:14px 35px;


    background:

    rgba(255,255,255,.12);


    border:

    1px solid rgba(255,255,255,.25);


    color:white;


    border-radius:40px;


    text-decoration:none;


    font-weight:bold;


    font-size:17px;


    transition:.35s;


}



.back-button:hover {


    background:white;


    color:black;


    transform:translateY(-5px);


}







/* =========================
   BOOKING
========================= */


.booking {

    text-align:center;

}







/* =========================
   FOOTER
========================= */


footer {


    text-align:center;


    padding:40px;


    background:#050505;


    color:#aaa;


}







/* =========================
   MOBILE
========================= */


@media(max-width:700px){


.hero h1 {

    font-size:45px;

}



.hero p {

    font-size:20px;

}



.latest-release {


    flex-direction:column;


}



.latest-release-content {


    text-align:center;


}



}