/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
    font-family: Arial, sans-serif;
    background-color: #111;
    color: #fff;
}

/* Header */
header {
    background: linear-gradient(to right, #1a1a1a, #ff6600, #1a1a1a);
    padding: 30px;
    text-align: center;
    border-bottom: 3px solid #ff6600;
}

.logo h1 {
    margin: 0;
    font-size: 2.5rem;
    letter-spacing: 3px;
}

.logo p {
    margin-top: 5px;
    color: #ddd;
}

/* Navigation */
nav {
    background-color: #222;
    border-bottom: 2px solid #ff6600;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

nav a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: 0.3s;
}

nav a:hover {
    color: #ff6600;
}

/* Content */
main {
    max-width: 1000px;
    margin: 30px auto;
    padding: 20px;
}

.content-box {
    background-color: #1f1f1f;
    padding: 20px;
    margin-bottom: 25px;
    border-left: 5px solid #ff6600;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.2);
}

.content-box h2 {
    color: #ff6600;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #222;
    border-top: 2px solid #ff6600;
}
.title-box {
    text-align: center;
    max-width: 800px;
    margin: 35px auto;
    padding: 30px;
}

.belt-img {
    width: 320px;
    height: 180px;
    object-fit: contain;
    display: block;
    margin: 20px auto;
    padding: 10px;
    background-color: #111;
    border: 2px solid #ff6600;
}

.wrestler-img {
    max-width: 300px;
    margin: 20px 0;
    border: 2px solid #ff6600;
}

.history-link {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #ff6600;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.history-link:hover {
    background-color: #cc5500;
}

.champion-entry {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 30px 0;
    padding: 20px;
    background-color: #181818;
    border-left: 4px solid #ff6600;
}

.wrestler-img {
    width: 180px;
    height: auto;
    border: 2px solid #ff6600;
}

.champion-info {
    text-align: left;
}

.champion-info p {
    margin: 8px 0;
}

.title-defense {
    color: #ff6600;
    font-style: italic;
}

.roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.wrestler-card {
    text-align: center;
    background-color: #181818;
    padding: 15px;
    border: 2px solid #333;
    transition: 0.3s;
}

.wrestler-card:hover {
    border-color: #ff6600;
    transform: scale(1.03);
}

.roster-img {
    width: 160px;
    height: 220px;
    object-fit: cover;
    border: 2px solid #ff6600;
}

.wrestler-card p {
    margin-top: 12px;
    font-weight: bold;
    color: white;
}

h3 {
    color: #ff6600;
    text-align: center;
    font-size: 1.6rem;
}

.wrestler-link {
    text-decoration: none;
    color: inherit;
}

.profile-box {
    text-align: center;
}

.profile-img {
    width: 280px;
    border: 3px solid #ff6600;
    margin-bottom: 20px;
}

.year-nav {
    text-align: center;
    margin-top: 20px;
}

.year-nav a {
    display: inline-block;
    margin: 10px;
    padding: 10px 18px;
    background-color: #222;
    border: 2px solid #ff6600;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.year-nav a:hover {
    background-color: #ff6600;
}

.homepage-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-content {
    min-height: 600px;
}

.sidebar-img {
    width: 100%;
    max-width: 260px;
    border: 2px solid #ff6600;
    box-shadow: 0 0 12px rgba(255,102,0,0.35);
}

.news-card {
    display: flex;
    gap: 25px;
    align-items: center;
}

.news-img {
    width: 220px;
    height: 160px;
    object-fit: cover;
    border: 2px solid #ff6600;
}

.news-text {
    flex: 1;
}

.news-date {
    color: #ff6600;
    font-weight: bold;
}

.results-card {
    display: flex;
    gap: 25px;
    align-items: center;
}

.results-img {
    width: 220px;
    height: 300px;
    object-fit: cover;
    border: 2px solid #ff6600;
}

.results-text {
    flex: 1;
}

.event-poster {
    width: 350px;
    display: block;
    margin: 0 auto 20px auto;
    border: 3px solid #ff6600;
}

.match-card {
    text-align: center;
}

.championship-match {
    border-left: 5px solid gold;
}

.main-event {
    border-left: 5px solid #ff6600;
    background-color: #181818;
}

.show-results {
    text-align: center;
}

.show-results p {
    margin: 12px 0;
    line-height: 1.6;
}

.event-poster {
    width: 350px;
    max-width: 100%;
    border: 3px solid #ff6600;
    margin-bottom: 20px;
}