/* ---------------------------------------------------
   Universal: Liberation Serif font (if not installed)
   --------------------------------------------------- */

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

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

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

/* ---------------
   Universal: body
   --------------- */

body {
    /* Font and background gradient */
    font-family: "Liberation Serif", LiberationSerif-web, "Times New Roman", "Times", serif;

    background-image: linear-gradient(#408040, #004000 55%, #002000 80%, #001000);
    /* Fallback gradient */
    background-color: #206020;
    /* Fallback solid */

    background-attachment: fixed;
    /* Stretch gradient to fill viewport */
}

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

body a:hover {
    /* Turn links yellow and scale element size on hover */
    color: yellow;
    scale: 110%;
    display: inline-block;
}

body a:active {
    /* Reset element size to 100% on click */
    scale: 100%;
}

/* -----------
   ID-specific
   ----------- */

#title,
#subtitle,
#navbar,
#grid>div:nth-child(3)>a {
    /* Fancy italic font */
    font-style: italic;
    font-weight: bold;
    text-align: left;
    letter-spacing: 0.5px;
}

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

#subtitle {
    /* Subtitle formatting */
    font-size: 24pt;
    color: #f0f0f0;
    padding-left: 46px;
    text-shadow: 3px 3px #111;
}

#navbar {
    /* Navbar formatting */
    font-size: 24pt;
    color: white;
    text-shadow: 3px 3px #111;

    height: 48px;
    /* Extend downward a bit */


    text-align: center;
    /* Center in viewport */
}

#grid {
    /* Main grid */
    display: grid;

    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    grid-gap: 16px;

    /* Fixed size */
    width: 640px;
    height: 480px;

    margin: auto;
    /* Center in viewport */
}

#grid>div {
    /* Grid background */
    background-color: lightgrey;
    outline: 4px outset black;
}

/* ====================
   Top left: Main image
   ==================== */

#grid>div:nth-child(1) {
    /* Dimensions and flex */
    grid-column: span 6;
    grid-row: span 11;

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

#grid>div:nth-child(1)>img {
    /* Image bounds */
    width: 85%;
    height: 90%;

    display: block;
    object-fit: contain;
}

/* =======================
   Top right: Main content
   ======================= */

#grid>div:nth-child(2) {
    /* Dimensions */
    grid-column: span 14;
    grid-row: span 14;
}

#grid>div:nth-child(2)>p {
    /* Text formatting */
    font-size: 16pt;
    margin: 16px;
}

/* ==================
   Bottom left: Links
   ================== */

#grid>div:nth-child(3) {
    /* Dimensions and flex */
    grid-column: span 6;
    grid-row: span 9;

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

#grid>div:nth-child(3)>a {
    /* Style link buttons */
    width: 90%;
    height: 20%;

    /* Center boxes */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Format and center text in boxes */
    font-size: 18pt;
    color: black;
    /* Overrides "body a:hover" property too */
    text-align: center;

    /* Box color and border */
    background-color: white;
    /* Override this in the HTML tag */
    box-sizing: border-box;
    /* Include border when fitting width and height */
    border: 4px inset black;

    /* Change cursor to link pointer */
    cursor: pointer;
    /* Prevent button text from being selected */
    user-select: none;
}

/* ===============================
   Bottom right: Additional images
   =============================== */

#grid>div:nth-child(4) {
    /* Dimensions and flex */
    grid-column: span 14;
    grid-row: span 6;
}

/* ------------------------
   Multipurpose: Small grid
   ------------------------ */

#smallgrid {
    /* Create grid */
    display: grid;
    /* Set grid dimensions in HTML div tag */

    /* Fill the entire div (and only the entire div) */
    width: 100%;
    height: 100%;
}

#smallgrid>div {
    /* Style grid cells */
    /* Center content */
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    /* Clip overflow (prevents vertical scaling issues) */
}

#smallgrid a {
    /* Style anchor tags */
    display: contents;
    /* Make click area fill the cell */
    width: 90%;
    height: 90%;

    /* Center content */
    display: flex;
    justify-content: center;
    align-items: center;
}

#smallgrid img {
    /* Style images */
    width: 100%;
    height: 100%;

    display: block;
    /* Remove inline spacing */
    object-fit: contain;
    /* Scale images instead of stretching */

    /* Border */
    box-sizing: border-box;
    /* Include border when fitting width and height */
    background-color: #c2c2c2;
    border: 4px inset black;
}