/* Reset some default browser styles */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Set a background color and basic font */
body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Header and Navigation Styles */
header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    color: #fff;
    text-decoration: none;
}

/* Main Content Section */
.main {
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

/* Game Info Styles */
.game-info {
    text-align: center;
    padding: 40px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/* Upcoming Game and Press Kit Styles */
.upcoming-games, .press-kit {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.upcoming-games h1, .press-kit h1 {
    text-align: center;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.upcoming-games .game-preview, .press-kit .press-kit-content {
    text-align: center;
    margin: 0 auto;
    display: flex;
}

.upcoming-games .game-image, .upcoming-games .game-details,
.press-kit  {
    flex: 1;
    margin-right: 20px;
}

.upcoming-games .game-details a {
    display: inline-block;
    margin-top: 10px; /* Add some top margin for spacing */
    padding: 8px 16px; /* Adjust the padding for a smaller size */
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.upcoming-games .game-details a:hover {
    background-color: #555;
}


.press-kit-content {
    flex: 1;
    margin-right: 20px;
}

.upcoming-games .game-details h2 {
    margin-bottom: 10px;
}

.upcoming-games .game-image img {
    width: 100%;
    height: auto;
}

/* Press Kit Section Styles */
.press-kit {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}

.press-kit h1,
.press-kit p,
.press-kit .press-kit-content {
    text-align: center;
}

.press-kit-content {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to the left */
    margin-left: 20px; /* Adjust the left margin as needed */
}

.press-kit-link {
    display: block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.press-kit-link:hover {
    background-color: #555;
}

/* About Us and Contact Us Styles */
.about-us, .contact-us {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-us h1, .contact-us h1 {
    text-align: center;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.about-us p, .contact-us p {
    text-align: center;
    margin-bottom: 20px;
}

/* Additional Styles */
h1, h2 {
    color: #333;
}

h2 {
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}

p {
    color: #555;
}

ul {
    list-style: none;
}

ul li {
    margin-bottom: 10px;
}

a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Additional CSS for Image Placement */
.top-image, .bottom-image {
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-image {
    background-color: black;
    height: 90vh;
}

.bottom-image {
    background-image: url('gfx/OneJoyFulDayBanner1920x513.png');
    background-size: cover;
    background-position: center;
    height: 33.33vh;
}



.graphics-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.image-info {
    width: calc(33.33% - 20px); /* Adjust the width as needed, considering margin */
    margin-bottom: 20px;
}

.links {
    margin-top: 10px;
}
.text-info {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    background-color: transparent; /* Taustavärin poisto */
}


.text-info h2, .text-info p {
    display: inline;
    background-color: transparent;
    padding: 0 10px;
    position: relative;
    top: -30px;
    margin-bottom: -30px;
    text-align: center; /* Keskity teksti */
    width: 100%; /* Täytä koko leveys */
}


.text-info h2 {
    margin-bottom: 10px;
}

.text-info p {
    margin-bottom: 20px;
}

.game-description {
    text-align: center;
    margin: 20px 0; /* Add some margin for spacing */
}

.other-sections {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px; /* Add margin for spacing */
}


/* Description Container Styles */
.description-container {
    display: inline-block;
    text-align: left;
}

/* Added for Playtest Reward page */

.games-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.game {
    width: calc(50% - 20px); /* Adjust the width as needed, considering margin */
    margin: 10px;
    margin-bottom: 50px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: center;
}

.game h2 {
    margin-bottom: 10px;
}

.game img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.game p {
    margin-bottom: 10px;
}

.game a {
    display: block;
    background-color: #007BFF;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
}

/* Reward Rules page CSS */

.content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Adjust list item alignment */
.content ol,
.content ul {
    text-align: left;
    margin-left: 1.5em; /* Adjust the left margin for proper indentation */
}

.content ol li,
.content ul li {
    margin-bottom: 10px; /* Add some bottom margin for spacing */
}

/* Add spacing between lines */
.instruction,
.reward {
    margin-top: 20px;
    font-weight: bold; /* Make the text bold */
}

/* Style for spacer div */
.spacer {
    height: 20px; /* Adjust the height for spacing */
}

/* Adjust alignment for finding playlog.txt instructions */
.content p:nth-child(7) {
    text-align: right;
}