html, body{
margin: 0px;
padding: 0px;
height: auto;
font-family: "Kanit", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
body {
font-family: "Kanit", sans-serif;
font-optical-sizing: auto;
font-style: normal;
margin: 0;
padding: 0;
}
/* Navbar styles */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
footer> p > a{
	text-decoration: none;
	color: white;
}
/**/
.container {
display: flex;
/* Removed flex-wrap: wrap; to prevent stacking */
justify-content: space-between; /* Distribute space between items */
}
.sidebar {
flex: 0 0 150px; /* Do not grow, do not shrink, fixed width of 150px */
min-width: 150px; /* Ensure minimum width, though flex-basis handles this now */
/*background-color: #f4f4f4;*/
padding: 10px;
text-align: center;
}
.main {
flex: 1; /* Allow main content to grow and shrink */
padding: 20px;
background-color: #fff;
min-width: 300px; /* Set a minimum width for the main content to prevent it from becoming too small */
}
.content-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
/*border-bottom: 1px solid #ddd;*/
padding-bottom: 15px;
}
.content-row img {
max-width: 100%;
height: 70%;
margin: 15px;
float: left;
}
.content-text {
flex: 1;
}
/* Responsive layout: stack columns on small screens */
@media (max-width: 768px) {
.container {
flex-direction: column; /* Still stack container items on small screens */
}
.sidebar { /* Allow sidebars to take full width when stacked */
flex: 1 1 100%;
min-width: unset; /* Remove min-width when stacked */
}
.main { /* Allow main to take full width when stacked */
flex: 1 1 100%;
min-width: unset; /* Remove min-width when stacked */
}
.content-row {
flex-direction: column;
}
.content-row img {
float: none;
margin: 0 auto 15px auto;
display: block;
}
.content-text {
text-align: center;
}
}
/*Navigation*/
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f0f0f0;
flex-wrap: wrap;
}
.navigation a {
text-decoration: none; /* Remove underlines from links */
color: #333; /* Link text color */
font-weight: bolder; /* Optional: Make links bolder */
font-size: 24px;
transition-duration: 0.4s;
letter-spacing: 0.10em;
}
.navigation a:hover{
color: green;
}
.navigation__left,
.navigation__right {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
flex: 1;
}
.navigation__left {
justify-content: flex-start;
}
.navigation__right {
justify-content: center;
}
.navigation__button {
flex: 1;
display: flex;
justify-content: flex-end;
}
.navigation__left li,
.navigation__right li {
margin-right: 15px;
}
.navigation__right li:last-child {
margin-right: 0;
}
.topbtn {
display: inline-block;
background-color: #AA336A;
color: #DAF7A6 ! important;
font-family: "Kanit", sans-serif;
font-weight: 100;
font-style: normal;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
@media (max-width: 1540px) {
.bi{
display: none;
}
}
@media (max-width: 768px) {
.navigation {
flex-direction: column;
align-items: center;
text-align: center;
}
.navigation__left,
.navigation__right,
.navigation__button {
justify-content: center;
flex: none;
margin-top: 10px;
}
.navigation__left li,
.navigation__right li {
margin-right: 10px;
}
.bi{
display: none;
}
}
/* Button to open modal */
/* Button to open modal */
.open-modal-btn {
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
color: white;
}
/* Modal overlay */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
/* Modal content with animation */
.modal-content {
background-color: #1a1a1a;
margin: 10% auto;
padding: 20px;
border-radius: 10px;
width: 300px;
text-align: center;
animation: zoomIn 0.4s ease;
color: white;
}
.modal-content>a{
text-decoration: none;
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Buttons inside modal */
.modal-content button {
display: block;
width: 100%;
margin: 10px 0;
padding: 12px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.single-player {
background-color: #28a745;
color: white;
}
.multiplayer {
background-color: #6c757d;
color: white;
position: relative;
}
/* Tooltip style */
.multiplayer::after {
content: "Coming soon";
position: absolute;
bottom: 110%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 5px 10px;
border-radius: 6px;
white-space: nowrap;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.multiplayer:hover::after {
opacity: 1;
}
/* Close button */
.close {
color: #aaa;
float: right;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: white;
}
}