/* Base Layout */
html {
    height: 100%;
    width: 100%;
}

body { 
    font-family: 'Arial', sans-serif; 
    line-height: 1.0; 
    margin: 0; 
    padding: 0; 
    color: #333; 
    background-color: #f4f4f4; 
}

/* Container */
.container { 
    width: 95%; 
    max-width: 1200px; 
    margin: auto; 
    padding: 10px; 
    background-color: #fff; 
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

/* Typography */
header { 
    text-align: center; 
    padding: 0px; 
}
h1 { 
    color: #333; 
    margin-top: 5px;
    margin-bottom: 0px;
}

h2 { 
    color: #333; 
}

h3 {
    color: #333;
}

h5 { 
    margin-top: 5px;
    margin-bottom: 5px;
    color: #aaaaaa; 
}

p, li { 
    color: #666; 
}

a { 
    color: #0077cc; 
    text-decoration: none;
}

/* Header Layout */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.title-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background-color: #fff;
    z-index: 2;
}

.back-button-container {
    margin-right: auto;
}

/* Navigation and Buttons */
.back-link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    flex-grow: 1;
    padding: 10px 20px;
    text-decoration: none;
    background-color: rgb(34,48,63);
    color: white;
    border-radius: 5px;
    text-align: center;
}

.back-link:hover { 
    background-color: #005fa3; 
}

.button-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
}

/* Two Column Layout */
.two-column {
        display: flex;
        justify-content: space-between;
        gap: 20px;
}

.column {
    flex: 1;
    min-width: 0;
}
section { 
    margin-bottom: 40px; 
}
.section-title {
    color: #333;
    margin: 20px 0 10px; 
}
/* Images */
img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}
.training-img { 
    width: 300px; 
    height: auto; 
    margin: 5px auto; 
}

/* Timeline Table Styles */
.timeline-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    position: relative;
    z-index: 1;
}

.timeline-table th, .timeline-table td {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 2px;
}

.timeline-table th {
    background-color: #333333;
    color: white;
    font-size: 8px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.cell {
    height: 15px;
}

/* Timeline Categories */
.Category {
    background-color: #ffd700;
    font-size: 8px;
    width: 60px; 
    word-wrap: break-word;
    white-space: normal;
}

.SubmarineRescue {
    background-color: #191970;
    font-size: 8px;
}

.SubmarineRescue a {
    color: white;
    text-decoration: none;
}

.OilStates {
    background-color: #000000;
    font-size: 8px;
}

.OilStates a {
    color: yellow;
    text-decoration: none;
}

.AkerSolutions {
    background-color: #191970;
    color: orange;
    font-size: 8px;
}

.AkerSolutions a {
    color: orange;
    text-decoration: none;
}

.Exnics {
    background-color: #FF0000;
    color: white;
    font-size: 8px;
}

.NIS {
    background-color: rgb(5,55,103);
    color: orange;
    font-size: 8px;
}

.MancUni {
    background-color: purple;
    color: white;
    font-size: 8px;
}

.OU {
    background-color: blue;
    color: white;
    font-size: 8px;
}

.RGU {
    background-color: purple;
    color: white;
    font-size: 8px;
}

.PhD {
    background-color: #e0e0e0;
    color: white;
    font-size: 8px;
}

.Stratsor {
    background-color: rgb(0,176,240);
    color: white;
    font-size: 8px;
}

.Fantactico {
    background-color: rgb(112,173,71);
    color: yellow;
    font-size: 8px;
}

.Thistle {
    background-color: #191970;
    color: white;
    font-size: 8px;
}

.EI {
    background-color: orange;
    color: black;
    font-size: 8px;
}

.IoD {
    background-color: black;
    color: white;
    font-size: 8px;
}

.past-cell {
    background-color: #fafad2;
    font-size: 4px;
}

.empty-cell {
    background-color: #f0f0f0;
    font-size: 4px;
}

/* Footer */
footer { 
    text-align: center; 
    padding: 20px 10px; 
    font-size: 0.8em; 
    color: #777; 
}
/* Two-column layout */
.two-columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
/* Responsive Design */
@media (max-width: 768px) {
    .two-column {
        flex-direction: column;
        gap: 20px;
    }

    .column {
        width: 100%;
    }
    
    .button-row {
        flex-direction: column;
    }
    
    .back-link {
        margin: 5px 0;
    }
}