/* =====
   Fonts
   ===== */

@font-face {
    font-family: NotoSans-web;
    src: url(/fonts/NotoSans-VariableFont_wdth,wght.ttf) format('truetype-variations');
    font-weight: 100 900; 
    font-style: normal;
}

@font-face {
    font-family: NotoSans-web;
    src: url(/fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf) format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: FiraCode-web;
    src: url(/fonts/FiraCode-Retina.ttf);
    font-weight: normal;
    font-style:  normal;
}

@font-face {
    font-family: ComputoMonospace-web;
    src: url(/fonts/ComputoMonospace-Regular.otf);
    font-weight: normal;
    font-style:  normal;
}

/* =========
   Universal
   ========= */

html {
    /*
    Scale fonts proportionally for 4K+ displays
    1rem = 16px minimum for mobile readability
    0.8vw is the default scaling factor
    calc(0.8vh * 16 / 9) caps ultrawide scaling, switching to the smaller axis
    */
    font-size: max(1rem, min(0.8vw, calc(0.8vh * 16 / 9)));
}

* {
    /* Include border and padding in element dimensions */
    box-sizing: border-box;
}

body {
    /* Default font */
    font-family: 'Noto Sans', NotoSans-web, Verdana, sans-serif;

    /* Temp - caution stripe background */
    background: repeating-linear-gradient(
        -45deg,
        darkgoldenrod,
        darkgoldenrod 3rem,
        #202020 3rem,
        #202020 6rem
    );
    background-attachment: fixed;
    
    margin: 0;
    padding: 0;
    color: black;
    line-height: 1.5;
}

body a {
    display: inline-block;
    transform-origin: center;
}

body a:hover {
    scale: 110%;
}

body a:active {
    scale: 100%;
}

/* ==============
   Main container
   ============== */

.container {
    width: 95%;
    max-width: 56rem; /* 896px */
    min-width: 24rem; /* 384px - prevent site from breaking at miniscule widths */
    margin: 1rem auto;
    background-color: whitesmoke;
    border: 0.25rem outset whitesmoke;
    padding: 1rem;
}

/* -------------------
   Header & navigation
   ------------------- */

header {
    text-align: center;
    border-bottom: 0.125rem solid grey;
    margin-bottom: 1rem;
    padding-bottom: 0.625rem;
}

h1 {
    margin: 0.75rem 0;
    font-size: 2.5rem;
}

nav {
    background-color: lightgrey;
    border: 0.125rem inset lightgrey;
    padding: 0.25rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    text-align: center;
}

nav a {
    font-weight: bold;
    margin: 0 1rem;
}

/* -------
   Marquee
   ------- */

#marquee-container {
    background: #101010;
    color: springgreen; 
    font-family: 'Fira Code Retina', FiraCode-web, Consolas, 'Courier New', Courier, monospace;
    padding: 0.5rem;
    margin-bottom: 0.25rem;

    overflow: hidden;    /* Hide text outside the box */
    white-space: nowrap; /* Disable text wrap */
}

#marquee {
    display: inline-block; /* Use content width, not width of the parent container */
    padding-left: 110%;    /* Start off-screen on the right - a little more than 100% so there's a pause at the start + between cycles */
    animation: marquee-scroll-left 40s linear infinite;
}

#marquee-container:hover #marquee {
    /* Pause marquee scroll on hover */
    animation-play-state: paused;
}

@keyframes marquee-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ---------------------
   Main layout (flexbox)
   --------------------- */
#main-content {
    display: flex;
    gap: 1.25rem;
}

aside {
    flex: 1 1 12rem; 
    border: 0.125rem solid grey;
    padding: 0.625rem;
    background-color: #f0f0f0;
}

main {
    flex: 3 1 25rem; 
    border: 0.125rem solid grey;
    padding: 1rem;
}

/* -----
   Other
   ----- */

#clock {
    font-family: 'Computo Monospace', ComputoMonospace-web, monospace;
    font-size: 2rem;
    display: block; /* Make the element only as wide as its content, so it centers correctly */
    text-align: center;

    color: grey;
    text-decoration: none;
}

#info-bar {
    display: flex;
    justify-content: space-between;
}

#info-bar p {
    margin-bottom: 0;
}

/* ======
   Footer
   ====== */

footer {
    text-align: center;
    font-size: 1rem;
}

/* =========
   Overrides
   ========= */

/* Adjustments for mobile (width <720px) */
@media (max-width: 45rem) {
    h1 { font-size: 1.8rem; }                         /* Shrink the title */
    #main-content { flex-direction: column-reverse; } /* Drop the aside below the content */
}