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

@font-face {
    font-family: LiberationSerif-web;
    src: url(/_static/fonts/LiberationSerif-Regular.ttf);
}

@font-face {
    font-family: LiberationSerif-web;
    src: url(/_static/fonts/LiberationSerif-Italic.ttf);
    font-style: italic;
}

@font-face {
    font-family: LiberationSerif-web;
    src: url(/_static/fonts/LiberationSerif-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}

body {
    font-family: "Liberation Serif", LiberationSerif-web, "Times New Roman", "Times", serif;

    /* Fallback backgrounds */
    background-image: linear-gradient(#408040, #004000 55%, #002000 80%, #001000);
    background-color: #206020;
    /* Stretch gradient to fill viewport */
    background-attachment: fixed;

    /* Default font */
    font-style: italic;
    font-weight: bold;
    text-align: left;
    letter-spacing: 0.5px;
}

body a {
    /* Remove underline and color from links */
    color: inherit;
    text-decoration: none;
}

body a:hover {
    color: yellow;
    scale: 110%;
    display: inline-block;
}

body a:active {
    scale: 100%;
}

/* ===============
   Universal: grid
   =============== */

.grid {
    display: grid;
}

.js-enabled .grid {
    visibility: hidden; /* If JS is enabled, hide by default to avoid FOUC */
}

.grid a {
    display: block;
    overflow: hidden;

    background-color: #c2c2c2;
    border: 4px inset black;
}

.grid a.highlight {
    border: 4px inset crimson;
}

.grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Fallback grid */

.no-js .grid {
    width: 100%;
    height: 100%;
}

.no-js .grid>div {
    display: flex;
    overflow: hidden;
}

.no-js .grid a {
    display: flex;
    width: 90%;
    height: 90%;
}

/* ======
   Header
   ====== */

#justified {
    display: flex;
    /* Push title and clock to opposite ends */
    justify-content: space-between;
    align-items: center;
}

#title {
    font-size: 48pt;
    color: white;
    padding-left: 16px;
    text-shadow: 4px 4px black;
}

#subtitle,
#clock {
    font-size: 24pt;
    color: #f0f0f0;
    padding-left: 46px;
    text-shadow: 3px 3px #111;
}

#clock {
    padding-right: 16px;
}

#clock:hover {
    color: yellow;
}

.navbar {
    font-size: 24pt;
    color: white;
    text-shadow: 3px 3px #111;

    height: 48px;
    text-align: center;
}

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

#main-container {
    width: 640px;
    height: 480px;
    margin: auto;

    /* Container div layout */
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    grid-gap: 16px;
}

#main-container>div {
    background-color: lightgrey;
    outline: 4px outset black;
}

/* --------------------
   Top left: main image
   -------------------- */

#top-left {
    grid-column: span 6;
    grid-row: span 11;

    display: flex;
    justify-content: center;
    align-items: center;
}

#top-left>img {
    width: 85%;
    height: 90%;

    display: block;
    object-fit: contain;
}

/* -----------------------
   Top right: Main content
   ----------------------- */

#top-right {
    grid-column: span 14;
    grid-row: span 14;
}

#top-right>p {
    font-style: normal;
    font-weight: normal;
    text-align: left;
    letter-spacing: 0;
    font-size: 16pt;
    margin: 16px;
    }

/* ------------------
   Bottom left: Links
   ------------------ */

#bottom-left {
    grid-column: span 6;
    grid-row: span 9;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

#bottom-left>a {
    width: 90%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 18pt;
    color: black;
    text-align: center;
    word-spacing: -3px;

  /* Override this in the tag */
    background-color: white;

    box-sizing: border-box;
    border: 4px inset black;

    cursor: pointer;
    user-select: none;
}

/* -------------------------------
   Bottom right: Additional images
   ------------------------------- */

#bottom-right {
    grid-column: span 14;
    grid-row: span 6;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 24pt;
}