@import "https://envs.net/fonts/jetbrains-mono/font.css";

/* 1. Global Reset & Centering */
* { 
    box-sizing: border-box; /* Ensures padding doesn't break width */
    font-family: 'JetBrains Mono', 'monospace'; 
}

body {
    background-color: #0e0808;
    margin: 0;
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center;     /* Vertical center */
    min-height: 100vh;       /* Ensure body takes full screen height */
    padding: 20px;           /* Padding so it doesn't touch edges on mobile */
}

/* 2. Main Container Constraints */
.container {
    display: flex;
    flex-direction: column;
    border: 1px solid rosybrown;
    
    /* Center-focused sizing */
    width: 100%;
    max-width: 800px; /* Limits width on desktop */
    height: auto;      /* Fixed height for the dashboard look */
    overflow: hidden;  /* Keeps content inside the border */
}

/* 3. Layout Structure */
.top {
    display: flex;
    flex: 0; /* Takes up remaining space above the bottom bar */
}

.left {
    flex: 1; /* Takes up most of the space */
    background-color: #190b2a;
    color: antiquewhite;
    padding: 15px;
    overflow-y: auto;
}

.right {
    width: 25%; /* Fixed percentage */
    min-width: 150px;
    padding: 15px;
    background-color: #2d0419;
    color: white;
    border-left: 1px solid rosybrown;
}

.bottom {
    background-color: #7d1746;
    font-size: 13px;
    color: white;
    height: auto;
    align-items: center;
    padding: 0 15px;
    border-top: 1px solid rosybrown;

}

/* 4. Elements & Icons */
.pacman { font-family: "Material Design Icons"; }

a {
    color: #d6ac73;
    text-decoration: none;
}

a:hover { text-decoration: underline; }

/* 5. Mobile Responsiveness */
@media screen and (max-width: 600px) {
    .top {
        flex-direction: column; /* Stack left/right on small screens */
    }
    .right {
        width: 100%;
        border-left: none;
        border-top: 1px solid rosybrown;
    }
    .container {
        height: auto; /* Allow height to grow on mobile */
        min-height: 90vh;
    }
}