html, body{
margin: 0px;
padding: 0px;
height: auto;
background: #9DDF1D;
background-image: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url(../pictures/home.webp);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
body {
font-family: "Kanit", sans-serif;
font-optical-sizing: auto;
font-style: normal;
margin: 0;
padding: 0;
}
/*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 {
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
@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 */
.open-modal-btn {
padding: 10px 20px;
font-size: 18px;
background: #1e90ff;
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;
}
@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;
}
.modal-content>a{
text-decoration: none;
}
.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;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 50px 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)),url(../pictures/home.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 50em;
}
header h1 {
font-size: 3rem;
}
.shadow{text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);}
h2{color: whitesmoke;}
p{padding: 20px;}
.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);
}
.topbtn:hover {
background-color:  #4a9d05;
color: #fff!important;
text-shadow:none;
}
.btn {
display: inline-block;
background-color:#AA336A;
color:#DAF7A6!important;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
border: solid 1px black;
font-weight: bold;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 0.10em;
}
.btn:hover {
background-color: #4a9d05;
color: #fff!important;
}
.features {
text-align: center;
padding: 50px 0;
}
.features h2 {
font-size: 2rem;
}
.features ul {
list-style: none;
padding: 0;
}
.features li {
font-size: 1.2rem;
margin: 10px 0;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
#navigation {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%); /* Center vertically */
list-style: none; /* Remove default list styling */
padding: 0;
margin: 0;
}
#navigation li {
display: block;
margin-left: 10px; /* Adjust spacing between links */
}
#navigation a {
text-decoration: none;
color: ghostwhite; /* Change color to your preference */
}
#storyline{
height: auto;
padding: 20px;
}
#gameplay{
height: auto;
padding: 20px;
}
#competition{
height: auto;
padding: 20px;
}
#updates{
height: auto;
padding: 20px;
}
/*frame*/
.frame{
height: auto;
width: 300px;
border: 20px solid transparent;
padding: 20px;
z-index: 2;
border-image: url(../pictures/fram.png) 30 fill / 30px stretch;
background-clip: padding-box;
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(../pictures/city.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.frame2{
border: 20px solid transparent;
z-index: 2;
border-image: url(../pictures/framedesert.png) 50 fill / 50px stretch;
background-clip: padding-box;
height: auto;
}
.frame3{
border: 20px solid transparent;
z-index: 2;
}
.slant {
--a: 3deg; /* control the angle (yes it should be small) */
--c: navajowhite;
border-image: conic-gradient(var(--c) 0 0) fill 0//9999px;
clip-path:
polygon(
-9999px calc(tan(var(--a))*9999px),
9999px calc(tan(var(--a))*-9999px),
calc(100% + 9999px) calc(100% - tan(var(--a))*9999px),
calc(100% - 9999px) calc(100% + tan(var(--a))*9999px)
);
}
.slant.alt {
--c: lightblue;
clip-path:
polygon(
-9999px calc(100% - tan(var(--a))*9999px),
9999px calc(100% + tan(var(--a))*9999px),
calc(100% + 9999px) calc(tan(var(--a))*9999px),
calc(100% - 9999px) calc(tan(var(--a))*-9999px)
);
}
/* the below is a fix specific to my case to avoid the overlap with the title
you may need to consider something else in your real case but sill using z-index
*/
.slant {
position: relative;
z-index: -1;
}
.full-background {
border-image: linear-gradient(0deg,#1095c1 5px,lightblue 0) fill 0//0 100vw;
padding-block: 10px;
}
#img{
height: auto;
width: 1000px;
background-image: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url(../pictures/futuristic_planet.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#img1{float: left; clear: both;}
#img2{float: right; clear: left;}
#img3{float: right; clear: both;}
.fancy {
--b: 5px;   /* control the border thickness */
--w: 100px; /* control the width of the line*/
--h: 1.6em; /* control the height of the element */
--c: #0B486B;
width: fit-content;
padding: 0 calc(2*var(--h)/3);
line-height: var(--h);
color: #4AE2F9;
clip-path:
polygon(
calc(var(--h)/2) 0,100vw 0,
100vw var(--b),100%  var(--b),
calc(100% - var(--h)/2) 100%,-100vw 100%,
-100vw calc(100% - var(--b)),0 calc(100% - var(--b))
);
border-image: var(--_g,linear-gradient(var(--c) 0 0)) fill 0//0 var(--w);
margin-inline: auto;
}
.full-line-left {
border-image: linear-gradient(0deg,#c32e2e 5px,#0000 0) fill 0//0 0 0 100vw;
padding: 10px 0;
width: fit-content;
}
.left{
float: left;
}
#story1{
background-image: url(../pictures/spaceshuttle.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center ;
width: 400px;
}