@font-face {
    font-family: title_font;
    src: url(fonts/Starjedi.ttf);
}

@font-face {
    font-family: sub_title_font;
    src: url(fonts/Starjhol.ttf);
}
@font-face {
    font-family: nav_font;
    src: url(fonts/soloist1.ttf);
}

body {
    width: 80%; /* limit width for better readability */
    margin: 20px auto; /* center the content */
    font-family: lato, sans-serif; /* modern sans-serif font */
    background-image: url(Images/stars.jpg); /* star wars themed background */
    color: #E0E0E0; /*::after gray text */
}

header {
    font-family: title_font; /* custom Star Wars font */
    font-size: 18pt;
    color: #FFD700; /* gold headings */
    text-align: center;
    margin-bottom: 20px; /* space below header */
    background-color: #1A1A1A; /* slightly lighter black for contrast */
    border-radius: 8px;
    border: #FFD700 2px solid; /* gold border */
}

h2 {
    font-family: sub_title_font;
    font-size: 20pt;
    color: #FF4500; /* fiery orange subheadings */
    margin-top: 15px;
    text-align: center;
}

div#content {
    display: table; /* use table layout for nav and section side by side */
    width: 100%;
    border-spacing: 10px; /* space between nav and section */
}

nav {
    display: table-cell; /* make nav a table cell */
    width: 250px; /* fixed width for nav */
    background-color: #1A1A1A; /* slightly lighter black for contrast */
    padding: 10px;
    border-radius: 8px;; /* rounded corners */
    border: #FFD700 2px solid;
}

nav a {
    display: block;
    color: #FFD700; /* gold nav links */
    text-decoration: none;
    padding: 10px;
    transition: color 0.3s ease;
    text-align: center;
    margin: 10px 0;
    font-family: nav_font;
    border: #FFD700 2px solid;
}

nav a:hover {
    color: #FF4500; /* orange hover effect */
}

section {
    display: table-cell;
    padding: 15px;
    background-color: #1A1A1A; /* slightly lighter black for contrast */
    border-radius: 8px;
    border: #FFD700 2px solid;
}

footer {
    text-align: center;
    padding: 15px;
    font-size: 12pt;
    margin-top: 20px;
    background-color: #1A1A1A;
    border: #FFD700 2px solid;
}

img, video {
    max-width: 1080px;
    max-height: 720px;
    display: block; /* center media */
    margin: 10px auto;
    border-radius: 5px; 
    border: #FFD700 2px solid;
    width: 100%; /*shrinks images when page shrinks*/
}