@import url('/assets/css/themes.css');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500&family=Plus+Jakarta+Sans:ital,wght@0,600;1,600&family=Quicksand:wght@300..700&display=swap');
body {
background-color: var(--bgcolor);
color: var(--txtcolor);
font-family: 'Plus Jakarta Sans', sans-serif;
margin: 0;
padding: 0;
}
#page-container {
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
#page-container.fade-in {
opacity: 1;
}
.searchInput {
background:transparent;
padding: 10px;
box-sizing: border-box;
margin-bottom: 20px;
width: 100%;
/* Occupy full width */
max-width: 400px;
/* Limit maximum width */
margin: 20px auto;
/* Center horizontally */
border-radius: 10px;
border: solid 2px #333;
user-select: none;
outline: none;
font-family: 'Plus Jakarta Sans', sans-serif;
}
a.link:hover {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: transparent;
transform: scale(1.04);
color: var(--txtcolor);
padding: 1px 1px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 13px;
border: solid 3px var(--navbar);
text-wrap: wrap;
}
.box img {
border-radius: 13px;
width:230px;
height:220px;
}
.button {
margin: 10px;
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: transparent;
border: none;
color: var(--txtcolor);
padding: 1px 1px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
border-radius: 12px;
transition: background-color 0.3s,
color 0.2s, transform 0.7s, border 0.3s;
display: inline-block;
}
.navbar {
opacity:0.7;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--navbar);
color: #fff;
border-radius: 7px;
position:fixed;
width:99.9%;
backdrop-filter: blur(10px);
z-index:999;
top:0.9px;
}
.navbar-brand .brand-logo {
width:50px;
margin:0;
}
.navbar-nav {
list-style: none;
display: flex;
gap: 1.5rem;
}
.nav-item .nav-link {
color: var(--txtcolor);
text-decoration: none;
font-size: 1rem;
transition: color 0.3s ease;
margin:10px;
}
.nav-item .nav-link:hover {
color: #aaa;
}
@media (max-width: 768px) {
.navbar-nav {
display: none;
}
}
.btn {
background-color: var(--bgcolor);
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-right: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.btn:hover {
background-color: #444;
}
.section {
margin:5px;
margin-top:100px;
background-color: var(--navbar);
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
width:300px;
}
.section h4 {
margin-top: 0;
color: #ddd; /* made by clipped (: */
}
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin:15px;
}
input, select {
padding: 15px;
margin-bottom: 20px;
width: 200px;
border: none;
border-radius: 5px;
background-color: var(--navbar);
color: #fff;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
transition:1s;
text-align:center;
}
input:focus, select:focus {
outline: none;
background-color: #101010;
}
input::placeholder {
color: #fff;
text-align:center;
}
#customContextMenu {
border: 1px solid var(--txtcolor);
background-color: var(--navbar);
color: var(--txtcolor);
border-radius: 10px;
}
.select-box {
background-color: var(--options2);
position: relative;
width: 200px;
cursor: pointer;
border-radius: 10px;
margin: 0 auto;
}
.selected-option {
border-radius: 10px 10px 0px 0px;
padding: 10px;
background-color: gray;
border: none;
color: black;
}
.options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: gray;
border-radius: 0px 0px 10px 10px;
list-style-type: none;
padding: 0;
margin: 0;
display: none;
}
.options li {
padding: 10px;
cursor: pointer;
color: var(--txtcolor);
transition:0.5s;
}
.options li:hover {
box-shadow: 0px 0px 10px var(--txtcolor);
border-radius:10px;
}
button {
width: fit-content;
height: 35px;
border-radius: 5px;
color: white;
border-style: none;
margin-bottom: 5px;
background: var(--txtcolor);
cursor: pointer;
transition: 0.5s;
font-family: 'Be Vietnam Pro', sans-serif;
}
button:hover {
background-color: var(--navbar);
cursor: pointer;
color: white;
box-shadow: 0px 15px 20px rgba(66, 135, 245, 0.1);
transform:scale(1.2);
}
.setinput {
width: 200px;
height:10px;
box-shadow: 0 0 20px black;
outline:none;
border-radius:5px;
background-color: transparent;
border:none;
text-align: center;
color:white;
font-weight: bold;
font-family: 'Be Vietnam Pro', sans-serif;
}
.setinput::placeholder {
color:white;
text-align: center;
}
.broken {
color: red;
font-weight: bold;
}
.buggy {
color: yellow;
font-weight: bold;
}
.typewriter-container {
text-shadow:0px 0px 10px white;
font-size: 2rem;
color: var(--txtcolor);
border-radius: 10px;
background: transparent;
}
.typewriter-text {
font-family: 'Be Vietnam Pro', sans-serif;
text-shadow:0px 0px 10px var(--txtcolor);
overflow: hidden;
animation: typing 2.5s steps(30, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: #fff; }
}
hr {
border: none;
border-top: 1px solid var(--txtcolor);
margin: 20px 0;
width:70%;
box-shadow:0px 0px 10px var(--txtcolor);
}
.reasons {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
video {
width:600px;
margin-top:120px;
border-radius:5px;
}
.carousel-container {
width: 100%;
height:225px;
overflow: hidden;
position: relative;
}
.featured {
display: flex;
position: absolute;
width: max-content;
height: 100%;
animation: scroll 20s linear infinite;
}
.featured img {
height: 200px;
width: 320px;
object-fit: cover;
margin:10px;
border-radius:10px;
transition: 0.2s;
}
.featured img:hover {
border:2px solid var(--txtcolor);
transform:scale(1.1);
}
@keyframes scroll {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(-20%);
}
}
.carousel-container:hover .featured {
animation-play-state: paused;
}
.icons {
color: white;
font-size:20px;
}
#other {
border: 5px solid black;
padding: 15px;
width: 225px;
border-radius: 10px;
font-size: 1vw;
cursor: pointer;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
transition: all .2s ease-in-out;
z-index: 1;
}
#credit-button {
border: 5px solid black;
padding: 10px;
margin: 15px;
width: 150px;
border-radius: 10px;
font-size: 2vw;
cursor: pointer;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
transition: all .2s ease-in-out;
z-index: 1;
}
#credit-button:hover {
width: 250px;
transition-duration: 0.3s;
color: var(--txtcolor);
background-color: var(--navbar);
}
#other:hover {
width: 275px;
transition-duration: 0.3s;
color: white;
background-color: var(--bgcolor);
}
#start-button {
border: 5px solid black;
padding: 15px;
width: 200px;
height:50px;
border-radius: 10px;
font-size: 1vw;
cursor: pointer;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
transition: all .2s ease-in-out;
z-index: 1;
}
#start-button:hover {
width: 250px;
transition-duration: 0.3s;
color: darkslategrey;
background-color: #282834;
}
.partner {
float: left;
margin: 20px;
flex-wrap: wrap;
border: 5px solid black;
background-color: #383838;
padding: 10px;
width: 375px;
border-radius: 8px;
height: fit-content;
}
.partner img {
border: 5px solid black;
border-radius: 10px;
width: 55%;
height: 35%;
justify-content: center;
}
.partner-text p {
font-size: 10px;
}
.partner-text h2 {
font-size: 20px;
}
.all {
justify-content: center;
}