/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Reset defaults and set the background */
body {
    margin: 0;
    padding: 0;
    background-color: #1a4f8b; 
    background-image: url('.png'); 
    background-repeat: repeat;
    font-family: 'Courier New', Courier, monospace; 
    color: #000000; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}


/* Center all content in a single column */
.shrine-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    padding: 20px;
}

/* Typography styles */
h1 {
    font-size: 2rem;
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.subtitle {
    font-size: 1.1rem;
    margin-top: 0;
}

.question a {
    color: #000000;
    text-decoration: underline;
}

/* Character spacing */
.characters img {
    max-width: 150px;
    height: auto;
    margin-bottom: -10px; /* Slight overlap with the art box if needed */
    z-index: 2;
}

/* Main art frame */
.art-box {
    background-color: #000000; /* Pure black frame */
    padding: 40px; /* Gives the thick black border space around the art */
    display: inline-block;
    z-index: 1;
}

.art-box img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Footer credit */
.credit {
    margin-top: 15px;
    font-size: 1rem;
}

.credit a {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}