style.css

@import url('appearance.css');
@import url('mobile.css');
@import url('pwa.css');
@import url('ui.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

* {
font-family: var(--font-main);
}

body {
background: var(--bg-main);
margin: 0;
}

::-webkit-scrollbar {
display: none;
}

::placeholder {
color: var(--placeholder);
}

center {
display: block;
text-align: -webkit-center;
}

.navbar {
background: var(--bg-main);
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: end;
}

.navname {
padding: 8px;
padding-left: 15px;
margin-right: auto;
display: flex;
cursor: pointer;
filter: drop-shadow(0 3px 2px black);
}

.navitem {
color: var(--light-text);
font-size: 16px;
margin: 25px;
}

a {
text-decoration: none;
color: var(--light-text);
}

.footer {
color :var(--light-text);
position: fixed;
bottom: 14px;
text-align: center;
font-size: 12px;
right: 14px;
}

.link {
color: var(--light-text) !important;
margin: 0 7.5px;
}

.homename {
color: var(--highlight);
font-size: 70px;
text-align: center;
margin-top: 185px;
margin-bottom: 50px;
font-family: var(--font-title);
}

.homelogo {
position: absolute;
top: 75px;
width: 100%;
user-select: none;
filter: drop-shadow(0 4px 6px black);
}

.search {
border-radius: 5px;
outline: none;
font-size: 16px;
padding: 5px;
width: 100%;
height: 30px;
background-color: var(--bg-main);
color: var(--light-text);
border: none;
}

.searchicon {
position: absolute;
font-size: 22px;
color: var(--placeholder);
height: 30px;
width: 30px;
line-height: 30px !important;
left: 5px;
}

#chatbox {
position: absolute;
top: 60px; 
left: 0; 
right: 0; 
bottom: 0;
border: none;
width: 100%;
height: calc(100% - 60px);
}

.icons-pos {
position: fixed;
bottom: 30px;
width: 100%;
}

.icons {
display: flex;
justify-content: center;
align-items: center;
}

.icon{
border-radius: 50%;
border: 1px solid var(--border);
width: 38px;
height: 38px;
display: flex;
margin-right: 3px;
margin-left: 3px;
align-items: center;
justify-content: center;
cursor: pointer;
}


#surf {
position: fixed;
top: 60px; 
left: 0; 
right: 0; 
bottom: 0;
border: none;
z-index: 10;
display: none;
background: var(--bg-main);
width: 100%;
height: calc(100% - 60px);
}

#arcade {
position: fixed;
top: 60px; 
left: 0; 
right: 0; 
bottom: 0;
border: none;
z-index: 10;
display: none;
background: var(--bg-main);
}

#closesurf {
display: none;
position: fixed;
top: 10px; 
right: 10px; 
background-color: var(--highlight);
border-radius: 2.5px;
height: 40px;
width: 40px;
text-align: center;
z-index: 11;
cursor: pointer;
}

#reloadsurf {
display: none;
position: absolute;
top: 10px; 
right: 60px; 
background-color: var(--highlight);
border-radius: 2.5px;
height: 40px;
width: 40px;
text-align: center;
z-index: 11;
cursor: pointer;
}

#closearcade {
display: none;
position: fixed;
top: 70px; 
right: 10px; 
background-color: var(--highlight);
border-radius: 2.5px;
height: 40px;
width: 40px;
text-align: center;
z-index: 11;
cursor: pointer;
}

#fullarcade {
display: none;
position: fixed;
top: 70px; 
right: 60px; 
background-color: var(--highlight);
border-radius: 2.5px;
height: 40px;
width: 40px;
text-align: center;
z-index: 11;
cursor: pointer;
}

#closeicon {
color: var(--light-text);
font-size: 30px;
line-height: 40px;
}

#reloadicon {
color: var(--light-text);
font-size: 25px;
line-height: 40px;
}

#closearcadeicon {
color: var(--light-text);
font-size: 30px;
line-height: 40px;
}

#fullarcadeicon {
color: var(--light-text);
font-size: 30px;
line-height: 40px;
}

.games {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}

.game {
width: 230px;
height: 310px;
border-radius: 8px;
cursor: pointer;
border: 1px solid var(--light-text);
display: inline-block;
margin-right: 35px;
margin-left: 35px;
margin-top: 15px;
margin-bottom: 15px;
}

.searchgames {
width: 55%;
margin-top: 75px;
margin-bottom: 5px;
outline: none;
color: var(--light-text);
border-radius: 5px;
padding: 5px;
padding-left: 8px;
border: 1px solid var(--border);
font-size: 16px;
height: 30px;
background-color: transparent;
}

.gameimg {
width: 100%;
height: 265px;
border-bottom: 1px solid var(--light-text);
border-radius: 8px 8px 0px 0px;
object-fit: cover;
}

.gameinfo {
width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
color: var(--light-text);
font-size: 16px;
line-height: 35px;
}

.settab, .settab2 {
margin-top: 75px;
color: var(--light-text);
text-align: center;
font-size: 35px;
}

.settab2 {
margin-bottom: 7px;
font-size: 40px;
}

.settab8 {
width: 30%;
margin-top: 14px;
outline: none;
color: var(--light-text);
border-radius: 5px;
padding: 3px;
padding-left: 8px;
border: 1px solid var(--border);
font-size: 15px;
height: 28px;
background-color: transparent;
}

.settit, .setfav, .setcssbtn {
width: 62px;
color: var(--light-text);
border-radius: 5px;
padding: 3px;
border: 1px solid var(--border);
font-size: 15px;
height: 38px;
background-color: transparent;
cursor: pointer;
margin-top: 14px;
}

.settabs {
display: flex;
flex-direction: row;
justify-content: center; 
align-items: center;
margin-top: 6px;
margin-bottom: 6px;
}

.settab3, .settab4, .settab5, .settab6, .settab7 {
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
border-radius: 50%;
border: 1px solid var(--border);
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}

.title {
margin-top: 75px;
color: var(--light-text);
text-align: center;
font-size: 40px;
}

.body {
color: var(--light-text);
text-align: center;
font-size: 20px;
margin-top: 7px;
line-height: 35px;
}

#info {
position: fixed;
bottom: 80px;
justify-content: center;
align-items: center;
width: fit-content;
height: 40px;
background: transparent;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
border: 1px solid var(--border);
border-radius: 2.5px;
text-align: center;
color: var(--light-text);
display: none;
padding: 5px;
}

.infoitem {
margin-left: 5px;
margin-right: 5px;
font-size: 16px;
cursor: pointer;
}

.infoitem:hover {
text-decoration: underline;
}

.proxies {
display: flex;
flex-direction: row;
justify-content: center; 
align-items: center;
}

.proxy {
border-radius: 5px;
border: 1px solid var(--border);
font-size: 16px;
padding: 5px;
min-width: 70px;
height: 30px;
background-color: transparent;
color: var(--light-text);
margin: 5px;
margin-top: 15px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}

.proxysel {
color: var(--highlight);
}

.setitle {
margin-top: 15px;
color: var(--light-text);
text-align: center;
font-size: 40px;
}

.sesel {
display: flex;
flex-direction: row;
justify-content: center; 
align-items: center;
margin-top: 6px;
margin-bottom: 6px;
}

.se {
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
border-radius: 30px;
border: 1px solid var(--border);
color: var(--light-text);
text-align: center;
padding: 14px 18px;
}

.seactive {
color: var(--highlight);
}

#nogame {
font-size: 20px;
text-align: center;
margin-top: 7px;
color: var(--light-text);
display: none;
}

.setapp {
margin-top: 15px;
}

.apptitle {
margin-top: 15px;
color: var(--light-text);
text-align: center;
font-size: 40px;
}

.chooseappsel {
display: flex;
flex-direction: row;
justify-content: center; 
align-items: center;
margin-top: 6px;
margin-bottom: 6px;
}

.chooseapp {
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
border-radius: 30px;
border: 1px solid var(--border);
color: var(--light-text);
text-align: center;
padding: 14px 18px;
}

.chooseappactive {
color: var(--highlight);
}

#docspage {
margin-top: 75px;
color: var(--light-text);
line-height: 35px;
}

.setcss {
margin-top: 15px;
}

.csstitle {
margin-top: 15px;
color: var(--light-text);
text-align: center;
font-size: 40px;
}

.setcssmain {
display: flex;
flex-direction: row;
justify-content: center; 
align-items: center;
margin-top: 6px;
margin-bottom: 6px;
}

.setcssinput {
width: 30%;
margin-top: 14px;
outline: none;
color: var(--light-text);
border-radius: 5px;
padding: 3px;
padding-left: 8px;
border: 1px solid var(--border);
font-size: 15px;
height: 28px;
background-color: transparent;
margin-right: 8px;
}

.navitem:hover {
text-decoration: underline;
}

.underline:hover {
text-decoration: underline;
}

#searchyoutube {
width: 70%;
margin-top: 10px;
margin-bottom: 5px;
outline: none;
color: var(--light-text);
border-radius: 5px;
padding: 5px;
padding-left: 8px;
border: 1.5px solid var(--light-text);
font-size: 16px;
height: 30px;
background-color: transparent;
}

#suggestions {
display: none;
width: calc(55% + 44px);
height: 272px;
border: 1px solid var(--border);
border-radius: 0 0 5px 5px;
border-top: none;
overflow: hidden;
position: absolute;
background: var(--bg-main);
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: left;
}

.sugg {
color: var(--light-text);
font-size: 20px;
cursor: pointer;
padding: 5px;
padding-left: 10px;
}

.sugg:hover {
color: var(--highlight);
}

.chooseappflex {
width: 470px;
flex-wrap: wrap;
margin-bottom: 1px;
}

.appflex {
margin-bottom: 5px;
}

#controls {
height: 60px;
width: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
background: var(--bg-main);
display: flex;
align-items: center;
flex-direction: row;
display: none;
z-index: 100;
}

.nav-icon {
margin: 0 5px 0 10px;
height: 38px;
width: 38px;
border-radius: 5px;
user-select: none;
}

.nav-title {
color: var(--light-text);
flex-grow: 1;
margin: 0 10px 0 5px;
padding: 7px;
user-select: none;
font-size: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
}

.nav-button {
font-family: Material Icons;
color: var(--highlight);
font-size: 25px;
cursor: pointer;
padding: 7px;
margin: 5px;
user-select: none;
}

#omnibox {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 5px;
outline: none;
border: 1px solid var(--border);
font-size: 16px;
padding: 5px;
width: 55%;
height: 30px;
background-color: var(--bg-main);
padding-left: 40px;
color: var(--light-text);
}

div > img {
height: 40px;
width: 40px;
}

.sidebar {
width: 250px;
background: transparent;
height: 100%;
user-select: none;
position: fixed;
top: 60px;
}

.sidetitle {
height: 55px;
font-size: 22px;
background: transparent;
display: flex;
align-items: center;
padding-left: 18px;
color: var(--light-text);
}

.sidecard {
background: transparent;
height: 50px;
display: flex;
align-items: center;
padding-left: 18px;
border-end-end-radius: 100px;
border-start-end-radius: 100px;
color: var(--light-text);
cursor: pointer;
border: 1px solid var(--bg-main);
border-left: 0;
}

.sidecardsel {
color: var(--highlight);
border: 1px solid var(--highlight);
border-left: 0;
}

.tabcontent {
background: transparent;
width: calc(100% - 250px);
height: 100%;
position: fixed;
right: 0;
top: 0;
display: none;
overflow-x: hidden;
top: 60px;
}

.tabcontentopen {
display: initial;
}

.tabtitle {
margin: 10px;
color: var(--light-text);
font-size: 22px;
}

.tabinput {
font-size: 18px;
color: var(--light-text);
margin: 10px;
border: 1px solid var(--border);
background: transparent;
border-radius: 2.5px;
padding: 10px;
outline: none;
width: 400px;
}

.tabbuttons {
display: flex;
flex-wrap: wrap;
max-width: 800px;
}

.tabbutton {
border-radius: 30px;
font-size: 18px;
color: var(--light-text);
margin: 10px;
border: 1px solid #5f6368;
background: transparent;
padding: 14px 18px;
cursor: pointer;
}

.tabchoice {
border-radius: 50%;
font-size: 18px;
color: white;
margin: 10px;
border: 1px solid var(--border);
background: transparent;
padding: 20px;
width: 10px;
height: 10px;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
cursor: pointer;
}

.tabbuttonactive {
color: var(--highlight)
}

#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -69;
}

#squares {
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -69;
overflow: hidden;
}


#squares .animated-box{
position: absolute;
background: rgba(255,255,255,.2);
display: block;
pointer-events: none;
border-radius: .5rem;
animation: animate-squares 6s linear infinite;
z-index: 1000;
}

@keyframes animate-squares{
0%{
opacity: 0;
transform:scale(0) translateY(-200%) rotate(0deg);
}
10%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
opacity: 0;
transform:scale(0.5) translateY(-500%) rotate(360deg);
}
}