/*
    main.css - A basic stylesheet for your web pages.
    This file contains foundational styles for the page body, a main content container,
    and smaller nested boxes.
*/

/* General body styling */
body {
    background-color: #f0f0f0; /* A light gray background for the entire page */
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    display: flex; /* Use Flexbox to easily center the content box */
    justify-content: center; /* Horizontally center the child elements */
    align-items: center; /* Vertically center the child elements */
    min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
}

/* Main LOGIN page background image */
.main-bg-image {
  background-image: url('../img/main-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}
/* Main index page background image */
.index-bg-image {
  background-image: url('../img/index-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}
/* Lore page Zen world background image */
.zen-world-bg {
  background-image: url('../img/zen-world-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}
/* Lore page Zen city under water image */
.zen-city-image {
  height: 600px;
  width: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* The main content box that holds all the page content */
.content-box {
    width: 50%;
    max-width: 800px; /* Prevents the box from getting too wide on large screens */
    background-color: #ffffff; /* A clean white background */
    border-radius: 10px; /* Smooth rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow to lift the box off the page */
    padding: 15px; /* Padding for the text inside */
}
/* The Zen content box that holds all the page content */
.content-box-zen {
    width: 50%;
    max-width: 800px; /* Prevents the box from getting too wide on large screens */
    background-color: #ffffff; /* A clean white background */
    border-radius: 10px; /* Smooth rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow to lift the box off the page */
    padding: 15px; /* Padding for the text inside */
    margin-top: 55px;
}

/* Smaller boxes that go inside the main content box */
.in-box {
    background-color: #f0f0f5; /* A darker gray to stand out from the body */
    border-radius: 5px; /* Slightly rounded edges */
    border: 2px solid #a9a9a9; /* A visible border line */
    padding: 15px; /* Padding for the text inside */
    margin-bottom: 15px; /* Adds space between multiple in-boxes */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* A subtle shadow for the inner boxes */
}

/* -- Content box for the game UI text -- */
.in-box-content {
    background-color: #f1f0f0;
    border-radius: 5px;
    border: 2px solid #a9a9a9;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 800px;
    /* --- The new, necessary lines below --- */
    display: flex;
    flex-direction: column-reverse; /* Stacks new items at the bottom */
    overflow-y: auto; /* Adds a vertical scrollbar when content overflows */
}

/* Styles for the h1, h2, p, and textarea HTML elements */
h1, h2, p {
    text-align: center; /* Center all h1, h2, and p tags */
}

p {
    font-size: 1.15rem; /* Medium-large font size as requested */
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
    text-align: left;
}

/* Styles for all input, select, and textarea fields */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea,
select {
    width: 100%; /* Ensure these elements take up the full width of their container */
    border: 1px solid #ccc; /* A light gray border */
    border-radius: 5px; /* Smooth rounded edges */
    padding: 8px; /* Some padding for text inside */
    box-sizing: border-box; /* Includes padding and border in the element's total width */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1); /* Combines inner and outer shadows */
}

/* Styles specifically for textarea to add a right margin */
textarea,
select {
    margin-right: 15px; /* Adds a margin to the right of the textarea and select boxes */
}


/* New styles for a label and a button */
.labeled-item {
    padding: 15px; /* Add padding for the label */
}

.styled-button {
    background-color: #007bff; /* A pleasant blue color for the background */
    color: #ffffff; /* White text for contrast */
    border: none; /* Remove the default button border */
    border-radius: 10px; /* Rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow */
    padding: 10px 20px; /* Add some padding inside the button */
    cursor: pointer; /* Change the cursor to a pointer on hover */
    display: block; /* Make the button a block element to allow for centered margins */
    margin: 20px auto; /* Center the button horizontally and add space below it */
}

/* New styles for a link that looks like a button */
.styled-link-button {
    background-color: #007bff; /* A pleasant blue color for the background */
    color: #ffffff; /* White text for contrast */
    text-decoration: none; /* Remove the default underline on links */
    border-radius: 10px; /* Rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow */
    padding: 5px 10px; /* Minimum padding */
    cursor: pointer; /* Change the cursor to a pointer on hover */
    display: block; /* Allows block-level centering */
    max-width: fit-content; /* Makes the element only as wide as its content */
    margin: 20px auto; /* Centers the block-level element horizontally */
}

/* New styles to float elements left or right */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

/* Clearfix: A new utility class to contain floated elements */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* New class to center a div horizontally within its parent */
.center-div {
    display: flex;
    justify-content: center;
}

/* New class to stack a label and input vertically */
.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px; /* Adds a small gap between each form field */
    margin-right: 15px; /* Adds a margin to the right of each form field */
}

/* New class to arrange form fields horizontally */
.form-row {
    display: flex;
    justify-content: space-between; /* Distributes items evenly */
    gap: 20px; /* Provides space between the fields */
}

.checkbox-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* This is the key change: it aligns children to the left */
    margin-bottom: 10px;
    margin-right: 15px;
}

/* This is the CSS for the emblem class */
.emblem-pic {
/* Set the position to fixed so it stays in the same place */
position: fixed;
top: 10px;
left: 10px;
            
/* Set the background image and size */
background-image: url('../img/emblem.png');
background-size: contain; /* Ensures the whole image is visible */
background-repeat: no-repeat;
            
/* Set the dimensions of the emblem container */
width: 100px;
height: 100px;
            
/* Add a z-index to ensure it stays on top of other content */
z-index: 1000;
}

/* Styling for the link to make it fill the container */
.emblem-pic a {
display: block;
 width: 100%;
height: 100%;
}