/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */

html,body{ 
	width:100%;
	height:100%;
	background:#111;
}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Set the height of the body to the full viewport height */
    margin: 0;
    position: relative; /* Set position relative to allow absolute positioning */
}

canvas{
  display:block;
  vertical-align:bottom;
}


/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #0808080;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


/*---- other stuff ---- */

h1 {
    font-size: 36px; /* Adjust the font size as needed */
    text-align: center;
    position: absolute;
    top: 50%; /* Position at the vertical center */
    left: 50%; /* Position at the horizontal center */
    transform: translate(-50%, -50%); /* Center the element */
    z-index: 1; /* Ensure the title is above the particles */
}


nav {
    background-color: #0808080;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 20px;
    position: fixed;
    top: 0;
    left: 50%; /* Position at 50% from the left edge */
    transform: translateX(-50%); /* Move back 50% of its own width to center horizontally */
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    margin: 0 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: #383736;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10vw;
  align-items: center;
  text-align: center;
}

.container h1 {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--third-color));
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0;
  color: transparent;
  font-size: 68px;
}

.photo-gallery a {
  display: inline-block;
  overflow: hidden;
  transition: transform 0.3s ease-out;
}

.photo-gallery a:hover {
  transform: scale(1.1);
}

html {
  scroll-behavior: smooth;
}

photo-gallery {
  display: flex; 
}

.photo-gallery img {
  width: 25%; 
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
    padding: 2rem;
    background-color: #262626;
    color: #ffffff;
    margin: 2rem 0;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

section h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

section p {
    font-size: 1.4rem;
    color: #e0e0e0;
}

#gallery {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
}

.photo-gallery {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}


/* ---- game box css and extra ----*/

.game-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}


.game-box {
    width: 200px;
    height: 250px;
    border: 2px solid #242526;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    background-color: #242526;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.game-box:hover {
    transform: scale(1.1);
}

.game-box a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.game-icon {
    width: 100%;
    height: 80%;
    object-fit: cover;
    border-bottom: 2px solid #242526;
}

.game-text {
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    background-color: #242526;
    color: #fff;
    border-top: 2px solid #242526;
}


@media (max-width: 768px) {
    .game-box {
        width: 100%;
    }
}

/* Style for the search bar */
#gameSearch {
  width: 80%; /* Adjust the width as needed */
  max-width: 400px; /* Set a maximum width to limit its size */
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid #242526;
  border-radius: 8px;
  background-color: #292a2b;
  color: #fff;
  margin: 0 auto; /* Center the search bar horizontally */
  display: block;
  margin-bottom: 20px; /* Add margin to separate it from other elements */
}

/* Style for the game boxes container */
.game-container {
  display: flex;
  flex-wrap: wrap;
}

  .time {
    background-color: #0808080;
    padding: 8px;
    border-radius: 100px;
    color: #fff;
    font-size: 16px; 
    margin: 1px;
    z-index: 1px	  
}

/*--- Proxy css --- */

#uv-form {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form__input {
  width: 300px; /* Adjust width as needed */
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 5px;
  outline: none;
  background-color: #1e1e1f	
}

.form__input:focus {
  border-color: #292a2b; /* Change focus color as needed */
}

.form__input::placeholder {
  color: #aaa; /* Placeholder color */
}

.form__submit {
  background-color: #007bff; /* Button background color */
  color: #fff; /* Button text color */
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
}

.form__submit:hover {
  background-color: #343638; /* Hover color */
}


::-webkit-scrollbar {
    width: 10px; /* Set the width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #0808080; /* Track color */
}

::-webkit-scrollbar-thumb {
    background: #0808080; /* Thumb color */
}

::-webkit-scrollbar-thumb:hover {
    background: #0808080; /* Thumb color on hover */
}