/* -------------------------------------- Default CSS Items -------------------------------------- */
* {
    box-sizing: border-box;
}

html, body {
    /*Mobile Fix*/
    margin: 0; /*Removes spacing between the sides*/
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../images/background.png"); /*Adds image to the background*/
    background-attachment: fixed; /*Prevents the image from moving when scrolling through the page*/
    min-height: 100vh;
}
body {
    height: 100%;
    color: aquamarine;
    display: flex;
    flex-direction: column;
}

.nameless-depth {
    background-image: url("../images/boss_background.png"); /*Adds image to the background*/
}

header {
    background-color: #000036;
    margin-bottom: 1em;
    width: 100%;

    /*Allows the header to stay at the top of the page*/
    position: sticky;
    top: 0;

    z-index: 1; /*Prevents other items covering the header if interacted with*/
}

.main-title {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #87cefa;
    padding-top: 0.5em;
    text-align: center;
    border-radius: 0.2em;
    margin: 0; /*Removes the spacing from the top of the h1 to the top of the screen*/
    margin-bottom: 0.3em;
}

main {
    background-color: rgba(0, 0, 54, 0.7);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0 auto; /* Center Everything first */
    padding: 0.5em 2.5em 0.5em 2.5em; /*This goes: top right bottom left*/
    border-radius: 0.5em;
    line-height: 1.5em;
    margin-bottom: 2em; /* Apply a margin fix to the bottom after initial margin is set for centering */
    width: 90%;
}

caption {
    caption-side: bottom;
    color: #87ceeb;
    text-align: center;
}

h4, h5 {
    scroll-margin-top: 123px; /*Used for allowing links to properly display the destination correctly (because of the navbar)*/
}

.nav-article-cols {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    /*border: white solid 3px; /*For testing*/
}

/* -------------------------------------- Navigation Bar -------------------------------------- */
.navbar {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: black;
    border-radius: 0.2em;

    /*Mobile fixes*/
    border-top: 0.1em solid white;
    overflow-x: auto;
    white-space: nowrap;
    text-align: center;
}

.navbar ul {
    /*overflow: hidden; /*Prevents list items from spilling out of the container*/
    
    list-style-type: none;
    display: inline-flex; /*Allows the navigation items to display side by side*/
    flex-wrap: nowrap;

    justify-content: flex-start; /* important */ /*Centers navigation items*/
    padding: 0; /*Removes the left padding so that the container actually centers the nav items*/
    margin: 0;
    width: max-content; /* important */
}

.navbar ul li a {
    display: block;
    text-decoration: none;
    color: aqua;
    transition: all 0.3s ease;
    padding: 1em;
}

.navbar ul li a:hover {
    background-color: gray;
}

/* -------------------------------------- Introductory Stuff -------------------------------------- */

.intro {
    border-bottom: 0.1em solid white;
}

.links-container {
    /*Center links*/
    text-align: center;

    /*Other items*/
    margin-bottom: 0.5em;
}

.links-container img {
    border: aqua solid 0.1em;
    border-radius: 0.8em;
    max-width: 20%;
    margin: 0.7em;

    transition: transform 0.3s ease; /* Controls speed and smoothness */
}

.links-container img:hover {
    transform: scale(1.1);
}

/* -------------------------------------- Main Content -------------------------------------- */

.main-content {
    margin-top: 1.5em;
}

/*---- Main image for home page ----*/
.page-thumbnail {
    display: block; /* Allows the image to become center*/
    margin: 0 auto; /* Center image */
    border: black solid 0.2em;
    border-radius: 0.1em;
    max-width: 80%;
}

/*------------- Navigation Page Stuff -------------*/

/*---- CSS for the links on navigation pages ----*/
.nav-link a {
    text-decoration: none;
    color: #00b7eb;
    transition: all 0.3s ease; /* Controls speed and smoothness */
}

.nav-link a:hover {
    color: red;
}

/*------------- Article Stuff -------------*/

.article-title {
    font-size: 2em;
}

.article-section {
    border-bottom: aqua solid 0.1em;
    overflow: hidden; /* Allows spacing between the section underline and info-box if they touch*/
}

.sub-section {
    text-decoration: underline;
}

.suber-section {
    text-decoration: underline;
    font-size: 0.9em;
}

.item-img {
    background-color: rgba(0, 0, 54, 0.7);
    padding: 0.5em;
    border: black solid 0.2em;
    border-radius: 0.1em;
}

.class-recipes {
    display: inline-block;
}

.article-link {
    color: #00b7eb;
    transition: all 0.3s ease; /* Controls speed and smoothness */
}

.article-link:hover {
    color: aqua;
}

.image-float-right {
    float: right;
    margin-left: 1em;
    margin-bottom: 0.5em;
    padding: 1em;
    max-width: 35%;
}

.image-center {
    display: block;
    margin: 0 auto;
}

/*---- Info Box ----*/

.info-box {
    float: right;
    margin-left: 1em;
    margin-bottom: 0.5em;
    max-width: 35%;
    border: black solid 0.3em;
    border-radius: 0.2em;
    background-color: #4c516d;
    color: white;
    padding: 1em;
    overflow: auto; /*Prevents items like images from leaking out of the container*/
}

.info-box h3 {
    text-align: center;
}

.info-box img {
    /*Center image horizontally*/
    display: block;
    margin: auto;


    width: 80%;
    border: black solid 0.2em;
    border-radius: 0.2em;
}

.info-box a {
    text-decoration: none;
    color: white;
    transition: all 0.3s ease; /* Controls speed and smoothness */
}

.info-box a:hover {
    color: #87cefa;
}

.bd-link a {
    color: #00b7eb;
    transition: all 0.3s ease; /* Controls speed and smoothness */
}

.bd-link a:hover {
    color: coral;
}

/*-- Info Box Sections --*/
.info-section h4 {
    border-bottom: #87ceeb solid 0.1em;
    font-size: 1.2em;
    color: #87ceeb;
}

/*---- Chance Tables ----*/
table.chance-table {
    background-color: #1e90ff;
    color: black;
    text-align: center;
}

.chance-table,
.chance-table th,
.chance-table td {
    border: 0.2em solid black;
}

.chance-table th {
    background-color: #191970;
    color: aqua;
}

.chance-table li {
    text-align: left;
    padding-right: 0.5em;
}

.chance-col {
    background-color: #4c516d;
    color: aqua;
}

/*---- History Table ----*/
table.history-table {
    background-color: #1e90ff;
    color: black;
}

.history-table,
.history-table th,
.history-table td {
    border: 0.2em solid black;
}

.history-table th,
.history-table td {
    padding: 0.3em;
}

.history-table th {
    background-color: #191970;
    color: aliceblue;
}

.history-col {
    background-color: #4c516d;
    color: aliceblue;
}

/*---- Gallery Stuff ----*/
.gallery-container {
    width: 100%;

    /*Mobile fix*/
    overflow: visible;
    /*Center image horizontally*/
    margin: auto;
    text-align: center; /*Center contents*/
}

.gallery-selection {
    margin: 0.5em;
    display: inline-block; /*Allows non-leaking content, resize, and displaying side-by-side*/
    vertical-align: top; /*Prevents selection from appearing lower than another due to inline-block*/
    max-width: 20%; /*Allows the container to not take up the entire width of the parent container*/
    border: aqua solid 0.1em;
    border-radius: 0.2em;
    padding: 1.2em;

    /*Mobile fixes*/
    min-height: 300px;
    height: auto;
}

.gallery-selection img {
    /*Center image horizontally*/
    display: block;
    margin: auto;

    margin-bottom: 1em;
    max-width: 100%; /*Allows the image to fit entire space it occupies*/
    transition: transform 0.3s ease; /* Controls speed and smoothness */
    border: #00b7eb solid 0.1em;
    border-radius: 0.2em;
}

.gallery-selection img:hover {
    transform: scale(1.05);
}

/*Mobile fix: so cards don’t stay squeezed at 20% width on small screens*/
@media (max-width: 700px) {
    .gallery-selection {
        max-width: 100%;
        width: 100%;
    }
}

/*---- Image Expand Stuff ----*/
#img-expand {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    position: fixed;
    z-index: 2;
}

.hidden-display {
    display: none; /*Keep container hidden at first*/
}

.img-contents {
    width: fit-content;
    height: fit-content;

    max-width: 95vw;
    max-height: 95vh;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.img-contents img {
    /*Center image horizontally*/
    display: block;
    margin: auto;

    max-width: 95vw;
    max-height: calc(95vh - 2.5rem); /* leaves room for close button */

    clear: both; /*Allows button to stay on top of the image*/
}

#close-img { /*CSS for the button*/
    background: none;
    border: none;
    border-bottom: white solid 0.1em;
    color: white;
    margin-bottom: 0.4em;


    /* Toward the right*/
    float: right;

    transition: all 0.3s ease; /* Controls speed and smoothness */
}

#close-img:hover {
    color: #1e90ff;
    border-color: #1e90ff;
}

/*---- Reveal Spoiler Stuff ----*/

/*Spoiler content*/
.spoiler-content {
    background-color: rgba(65,102,245, 0.25);
    margin-top: 0.4em;
    padding: 0.5em;
    padding-left: 0.8em;
    padding-right: 0.8em;
    border-radius: 0.3em;
    min-height: 100%;

    /*Prents content from leaking outside of container*/
    overflow:hidden; 
    word-wrap:break-word
}

/*Button stuff*/
#reveal-button {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    border: #00b7eb solid 0.3em;
    border-radius: 0.4em;
    background-color: transparent;
    color: #00b7eb;
    padding: 0.5em;

    transition: all 0.3s ease; /* Controls speed and smoothness */
}

#reveal-button:hover {
    color: black;
    background-color: #00b7eb;
}


/* -------------------------------------- Footer Content -------------------------------------- */
footer {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #000036;
    margin-top: auto;
    padding-bottom: 1em;
    
}

footer h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 0.5em;
    border-bottom: white solid 0.05em;
    width: 95%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 0.2em;
}

footer ul {
    padding-top: 0.5em;
    padding-bottom: 1em;
    display: flex;
    margin-bottom: 0; /*Removes gap between bottom of footer and page*/
    list-style-type: none;
    justify-content: center;
    gap: 2.5em;
}

footer a {
    display: block;
    text-decoration: none;
    color: aqua;
    transition: all 0.3s ease; /* Controls speed and smoothness */
}

footer a:hover {
    color: red;
}