body{
    background:#020b1f url('') center top no-repeat;
    background-size:cover;
    color:#d7e3ff;
    font-family:Tahoma,Arial,sans-serif;
    font-size:14px;
}

/* LINK */
a{
    color:#6db8ff;
    transition:0.3s;
}

a:hover{
    color:#ffffff;
    text-decoration:none;
}

/* WRAPPER */
#wrapper{
    width:1100px;
    max-width:96%;
    margin:auto;
}

.boxed{
    background:rgba(5,12,30,0.95);
    border:1px solid #0d4f9c;
    border-radius:14px;
    box-shadow:
        0 0 12px rgba(0,153,255,0.35),
        inset 0 0 12px rgba(0,0,0,0.6);
}

.title-landing{
    text-align:center;
    color:#ffffff;
    font-size:2rem;
    font-weight:bold;
    text-transform:uppercase;
    text-shadow:
        0 0 10px rgba(0,140,255,0.7);
    margin-bottom:15px;
}

/* BUTTON */
#matchBtn,
#predictBtn{
    border:none;
    color:#ffffff;
    font-weight:bold;
    padding:14px;
    border-radius:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:0.3s;
}

/* BLUE ORANGE */
#matchBtn{
    background:linear-gradient(
        180deg,
        #1d8fff 0%,
        #0057c2 100%
    );
    box-shadow:
        0 0 10px rgba(0,153,255,0.5);
}

/* GREEN */
#predictBtn{
    background:linear-gradient(
        180deg,
        #00d084 0%,
        #008f5a 100%
    );
    box-shadow:
        0 0 10px rgba(0,255,128,0.35);
}

#matchBtn:hover,
#predictBtn:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
}

/* MATCH BOX */
.match-box{
    background:
        linear-gradient(
            180deg,
            rgba(8,18,40,0.98) 0%,
            rgba(3,10,25,0.98) 100%
        );
    border:1px solid #0b5ed7;
    border-radius:18px;
    padding:25px;
    margin-bottom:25px;
    transition:0.3s;
    box-shadow:
        0 0 15px rgba(0,140,255,0.2);
}

.match-box:hover{
    transform:translateY(-4px);
    border-color:#4da3ff;
}

/* TEAM */
.team-logo{
    width:90px;
    height:auto;
    margin-bottom:10px;
    filter:drop-shadow(0 0 6px rgba(255,255,255,0.25));
}

.team-name{
    font-size:22px;
    font-weight:bold;
    color:#ffffff;
    text-shadow:
        0 0 8px rgba(0,174,255,0.5);
}

/* VS */
.vs{
    font-size:28px;
    font-weight:bold;
    color:#66b3ff;
}

/* SCORE */
.score-prediction{
    text-align:center;
    font-size:36px;
    color:#ffffff;
    font-weight:bold;
    margin-top:20px;
    text-shadow:
        0 0 12px rgba(0,140,255,0.8);
}

/* ANALYSIS */
.analysis{
    margin-top:20px;
    color:#d6d6d6;
    line-height:1.8;
    text-align:center;
    font-size:15px;
}

/* CONTENT */
#contentBox h2,
#contentBox h3{
    color:#8fc8ff;
    margin-top:30px;
    margin-bottom:15px;
    text-shadow:
        0 0 8px rgba(0,140,255,0.4);
}

#contentBox p{
    line-height:1.9;
    color:#dddddd;
}

/* TABLE */
.detail{
    width:100%;
    background:rgba(0,0,0,0.2);
    border-radius:10px;
    overflow:hidden;
}

.detail th{
    background:#003b7a;
    color:#ffffff;
    font-weight:bold;
}

.detail th,
.detail td{
    padding:12px;
    border-bottom:1px solid #0d4f9c;
}

.detail tr:hover{
    background:rgba(255,255,255,0.03);
}

.value{
    color:#6db8ff;
    font-weight:bold;
}

/* FOOTER */
.footer-links{
    text-align:center;
    margin-top:20px;
}

.footer-links a{
    margin:0 8px;
    color:#6db8ff;
    font-weight:bold;
}

.footer-links a:hover{
    color:#ffffff;
}

/* MOBILE */
@media(max-width:768px){

.title-landing{
    font-size:1.4rem;
}

.team-logo{
    width:65px;
}

.team-name{
    font-size:16px;
}

.score-prediction{
    font-size:24px;
}

.vs{
    font-size:18px;
}

.match-box{
    padding:18px;
}

}

.stadium-name{
    color:#ffd700;
    font-weight:bold;
    text-shadow:
        0 0 8px rgba(255,215,0,0.5);
}
    .banner-box {
      width: 100%;
      max-width: 1000px;
      margin: auto;
      overflow: hidden;
      border-radius: 24px;
      background: #00118a;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    }

    .banner-box img {
      width: 100%;
      height: auto;
      display: block;
    }