body {
    background: url('tile.jpg') repeat;
    background-size: 315px 224px;
    color: #00FF00;
    font-family: "Courier New", Courier, monospace;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: auto;
    padding-top: 50px;
    background-color: rgba(0, 0, 0, 0.7); /* Slightly transparent dark background for readability */
    border-radius: 10px;
    padding: 20px;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Center items vertically */
    padding-bottom: 20px;
}

.text-block {
    flex: 0 0 67%; /* Take up 50% of the width */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center contents vertically */
    align-items: center; /* Center contents horizontally */
    text-align: center; /* Ensure the text is centered */
}

.image-block {
    flex: 0 0 33%; /* Take up 50% of the width */
    display: flex;
    justify-content: flex-start; /* Align image to the far left */
    align-items: center;
}

.image-block img {
    border-radius: 10px;
    max-width: 300px; /* Control image size */
    height: auto;
    margin-left: 0; /* Remove any left margin */
}

h1 {
    color: #00BFFF; /* Slightly Darker Electric Blue */
    margin: 10px 0;
}

.main-header h1:nth-of-type(1) {
    font-size: 2em; /* Slightly larger font for the first h1 */
}

.main-header h1:nth-of-type(2) {
    font-size: 1.2em; /* Larger font for the second h1 */
}

h2 {
    color: #FF1493; /* Brighter Hot Pink */
    text-align: center; /* Center the subtitle */
    font-size: 2em; /* Increase h2 size to 2em */
}

p {
    line-height: 1.5;
    margin: 0 100px; /* Add only left and right margins for readability */
    text-align: left; /* Left-align paragraphs */
}

.directory-header {
    color: #FF1493; /* Brighter Hot Pink */
    font-size: 2.5em; /* Increase font size to fill the page */
    margin-top: 30px;
    text-align: center; /* Center the header */
}

.links-container {
    list-style-type: disc;
    padding-left: 20%; /* Indent the entire list by 20% of the container's width */
    margin: 0; /* Reset any default margins */
    text-align: left; /* Ensure the list itself is left-aligned */
}

.links-container li {
    margin-left: 0; /* Remove extra indent on individual list items */
    text-align: left; /* Ensure each list item is left-aligned */
}

.directory-link {
    color: #A020F0; /* Electric Purple */
    padding: 5px 0; /* Reduce padding between links to remove extra space */
    text-decoration: none;
    font-size: 1.8em; /* Make the links larger */
    line-height: 1.5em; /* Adjust line height for spacing */
}

.directory-link:hover {
    color: #FFFF00; /* Yellow on hover */
}

.yellow {
    color: #FFFF00; /* Yellow for other text elements */
}

.red {
    color: #FF0000; /* Red for other text elements */
}

.light-purple {
    color: #A020F0; /* Electric Purple for other text elements */
}

.light-blue {
    color: #00BFFF; /* Slightly Darker Electric Blue for other text elements */
}

footer {
    margin-top: 40px;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
}

footer p {
    display: inline;
}

footer p.red {
    color: #FF0000; /* Red text */
}

footer p.yellow {
    color: #FFFF00; /* Yellow text */
}