@charset "utf-8";
/* CSS Document */

.main-background {
	background-image: url("https://leprekis.neocities.org/images/Blue-MainBackground.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100vh;
}

.positioned-image {
	position: absolute;
	left: 150px;
	top: 10px;
}

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	background-image: url("https://leprekis.neocities.org/images/Blue-MainBackground.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: 'Open Sans', sans-serif;
	color: white;
}

.navbar {
	background-image: url("https://leprekis.neocities.org/images/NavBarBackground.png");
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 27px 100px;
	height: 35px;
	box-shadow: 0px 0px 25px #000000;
}

.navbar a {
	color: white;
	text-decoration: none;
	padding: 8px 10px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	display: inline-block;
}

.navbar a:hover {
	background-color: #3d3d3d;
	border-radius: 3px;
}

.intro {
	position: absolute;
	top: 50%;
	left: 20%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 80%;
}

.intro .text {
	text-align: left;
	margin-left: 20px;
}

.intro h1 {
	font-size: 30px;
	margin: 0;
}

.intro h3 {
	font-size: 10px;
	margin: 0;
}

.intro p {
	font-size: 20px;
	margin: 10px 0 0;
}

.intro .logo img {
	width: 100px;
	height: auto;
}

/* Limit the width of the description to the left */
.description {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px; /* Add gap between text and image */
	max-width: 800px;  /* Limit the width of the content */
	margin: 0 auto;	/* Center the container horizontally */
	padding-left: 10px; /* Add some padding on the left */
}

h2{
	font-size: 50px
}

h3{
	font-family: 'Poppins', sans-serif
}

/* Align text inside the container */
h2, h3, p {
	text-align: left;
	margin: 0 15;
}

img {
	max-width: 300px;
	height: auto;
}

/* Section Styling */
.video-gallery {
  background-color: #121212; /* Dark background */
  color: white; /* Text color for the title */
  padding: 20px;
  margin: 0 auto;
  max-width: 100%;
	box-shadow: 0px 10px 25px #000000;
}

.video-gallery h2 {
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
  text-align: center;
}

/* Horizontal Scroll */
.video-container {
  display: flex;
  gap: 20px; /* Space between videos */
  overflow-x: auto; /* Enable horizontal scrolling */
  padding-bottom: 10px; /* Space below for scrollbar */
  scrollbar-width: thin; /* Slim scrollbar */
  scrollbar-color: #888 #121212; /* Custom scrollbar colors */
}

.video-container::-webkit-scrollbar {
  height: 8px;
}

.video-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.video-container iframe {
  width: 300px; /* Adjust video width */
  height: 200px; /* Adjust video height for aspect ratio */
  border: 2px solid white; /* Add a white border */
  border-radius: 5px; /* Rounded corners */
  flex-shrink: 0; /* Prevent shrinking */
}

/* Styling for the image */
.rcs_screenshot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.h3-image {
	width: 400px;
	height: auto;
	margin-left: 30px; /* Add space on the left */
}

.recent-posts-section {
	background-image: url("https://leprekis.neocities.org/images/Recent-Posts-Background.jpg"); /* You can customize this */
	background-size: cover;  /* Ensures the background image covers the section */
	background-position: center;
	background-repeat: no-repeat;
	padding: 40px 20px;  /* Adjust padding for vertical spacing */
	color: white;
}

.recent-posts-section .content {
	max-width: 1000px; /* Limit the content width */
	margin: 0 auto; /* Center content horizontally */
	text-align: left;  /* Align text to the left */
}

.recent-posts-section h2 {
	font-size: 28px; /* Larger heading */
	margin-bottom: 20px;
}

.recent-posts-section p {
	font-size: 18px; /* Paragraph text size */
	margin-bottom: 20px;
}

/* Optionally, you can add a flex layout for individual posts or items */
.recent-posts-section .posts {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.recent-posts-section .post {
	flex: 1 1 calc(33.333% - 20px);  /* 3 items per row */
	background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background for each post */
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add some shadow for depth */
}

.recent-posts-section .post img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.recent-posts-section .post h3 {
	margin-top: 10px;
	font-size: 20px;
}

.recent-posts-section .post p {
	font-size: 16px;
	color: #ddd; /* Lighter color for the description */
}

/* Add responsiveness */
@media (max-width: 768px) {
	.recent-posts-section .posts {
    	flex-direction: column;
    	gap: 10px;
	}

	.recent-posts-section .post {
    	flex: 1 1 100%; /* 1 item per row on smaller screens */
	}
}

.custom-section {
	background-image: url("https://leprekis.neocities.org/images/404.jpg"); /* Replace with your image path */
	background-size: cover; /* Ensure the image covers the entire section */
	background-position: center; /* Center the background image */
	background-repeat: no-repeat; /* Prevent the image from repeating */
	color: white; /* Text color for contrast */
	padding: 1px 100px; /* Add padding for spacing */
	text-align: left; /* Center-align text */
	min-height: 400px; /* Set a minimum height for the section */
	box-shadow: 0px 0px 25px #000000;
}

/* Optional: Style for headings and paragraphs */
.custom-section h5 {
	font-size: 30px;
	margin-bottom: 15px;
}

.custom-section p {
	font-size: 18px;
	line-height: 1.6;
}

.background-section {
  background-image: url("https://leprekis.neocities.org/images/EndSection.jpg"); /* Adjusted path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh; /* Increased for better visibility */
  padding: 20px;
}

.image-container img {
  max-width: 100%; /* Ensure the image scales responsively */
  max-height: 90%; /* Prevent the image from overflowing the section */
}

.logo-container {
	display: flex;
	justify-content: center; /* Centers logos horizontally */
	align-items: center; /* Centers logos vertically */
	gap: 20px; /* Space between logos */
	height: 200px; /* Adjust height as needed */
}

/* Common styles for both logos */
.logo {
	display: block;
	background-size: contain; /* Ensure logos fit inside */
	background-repeat: no-repeat;
	background-position: center;
}

/* Neocities logo */
.neocities-logo {
	background-image: url('/neocities.png');
	width: 100px;
	height: 100px;
}

/* Siwakorn badge */
.bh {
	width: 88px;
	height: 31px;
	background-image: url('https://siwakornpc.neocities.org/images/siwakorn88x31.gif');
}

/* Hover effect */
.bh:hover {
	background-image: url('https://siwakornpc.neocities.org/images/siwakorn88x31hover.gif');
}

/* Active (clicked) effect */
.bh:active {
	background-image: url('https://siwakornpc.neocities.org/images/siwakorn88x31active.png');
}