/* Reset default browser styles for consistency */
* {
    margin: 0;           /* Remove default spacing outside elements */
    padding: 0;          /* Remove default spacing inside elements */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
}

/* Body - The entire page background and text styling */
body {
    font-family: 'Kumbh Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* Modern system fonts */
    background-color: #0d1117; /* Dark background (almost black) */
    color: #c9d1d9;     /* Light gray text color for readability */
    line-height: 1.6;   /* Spacing between lines of text (1.6x font size) */
    padding: 20px 30px; /* Space around page: 20px top/bottom, 30px left/right */
}

/* Container - Wraps all content */
.container {
    max-width: 100%;    /* Takes full width of browser window */
    margin: 0 auto;     /* Centers the container (0 top/bottom, auto left/right) */
}

/* Header - The title section at top of page */
header {
    margin-bottom: 30px; /* Space below header before main content starts */
    text-align: center;  /* Centers all text in header */
}

/* Main page title (h1) */
header h1 {
    font-size: 3em;      /* 3 times the base font size (very large) */
    margin-bottom: 10px; /* Space below the title */
    color: #c9d1d9;      /* Light gray color */
}

/* Subtitle under main title */
.subtitle {
    font-size: 1.2em;    /* Slightly larger than normal text */
    color: #8b949e;      /* Lighter gray (more subtle) */
}

/* Main content area */
main {
    padding: 0;          /* No extra padding needed */
}

/* Topic sections (Installation, Setup, Server Info) */
.topic {
    margin-bottom: 40px;  /* Space below each topic */
    padding-bottom: 40px; /* Space before the bottom border */
    border-bottom: 2px solid #30363d; /* Gray horizontal line separating topics */
}

/* Remove border from last topic (no line after final section) */
.topic:last-child {
    border-bottom: none; /* No border on last topic */
}

/* Section titles (h2 - Installation, Setup, etc.) */
h2 {
    color: #a78bfa;      /* Purple color for main section titles */
    font-size: 2.2em;    /* Large and prominent */
    margin-bottom: 25px; /* Space below section title */
    font-weight: 600;    /* Semi-bold text */
}

/* Smaller sub-section titles (h4) */
h4 {
    color: #c9d1d9;      /* Light gray */
    font-size: 1.2em;    /* Slightly larger than normal text */
    margin-top: 0;       /* No space above */
    margin-bottom: 12px; /* Space below */
    font-weight: 600;    /* Semi-bold */
}

/* Paragraphs */
p {
    margin-bottom: 15px; /* Space below each paragraph */
    color: #c9d1d9;      /* Light gray text */
}

/* Ordered lists (numbered 1, 2, 3...) and unordered lists (bullet points) */
ol, ul {
    margin-left: 25px;   /* Indent from left to make room for numbers/bullets */
    margin-bottom: 20px; /* Space below list */
}

/* List items inside ol/ul */
li {
    margin-bottom: 10px; /* Space between each list item */
    color: #c9d1d9;      /* Light gray text */
}

/* Inline code (passwords, usernames, commands) */
code {
    background-color: #161b22; /* Dark background for code */
    color: #79c0ff;      /* Light blue text */
    padding: 3px 8px;    /* Small space inside: 3px top/bottom, 8px left/right */
    border-radius: 3px;  /* Slightly rounded corners */
    font-family: 'Courier New', monospace; /* Monospace font for code */
    font-size: 0.95em;   /* Slightly smaller than normal text */
}

/* Fake button styling for visual reference */
.fake-button {
    background-color: #ffffff; /* White background like the keygen button */
    color: #0969da;      /* Blue text */
    padding: 1px 4px;    /* Smaller space inside: 1px top/bottom, 4px left/right */
    border: 1px solid #d0d7de; /* Light gray border */
    border-radius: 4px;  /* Slightly rounded corners */
    font-family: inherit; /* Use same font as page */
    font-size: 0.85em;   /* Smaller text */
    font-weight: 600;    /* Semi-bold */
    cursor: default;     /* Normal cursor (not clickable) */
    display: inline-block; /* Inline with text */
}

/* Info boxes - Blue bordered boxes for important info */
.info-box {
    background-color: #1c2128; /* Dark gray background */
    border-left: 4px solid #58a6ff; /* Blue left border (4px thick) */
    padding: 15px 20px;  /* Space inside: 15px top/bottom, 20px left/right */
    margin: 25px 0;      /* Space outside: 25px top/bottom, 0 left/right */
    border-radius: 4px;  /* Slightly rounded corners */
}

/* Titles inside info boxes */
.info-box h4 {
    color: #58a6ff;      /* Blue color to match border */
    margin-top: 0;       /* No space above */
}

/* Lists inside info boxes */
.info-box ul {
    margin-top: 10px;    /* Small space above list */
}

/* Note boxes - Yellow/orange bordered boxes for notes/warnings */
.note {
    background-color: #1c2128; /* Dark gray background */
    border-left: 4px solid #f0ad4e; /* Orange/yellow left border */
    padding: 15px 20px;  /* Space inside box */
    margin: 20px 0;      /* Space outside box */
    border-radius: 4px;  /* Rounded corners */
}

/* Bold text (strong) inside note boxes */
.note strong {
    color: #f0ad4e;      /* Orange color to match border */
}

/* Bold text throughout the page */
strong {
    color: #fff;         /* Pure white for emphasis */
    font-weight: 600;    /* Semi-bold */
}

/* Links */
a {
    color: #a78bfa;      /* Same gray as subtitle */
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    text-decoration: underline;
    color: #a78bfa;      /* Lighter gray on hover */
}

/* Responsive design - Adjusts layout for small screens (phones/tablets) */
@media (max-width: 768px) {
    /* Body adjustments for mobile */
    body {
        padding: 20px 15px; /* Less padding on sides for small screens */
    }

    /* Smaller header on mobile */
    header h1 {
        font-size: 2.2em;   /* Reduce title size */
    }

    /* Smaller headings on mobile */
    h2 {
        font-size: 1.8em;   /* Smaller section titles */
    }
}