body {
    background-color: #51006a; /* Dark orange background */
    font-family: Afacad; /*Arial, sans-serif*/
    color: white;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}

@font-face {
  font-family: Afacad;
  src: url("/css/font.ttf");
}

/* Main container box */
.container {
    background-color: #a200ff; /* Darker orange background */
    border: 3px solid #56009d; /* Orange outline */
    border-radius: 10px; /* Rounded corners */
    padding: 3px 3px; /* Thinner padding on the X-axis */
    text-align: center;
    width: auto; /* Set a width for the container */
    /* max-width: 600px; Max width for better responsiveness */
    margin-top: 10px; /* Adds 10px space above the container */
}

.inner-container {
    background-color: #bb00bb; /* Darker orange background */
    border: 3px solid #98009d; /* Orange outline */
    border-radius: 10px; /* Rounded corners */
    padding: 3px 3px; /* Thinner padding on the X-axis */
    text-align: center;
    vertical-align: middle;
    align-items: center;
    display: table-cell;
    height: 140px;
    max-height: 140px;
    margin-bottom: 10px;
}

iframe {
    padding: 0px;
    border-radius: 0px;
}

button {
    background-color: #8f4aff;
    border: 1px solid #71009d;
    border-radius: 10px;
    padding: 3px 3px;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
    margin-top: 1px;
}

button img {
    width: auto;
    height: 20px;
}

.game-container {
    background-color: #000000;
    border: 3px solid #71009d;
    border-radius: 10px;
    padding: 3px 3px;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
    width: 100%;
    max-width: 800px;
    height: 600px;
    margin-bottom: 10px;
}

.inner-container img {
    height: auto; /* Set image height */
    width: 90%; /* Maintain aspect ratio */
    border-radius: 10px;
}

.grid { /* Need a pull to center these damn grid elements :(( */
    margin-top: 5px;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(auto-fill, 110px);
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
    gap: 10px;
    margin: auto;
}

.header-container {
    display: flex; /* Use flexbox for horizontal alignment */
    align-items: center; /* Vertically align the image and h1 in the center */
    justify-content: center; /* Horizontally align the items in the center */
    gap: 10px; /* Optional: space between the image and h1 */
    margin: auto;
    height: auto; /* Let the container size itself based on its content */
    padding: 10px;
}

/* Image styling */
.header-container img {
    height: 50px; /* Set image height */
    width: auto; /* Maintain aspect ratio */
}

/* Header styling */
.header-container h1 {
    margin: 0; /* Remove the default margin from the h1 */
    padding: 0; /* Remove any padding */
    line-height: 1; /* Ensure the line-height is tight */
}

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

/* 1px separator styling */
.separator {
    border: 0;
    border-top: 1px solid #fff; /* White line, change color if needed */
    margin: 10px auto; /* Adds spacing above and below the line and centers it */
    width: 95%; /* Set the width to 95% of the parent container */
}

/* Heading styling */
h1 {
    font-size: 3em;
    margin-top: 3px;  /* Fixed missing semicolon */
    margin-bottom: 3px; /* Reduced bottom margin */
}

/* Paragraph styling */
p {
    font-size: 1.5em;
    margin-top: 0px;  /* No space above paragraph */
    margin-bottom: 3px; /* Reduced bottom margin */
}

a.no-style {
    text-decoration: none; /* If not already specified in global CSS */
    color: inherit;        /* Inherit color */
    font-weight: normal;   /* Remove bold */
    font-size: inherit;    /* Inherit font size */
    margin: 0;             /* Remove any margin */
}

a:hover.no-style {
    text-decoration: none; /* If not already specified in global CSS */
    color: inherit;        /* Inherit color */
    font-weight: normal;   /* Remove bold */
    font-size: inherit;    /* Inherit font size */
    margin: 0;             /* Remove any margin */
}

a:visited.no-style {
    text-decoration: none; /* If not already specified in global CSS */
    color: inherit;        /* Inherit color */
    font-weight: normal;   /* Remove bold */
    font-size: inherit;    /* Inherit font size */
    margin: 0;             /* Remove any margin */
}

/* Style links */
a {
    text-decoration: none;  /* Remove underline */
    color: white;           /* Set link color to white */
    font-weight: bold;      /* Make the font bold */
    font-size: 1.5em;       /* Set font size to 1.5mm */
}

/* Style for when the link is hovered over */
a:hover {
    text-decoration: none;  /* Ensure no underline on hover */
    color: white;           /* Ensure white color on hover */
    font-weight: bold;      /* Keep bold on hover */
    font-size: 1.5em;       /* Keep font size 1.5mm on hover */
}

/* Style for visited links */
a:visited {
    color: white;           /* Keep links white even when visited */
    font-weight: bold;      /* Keep bold for visited links */
    font-size: 1.5em;       /* Keep font size 1.5mm for visited links */
}

.rounded {
    border-radius: 50px;
}