.main-content {
    position: relative;
}
html {
    scroll-behavior: smooth;
}
 .header {
     background-color: white;
     padding: 40px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     border-bottom: 2px solid black;
 }

 .title {
     font-size: 48px;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: -1px;
     line-height: 1.1;
     max-width: 800px;
     color: black;
 }

 .watch-button {
     background-color: #e53e3e;
     color: white;
     padding: 15px 25px;
     border: none;
     font-weight: bold;
     text-transform: uppercase;
     cursor: pointer;
     border-radius: 4px;
     font-size: 14px;
     letter-spacing: 0.5px;
     white-space: nowrap;
     transition: background-color 0.3s ease;
 }

 .watch-button:hover {
     background-color: #c53030;
 }

 .schedule-table {
     width: 100%;
     border-collapse: collapse;
 }

 .schedule-table th {
     background-color: white;
     padding: 20px 40px;
     text-align: left;
     font-weight: bold;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-bottom: 1px solid #ddd;
 }

 .schedule-table td {
     padding: 25px 40px;
     border-bottom: 1px solid #eee;
     font-size: 16px;
 }

 .schedule-table tr:hover {
     background-color: #f9f9f9;
 }

 .time-col {
     font-weight: 500;
     width: 25%;
 }

 .date-col {
     width: 25%;
     color: #666;
 }

 .event-col {
     width: 50%;
 }

 @media (max-width: 768px) {
     .header {
         flex-direction: column;
         gap: 20px;
         padding: 20px;
     }

     .title {
         font-size: 28px;
     }

     .schedule-table th,
     .schedule-table td {
         padding: 15px 20px;
         font-size: 14px;
     }

     .watch-button {
         align-self: stretch;
         text-align: center;
     }
 }