/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Frutiger Aero Base but more playful */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Comic Neue', cursive;
    color: #0f2b46;
    background: linear-gradient(to bottom, #041a30, #0a2a4a, #1a5a7a);
    overflow-x: hidden;
}

/* Animated Starry Background */
.starry-sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* This is a placeholder. You would use a repeating star GIF or a CSS animation */
    background-image: url('star_bg.gif');
    z-index: -1;
    opacity: 0.6;
}

/* Chaotic Grid Layout */
.chaotic-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 20px;
    width: 95%;
    max-width: 1200px;
}

/* Handwritten Header */
.header.handwritten {
    grid-column: 1 / 4;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border: 3px dashed #6ecbf5;
    border-radius: 15px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.header h1 {
    font-family: 'Comic Neue', cursive;
    font-weight: 700;
    color: #1a5a7a;
    margin: 0;
    display: inline-block;
}
.header p {
    margin: 0;
    color: #0594c3;
}

/* GIF Decorations */
.gif-decoration {
    vertical-align: middle;
    margin: 0 10px;
}

/* Widget Style (Reusable boxes) */
.widget {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    border: 2px solid #b4ec51;
    box-shadow: 5px 5px 0px rgba(0, 80, 120, 0.3);
}

.widget-title {
    font-family: 'Share Tech Mono', monospace;
    color: #d35400;
    margin-top: 0;
    border-bottom: 2px dotted #6ecbf5;
    padding-bottom: 0.5rem;
}

/* Main Content Area */
.messy-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sidebars */
.sidebar-left, .sidebar-right {
    background: rgba(180, 236, 81, 0.2); /* Light green tint */
    border: 2px solid #b4ec51;
}
.sidebar-left ul {
    list-style: none;
    padding-left: 0;
}
.sidebar-left li a {
    color: #0594c3;
    text-decoration: none;
}
.sidebar-left li a:hover {
    color: #d35400;
    text-decoration: underline;
}

/* GIF Icons within text */
.gif-icon {
    vertical-align: middle;
    margin: 0 5px;
}

/* Floating GIFs for absolute chaos */
.floating-gif {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    width: 80px;
}

/* Console Style */
.console {
    width: 100%;
    font-family: 'Share Tech Mono', monospace;
    background: black;
    color: #00ff00;
    border: 2px solid #6ecbf5;
    border-radius: 5px;
    padding: 0.5rem;
}

/* Engineering Widget (Simpler) */
.engineering-widget {
    background: rgba(200, 230, 255, 0.5);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #6ecbf5;
}
.engineering-widget label {
    display: block;
    margin-top: 0.5rem;
}
.engineering-widget input {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #0594c3;
    border-radius: 4px;
    padding: 0.3rem;
    margin-bottom: 0.5rem;
}
.engineering-widget button {
    background: linear-gradient(to bottom, #ff9966, #ff5e62);
    margin-top: 0.5rem;
    font-family: 'Comic Neue', cursive;
}

/* Footer */
.footer {
    grid-column: 1 / 4;
    text-align: center;
    background: rgba(0, 30, 60, 0.7);
    color: #6ecbf5;
    padding: 0.8rem;
    border-radius: 8px;
    font-size: 0.8rem;
    border: 1px solid rgba(100, 200, 255, 0.5);
}