/* Reset default margin and padding */
html, body, div, p, button {
    margin: 0;
    padding: 0;
}

/* Set body background color and font styles */
body {
    background-image: url('../resources/images/bg-art-only.jpg');
    background-size: cover; /* Scale the image to cover the entire browser window */
    background-position: top; /* Top align the background image */
    background-attachment: fixed; /* Ensure the background image remains fixed as the user scrolls */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
	height: 100vh; /* Set the height of the body to 100% of the viewport height */
    overflow-y: auto; /* Add vertical scrollbar if content exceeds viewport height */
	font-size: 16px; /* Base font size */
}

.header-container {
    display: flex; /* Use flexbox to center the container */
    justify-content: center; /* Center the container horizontally */
    padding: 10px; /* Add padding around the container */
	text-align: center; /* Center-align the header text within the container */
}

/* Style the header */
h1 {
    padding: 75px; /* Add padding around the header text */
    border: none; /* No border around the header text */
    border-radius: 0; /* No border radius */
    margin: 40px; /* Add margin around the header text */
    font-size: 2.875rem; /* 46px equivalent */
    color: #FFFFFF;
	background-image: url("../resources/images/toggle-menu-buttons.png"); /* Fill the area within the border with a solid color */
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5); /* Add text shadow for better visibility */
    font-family: "Alien Encounters", sans-serif; 
	letter-spacing: 4px;
}

/* Style the container */
.container {
    text-align: center; /* Center-align content within the container */
	height: 100%; /* Set the height of the container to 100% of the body height */
}

/* Style the buttons container */
.button-container {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center the buttons horizontally */
}

/* Style the buttons */
button {
    display: inline-block; /* Display buttons in a line */
    margin: 10px 10px 0; /* Add space between buttons */
    padding: 10px 30px;
    background-image: url("../resources/images/text-button.jpg");
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	background-size: 100% 100%;
	font-size: 2rem;
	font-weight: bolder;
	font-family: "SF Movie Poster", sans-serif;
	/* Chrome, Safari */
	-webkit-box-shadow: 5px 5px 15px #003a1a;
	-moz-box-shadow: 5px 5px 15px #003a1a;
	/* Standard syntax */
	box-shadow: 5px 5px 15px #003a1a;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem; /* Smaller font size on smaller screens */
		font-family: "Alien Encounters", sans-serif; 
    }

    .button-container {
        flex-direction: column;
        align-items: center; /* Center-align buttons when stacked */
    }	
	
    .button {
        padding: 8px 24px; /* Smaller buttons on smaller screens */
    }

    #result {
        width: 80%; /* More width for smaller screens */
    }
	
    .menu ul li {
        display: block; /* Stack the menu items vertically */
        width: 100%; /* Full width for each menu item */
        margin: 0; /* Remove the right margin */
		padding: 8px 0;
    }

    .menu ul li a {
        display: block; /* Make links fill their container */
        font-size: 1.1rem; /* Smaller font size for small screens */
        padding: 10px; /* More padding for easier tapping */
        text-align: center; /* Center-align the text */
		box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 5px;
    }

    .menu ul li {
        display: block; /* Stack the menu items vertically */
        width: 100%; /* Full width for each menu item */
        margin: 0; /* Remove the right margin */
		padding: 8px 0;
    }

    .menu ul li a {
        display: block; /* Make links fill their container */
        font-size: 1.1rem; /* Smaller font size for small screens */
        padding: 10px; /* More padding for easier tapping */
        text-align: center; /* Center-align the text */
		box-sizing: border-box;
    }
	
    .button-container {
        flex-direction: column;
        align-items: center; /* Center-align buttons when stacked */
    }

    .button {
        padding: 8px 24px; /* Smaller buttons on smaller screens */
    }
	
    button {
        margin: 5px;
        font-size: 1.7rem; /* Smaller font size for buttons */
    }
}

img {
    max-width: 100%;
    height: auto;
}

.logo {
    position: absolute;
    left: 10px; /* Adjust left position as needed */
    width: 170px; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
	z-index: 1;
}

.menu-toggle {
    position: fixed; /* Make the toggle button fixed to the viewport */
    right: 0; /* Position the toggle button on the left side */
    top: 0; /* Position the toggle button at the top */
    z-index: 999; /* Ensure the toggle button appears above other content */
    margin: 10px; /* Adjust margin as needed */
}

/* Change button color on hover */
button:hover {
    background-image: url("../resources/images/text-button-hover.jpg");
	color:darkorchid;
	text-decoration:underline
}

/* Style the result div */
#result {
    margin: 20px auto 15px; /* Center the box horizontally with top and bottom margins */
    background-color: #000; /* Black background color */
    color: #30dc30; /* Font color */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Box shadow */
    width: 50%; /* Set width to 50% of the viewport width */
    max-width: 600px; /* Maximum width */
    font-size: 1.25rem; /* Font size */
	font-weight: bold;
    border: 5px double #71009B; /* Border with dimension */
	padding: 3px;
	white-space: pre-wrap; 
	word-wrap: break-word; 
}

.wordWrap
{
	white-space: pre-wrap; 
	word-wrap: break-word; 
}

/* Style the Rolls in this Session button */
#history-button {
    display: block; /* Ensure the history button takes full width */
    margin: 20px auto 0; /* Center-align the history button horizontally */
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Change history button color on hover */
#history-button:hover {
    background-color: #0056b3;
}

/* Style the history window */
.history-window {
    width: 400px;
    height: 400px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
    background-color: #000; /* Set the background color of the footer */
    color: white; /* Set the text color */
    text-align: center; /* Center-align text within the footer */
}

/* Style the header menu */
.menu {
    display: none; /* Hide the menu bar by default */
    color: white;
	box-sizing: border-box;
	position: fixed; /* Fixed position */
    top: 0px; /* Position at the top of the viewport */
    left: 0; /* Position at the left of the viewport */
    width: 40%; /* Full width */
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
	z-index: 2;
}

.menu ul {
    list-style-type: none;
    margin-top: 10px;
    padding: 0;
	text-align: left
}

.menu ul li {
    display: inline-block;
    margin-right: 20px;
}

.menu ul li a {
    color: white;
	background-color: #3A004D;
	border-radius: 2px;
	padding: 4px;
	font-size: 1.25rem;
	font-family: "SF Movie Poster", sans-serif;
	/* Chrome, Safari */
	-webkit-box-shadow: inset 5px 5px 15px #33cc44;
	/* Standard syntax */
	box-shadow: inset 5px 5px 15px #33cc44;
}

.menu ul li a:hover {
    color: white;
    text-decoration: underline;
	background-color: darkorchid;
	border-radius: 2px;
	padding: 2px;
	/* Chrome, Safari */
	-webkit-box-shadow: inset 5px 5px 15px #33cc44;
	/* Standard syntax */
	box-shadow: inset 5px 5px 15px #33cc44;
}

.content {
    /* Styles for the content section */
}

.overlay {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    z-index: 9999; /* Ensure overlay appears above other content */
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000; /* White background for overlay content */
    padding: 20px;
    border-radius: 5px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
}

.scrollable-content {
    max-height: calc(100% - 100px); /* Adjust height to leave space for button and padding */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
	background-color: black;
	color: #33ee33;
	padding-right: 40px;
}

.scrollable-content-align-left {
	text-align: left;
}

/* Style the close button */
#closeOverlayButton {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ddd;
    padding: 10px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	z-index: 100;
}

#closeOverlayButton:hover {
    background-color: #ccc;
}

.text-box {
    background-color: black;
    border-radius: 10px; /* Adjust as needed */
    padding: 20px; /* Adjust as needed */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Faded edges */
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
}

.text-box p {
    font-family: Garamond, serif;
    color: #33ee33; /* Neon green */
    margin: 0; /* Remove default margin */
}