/* =====================================================
   GLOBAL VARIABLES
   Common values used across the site
   ===================================================== */

   :root {
    /* Fonts */
    --font-display: "Jacquard 12", system-ui;
    --font-body: "Micro 5", sans-serif;
    --font-readable: "Jost", sans-serif; 

    /* Colors */
    --color-text: black;
    --color-accent: #f79230;
    --color-bg: white;
    --color-ui: gray;
    --color-dark: #231f20;

    /* Borders */
    --border-thick: 5px solid black;

    /* Spacing */
    --space-sm: 10px;

    /* Backgrounds */
    --bg-space: url("../links/images/Space.gif");
    --bg-dither: url("../links/svgs/Dither.svg");
}

/* =====================================================
   FONT UTILITY CLASSES
   Optional helpers if you want to force fonts
   ===================================================== */

.jacquard-12-regular {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: normal;
}

.micro-5-regular {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
}

.jost-bold {
    font-family: var(--font-readable);
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

/* =====================================================
   BASE ELEMENT STYLES
   ===================================================== */

body {
    background-image: var(--bg-space);
    background-repeat: repeat;
    background-attachment: fixed;

    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 24px;
}

p {
    font-family: var(--font-body);
    padding: var(--space-sm);
    margin: 0;
}

h1 {
    padding: var(--space-sm);
    margin: 0;
}

b {
    color: var(--color-accent);
}

a {
    text-decoration: none;
    color: var(--color-accent);
}

/* =====================================================
   LAYOUT WRAPPERS
   ===================================================== */

.page-wrapper {
    width: 50vw;
    height: 90vh;
    margin: auto;
}

/* =====================================================
   HEADER + NAV
   ===================================================== */

header {
    height: 60px;
    background: var(--color-bg);
    border: var(--border-thick);
    border-bottom: none;
    font-size: 40px;

    background-color: var(--color-dark);
}

header > nav {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

/* =====================================================
   MAIN CONTENT
   ===================================================== */

main {
    background-image: var(--bg-dither);
    border: var(--border-thick);
    border-bottom: none;
    padding: var(--space-sm);
}

/* =====================================================
   ICON BAR
   ===================================================== */

.icons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;

    background-color: var(--color-ui);
    border-bottom: var(--border-thick);
}

/* =====================================================
   WIDGETS
   ===================================================== */

.widget {
    width: 20vw;
    background-image: var(--bg-dither);
    border: var(--border-thick);
    font-family: var(--font-readable);
}

#time {
    margin: var(--space-sm);
    background: var(--color-bg);
    border: var(--border-thick);
}

.window {
    margin: var(--space-sm);
    background: var(--color-bg);
    border: var(--border-thick);

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

/* Widget positioning */
.widget-left {
    position: absolute;
    left: 85px;
    top: 250px;

    display: flex;
    flex-flow: column nowrap;
}

.widget-right {
    position: absolute;
    right: 85px;
    top: 250px;

    display: flex;
    flex-flow: column nowrap;
    row-gap: var(--space-sm);
}

/* =====================================================
   INTRO SECTION (GRID)
   ===================================================== */

.intro {
    margin: var(--space-sm);
    background: var(--color-bg);
    border: var(--border-thick);

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30px 1fr 1fr;
}

.intro > .icons {
    grid-column: 1 / -1;
    background: var(--color-ui);
    border-bottom: var(--border-thick);
}

.intro > h1,
.intro > p {
    grid-column: 1 / 2;
}

.intro > img {
    grid-column: 2 / -1;
    grid-row: 2 / -1;
    width: 75%;
    margin: auto;
}

/* =====================================================
   UPDATES SECTION
   ===================================================== */

.updates {
    margin: var(--space-sm);
    background: var(--color-bg);
    border: var(--border-thick);
}

/* =====================================================
   FOOTER
   ===================================================== */

footer {
    background-color: var(--color-bg);
    border: var(--border-thick);

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

footer > div {
    padding: var(--space-sm);
}

/* Branding row */
footer > .footer-branding {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: var(--space-sm);

    grid-column: 1 / -1;
}

/* Contact + legal */
footer > .footer-contact {
    grid-column: 1 / 2;
}

footer > .footer-legal {
    grid-column: 2 / 3;
}

/* Footer image */
.img-footer {
    height: 50px;
}

header>nav>a>img {
    height: 60px;
}