* {

margin: 0;

padding: 0;

box-sizing: border-box;

list-style: none;

}

@font-face {

font-family: "sans";

src: url(font/sans.ttf);

}

body {

font-family: "sans";

margin: 0;

padding: 0;

}

#loading {

position: fixed;

width: 100%;

height: 100vh;

background-repeat: no-repeat;

background-position: center;

z-index: 99999;

}

.top {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

body.dark-mode {

background-color: black;

color: #eee;

}

body.dark-mode a {

color: #111;

}

body.dark-mode button {

background-color: #eee;

color: #111;

}

body.dark-mode h4 {

color: #eee;

}

body.dark-mode svg {

fill: #fff;

color: #151513;

}

body.dark-mode input {

color: white;

}

body.light-mode input {

color: #111;

}

body.light-mode {

background-color: white;

color: #111;

}

body.light-mode a {

color: #111;

}

body.light-mode button {

background-color: #111;

color: #eee;

}

body.light-mode h4 {

color: #111;

}

body.light-mode i {

color: #111;

}

body.light-mode svg {

fill: #151513;

color: #fff;

}

.github-corner:hover .octo-arm {

animation: octocat-wave 560ms ease-in-out;

}

@keyframes octocat-wave {

0%,

100% {

transform: rotate(0);

}

20%,

60% {

transform: rotate(-25deg);

}

40%,

80% {

transform: rotate(10deg);

}

}

@media (max-width: 500px) {

.github-corner:hover .octo-arm {

animation: none;

}

.github-corner .octo-arm {

animation: octocat-wave 560ms ease-in-out;

}

}

.toggleButton {

display: inline-block;

position: absolute;

top: 20px;

left: 20px;

/* margin: 30px 3px 3px 10px; */

margin: 20px 3px 3px 10px;

/* padding-top: 3px;

padding: 3px;

border: none;

border-radius: 50%;

font-size: 45px;

}

html.transition,

html.transition *,

html.transition *:before,

html.transition *:after {

transition: all 750ms !important;

transition-delay: 0 !important;

}

h1 {

text-align: center;

font-size: 3.5rem;

padding: 5vh 7vw;

}

@media only screen and (max-width: 658px) {

h1 {

font-size: 1.6em;

padding: 32px 40px;

}

}

h4 {

padding: 2%;

float: left;

}

i {

color: white;

float: right;

font-size: 30px;

padding: 2%;

}

img {

width: 100%;

border-radius: 10px 10px 0 0;

height: 80%;

}

a {

color: inherit;

}

a:visited {

color: inherit;

}

.container {

display: flex;

flex-direction: row;

font-size: 30px;

text-align: center;

}

.item {

flex: 50%;

width: 90%;

height: 100%;

background-color: rgba(23, 22, 22, 0.4);

box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent,

0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

border-radius: 10px;

transition: transform 0.3s ease-in-out 0s;

}

.item {

border-radius: 10px;

}

.item:hover {

transform: scale3d(1.05, 1.05, 1);

/* border: 1px solid #ffffff; */

filter: drop-shadow(10px);

filter: contrast(110%);

background-color: #684756;

}

.item h4 {

font-size: 1.3rem;

text-align: left;

}

.description{

width: 100%;

height: 80%;

top: 0;

left: 0;

background-color: #2d3436;

background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);

display: none;

position: absolute;

overflow: hidden;

justify-content: center;

align-items: center;

flex-direction: column;

opacity: 0;

/* transition: transform 0.9s ease-in-out 0s; */

color: #fff;

padding: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

}

.description p{

margin: 5px 10px 5px 10px;

}

.item:hover .description{

display: flex;

opacity: 1;

overflow: hidden;

}

.main {

/* padding: 20px;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

grid-gap: 24px;

row-gap: 24px;

margin: auto;

justify-items: center;

}

.main a {

text-decoration: none;

}

@media only screen and (max-width: 400px) {

.main {

grid-template-columns: repeat(auto-fit, minmax(90%, 1fr));

}

}

footer {

background-color: #19172e;

text-align: center;

color: white;

font-size: 1rem;

left: 0;

right: 0;

bottom: 0;

margin-bottom: 0;

padding: 10px;

line-height: 3vh;

margin-top: 30px;

}

footer a {

color: white !important;

}

footer a:visited {

color: white !important;

}

@media (max-width: 800px) {

.container {

flex-direction: column;

}

}

.scrollToTop {

position: fixed;

right: 10px;

bottom: 10px;

cursor: pointer;

width: 40px;

height: 40px;

background-color: #5520b6;

border-radius: 50%;

z-index: 100;

}

.scrollToTop span {

position: absolute;

top: 50%;

left: 50%;

margin-left: -8px;

margin-top: -12px;

border: 8px solid transparent;

border-bottom-color: white;

}

.scrollToTop:hover {

background-color: #5836d8;

}

input {

display: inline-block;

/* margin: 0px, 10px, 10px, 10px; */

border-radius: 25px;

padding: 10px;

width: 50%;

margin-bottom: 3%;

/* position: absolute; */

/* top: 6.5%; */

/* right: 7%; */

background: transparent;

border: 1px solid white;

}

header {

background-color: #333;

color: #fff;

padding: 20px;

text-align: center;

}

@media (min-width: 600px) {

header {

display: flex;

justify-content: space-between;

align-items: center;

}

}

@media (max-width: 102) {

.size {

font-size: 20px;

}

}

@media (min-width: 600px) {

h1 {

font-size: 1.6rem;

}

}

@media (min-width: 800px) {

h1 {

font-size: 1.9rem;

}

}

@media (min-width: 1000px) {

h1 {

font-size: 2.2rem;

}

}

.toggleButton {

display: block;

margin: 0 auto;

z-index: 2;

}

#searchbar {

margin: 14px 0px;

background-color: rgb(15, 13, 38);

color: white;

}

#searchbar::placeholder {

color: rgba(255, 255, 255, 0.684);

}

@media only screen and (max-width: 320px) {

h1 {

font-size: 18px;

margin-bottom: 8px;

}

}

.dark-btn {

padding: 4px 8px;

font-size: 14px;

margin-bottom: 8px;

}

.search-container {

padding: 4px;

}

.search-input {

font-size: 14px;

}

@media screen and (max-width: 530px) {

h1 {

font-size: 20px;

/* margin-top: 25px; */

}

}

@media screen and (max-width: 571px) {

h1 {

font-size: 20px;

/* margin-top: 25px; */

}

}

@media screen and(max-width: 571px) {

input {

margin-top: 10px;

}

}

@media screen and (max-width: 426px) {

h1 {

font-size: 18px;

}

}

@media screen and (max-width: 382px) {

h1 {

font-size: 16px;

}

}

@media screen and (max-width: 340px) {

h1 {

font-size: 15px;

}

}

@media screen and (max-width: 302px) {

h1 {

font-size: 14px;

}

}

@media screen and (max-width: 278px) {

h1 {

font-size: 13px;

}

}

@media screen and (max-width: 240px) {

h1 {

font-size: 12px;

}

}

@media screen and (max-width: 200px) {

h1 {

font-size: 11px;

}

}

@media screen and (max-width: 160px) {

h1 {

font-size: 10px;

}

}

@media screen and (max-width: 120px) {

h1 {

font-size: 9px;

}

}

@media screen and (max-width: 80px) {

h1 {

font-size: 8px;

}

}

@media screen and (max-width: 40px) {

h1 {

font-size: px;

}

}

@media screen and (max-width: 571px) {

.toggleButton {

font-size: 40px;

}

}

@media screen and (max-width: 401px) {

.toggleButton {

font-size: 30px;

}

}

@media screen and (max-width: 301px) {

.toggleButton {

font-size: 25px;

}

}

@media screen and (max-width: 241px) {

.toggleButton {

font-size: 18px;

}

}

.pagination button:not(:first-child):not(:last-child) {

width: 40px;

}

.pagination button:first-child,

.pagination button:last-child {

height: 40px;

width: 100px;

padding: 6px 10px;

}

.pagination>button:hover {

background-color: rgb(96, 130, 182);

color: white;

/* background-color: rgb(83, 99, 83); */

}

.pagination>button {

border-radius: 20px;

padding: 12px;

outline: none;

border: none;

margin-inline: 5px;

margin-bottom: 4px;

color: white;

font: bold;

}

.pagination button.active {

background-color: black;

color: white;

}

.game_page {

cursor: pointer;

}