/* Reset and box sizing */
*, *:before, *:after {
    box-sizing: border-box;
}

/* Base styles */
html {
    height: 100%;
    font-family: "Roboto Mono", monospace;
    background-color: #211e20;
}

body {
    margin: 0;
    min-height: 100%;
    font-weight: 700;
    color: #555568;
}

#canvas {
    display: block;
    width: 480px;
    height: 360px;
}

.screenshot {
    width: 320px;
    height: 240px;
    image-rendering: pixelated;
}

/* Link styles */
a {
    color: #ff924f;
    text-decoration: none;
    transition: color 0.3s ease; /* Transition effect for color change */
}

a:hover {
    color: #ffe7c4;
}

.terminal-header a{
    color: #211e20;
}

.terminal-nav a{
    font-size: 2em;
}

/* Assuming that the .terminal-container and .terminal-header-container share the same max-width value */
.terminal-header, .terminal-footer, .terminal-container {
    max-width: 1170px; /* Ensure this is the same for all */
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem; /* The horizontal padding should be the same for all */
}

.terminal-header {
    display: flex;
    justify-content: space-between; /* This aligns children (logo, nav, sign-in) on each side */
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* If there is a specific container for header content like a div, make sure to add it here. */
.terminal-header-container {
    width: 100%; /* Take up the full width */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* No horizontal padding needed here if .terminal-header has it */
}

/* For the logo, nav, and sign-in to take full height */
.logo, .terminal-nav, .login-signin {
    display: flex;
    align-items: center; /* Align the text vertically */
    height: 100%; /* They should take the full height of the header */
}

.login-signin {
    font-size: 2em;
}

#discord-link, #twitter-link {
    margin-right: 0.7rem;
}

/* Adjust the .terminal-container if needed */
.terminal-container {
    padding-top: 2rem; /* This is just an example, adjust as needed */
    padding-bottom: 2rem;
    /* Other styles */
}

/* Terminal container styling */
.terminal-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#monitor {
    width: 525px; /* Set width */
    height: 470px; /* Set height */
    background-image: url("display.png");
    background-size: contain; /* Fit the background image within the div */
    background-repeat: no-repeat; /* Prevent background image from repeating */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Add position relative to use absolute positioning for the canvas */
}

#canvas {
    position: absolute; /* Position the canvas absolutely within the monitor div */
    top: 45px; /* Align the canvas to the center vertically */
    left: 25px; /* Align the canvas to the center horizontally */
}

/* Player styling */
#player {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Header styles */
.terminal-header {
    background-color: #764462;
    padding: 0.5rem 0; /* Only vertical padding; horizontal padding removed */
    display: flex;
    justify-content: center; /* This centers the header-container */
    align-items: center;
}

/* Header container to match terminal-container width */
.terminal-header-container {
    max-width: 1170px;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Adjust space between logo, nav, and sign-in */
    align-items: center;
    padding: 0 1rem; /* Add horizontal padding here */
}

/* Header and footer shared styles */
.terminal-header, .terminal-footer {
    color: #211e20;
    /* background-color: #764462;*/
    background-color: #ff944f;
    border-bottom: 1px solid #555568;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Navigation styles */
.terminal-nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    height: 100%;
}

.terminal-nav ul li {
    display: flex;
}

.terminal-nav ul li a {
    padding: 14px 15px;
    transition: color 0.3s ease;
    font-size: 1.1em;
    font-weight: 500;
}

.terminal-nav ul li a:hover {
    color: #9f5322;
}

/* Content styles */
.terminal-content h2 {
    color: #9f5322;
    font-size: 1.5em;
}

.terminal-content p {
    margin-bottom: 2rem;
    color: #ffe7c4;
}

/* Responsive styling */
@media (max-width: 1200px) {
    .terminal-container, .terminal-content {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .terminal-nav ul {
        flex-direction: column;
    }

    .terminal-nav ul li a {
        margin-bottom: 0.5rem;
    }

    .terminal-footer {
        padding: 0.5rem;
    }
}