frontend/style.css

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap');
@import url('bootstrap3.css');
@keyframes loadInAnimation {
  0% {
    opacity: 0 ;
  }
  100% {
    opacity: 100 ;
  }
}

:root {
     --inputbg: #3c096c ; 
    --inputborder: #5a189a ;
    --uibg: #240046 ;
    --textcolor: #fff ;
    --bg: #10002b ;
}
.suggest {
    fill: white;
}
.hiddenUpload {
  display:none ;
  visibility: hidden ;
}
* {
  transition-duration: 0.5s ;
  outline: none ;
  border: none ;
  box-sizing: border-box ;
  align-content: center ;
  text-align: center ;
  font-family: 'Prompt', sans-serif ;
  color: var(--textcolor) ;
}
.modal-content {
background:var(--uibg);
}
#myModal {
color:white;
}
.modal-footer {
border:0;
}
.modal-header {
border:0;
}
body {
  margin: 0 ;
  padding: 0 ;
  background: var(--bg) ;
  color: var(--textcolor) ;
  background-position: center ;
  background-repeat: no-repeat ;
  background-size: cover ;
  background-attachment: fixed ;
}
header,
footer {
  background-color: var(--uibg) ;
  display: flex ;
  padding: 0.7rem ;
  width: 100% ;
  z-index: 1 ;
  justify-content: center ;
}
header {
  top: 0 ;
  border-radius: 0 0 20px 20px ;
  position: fixed ;
  box-shadow: 0 5px 10px var(--uibg) ;
}
footer.noscroll {
  position: fixed ;
  overflow: hidden ;
}
footer {
  bottom: 0 ;
  border-radius: 20px 20px 0 0 ;
  box-shadow: 0 -5px 10px var(--uibg) ;
}
footer a,
footer a:visited,
header a,
header a:visited {
  text-align: center ;
  font-weight: 700 ;
  text-decoration: none ;
  margin-right: 2rem ;
  margin-left: 1rem ;
}

footer a:hover,
header a:hover {
  text-shadow: 2px 2px 6px var(--textcolor) ;
}
main {
  animation: 1.25s ease-in-out 0s 1 loadInAnimation ;
  align-items: center ;
  flex-direction: column ;
  display: flex ;
  min-height: calc(100vh - (2 * 0.7rem)) ;
  gap: 0 ;
  flex-wrap: wrap ;
  margin: auto ;
  margin-top: 4rem ;
  width: 90% ;
}
main#main.noscroll {
  justify-content: center ;
}
h1,
h2,
h3,
p,
a,
label {
  margin: 0 ;
  padding: 0 ;
  text-shadow: var(--shadow) ;
}
.samerow {
  display: flex ;
  justify-content: center ;
  gap: 0 ;
  flex-wrap: wrap ;
}
h1 {
  font-size: 60px ;
}

h2 {
  font-size: 40px ;
}
h3 {
  font-size: 20px ;
}
p, a {
  font-size: 16px ;
}

button, input#websubmit.submit, input[type=submit] {
  cursor: pointer ;
  background-color: var(--inputbg) ;
  border-color: var(--inputborder) ;
  border-width: 3px ;
  border-radius: 10px ;
  border-style: solid ;
  padding: 7px ;
  margin-left: 20px ;
  margin-right: 20px ;
  margin: 10px ;
}

button:hover, input#websubmit.submit:hover, input[type=submit]:hover {
  filter: brightness(80%) ;
  transform: scale(1.07) ;
}

img {
  width: 100% ;
  aspect-ratio: auto ;
  user-select: none ;
  filter: drop-shadow(var(--shadow)) ;
  image-rendering: pixelated ;
}

.img-container a {
  width: 100% ;
}

.img-container {
  display: flex ;
  justify-content: center ;
  align-items: center ;
  flex-direction: row ;
  gap: 0 ;
  flex-wrap: wrap ;
  width: 6% ;
  aspect-ratio: 1 / 1 ;
  margin: 2% ;
}

.game, .suggest {
  width: 15% ;
  border-radius: 20px ;
  display: inline-block;
  background-color: var(--uibg) ;
  margin: 15px ;
  cursor: pointer ;
  box-shadow: 0px 0px 5px 5px var(--uibg) ;
}

.game:hover, .suggest:hover {
  transform: scale(1.1) ;
  filter: brightness(85%) ;
  box-shadow: 0px 0px 5px 5px var(--uibg) ;
}

.game h1, .suggest h1 {
  font-size: 12px ;
  float: right ;
  margin-right: 10px ;
  margin-top: 3px ;
  margin-bottom: 3px ;
}

.game img, .suggest img {
  width: 100% ;
  border-radius: 20px ;
  aspect-ratio: 1 / 1 ;
}

img.star {
  float: left ;
  width: 10% ;
  margin-top: 3px ;
  margin-bottom: 3px ;
  margin-left: 10px ;
}

#noscroll {
  overflow-y: hidden ;
  justify-content: center ;
}

#games,
#pinned {
  width: 100% ;
  justify-content: center ;
}

a {
  font-size: 16px ;
}

input[type="text"] {
  width: 50% ;
  background-color: var(--inputbg) ;
  box-sizing: border-box ;
  font-size: 20px ;
  padding: 0.8% 0.8% ;
  text-align: center ;
  border-radius: 5px ;
  outline: none ;
  margin: 10px ;
  border: 2px solid var(--inputborder) ;
  border-radius: 5px ;
  transition: opacity 0.25s ease-in-out ;
  opacity: 100% ;
}
input[type=text]:hover {
  opacity: 80% ;
}
::placeholder {
  color: var(--textcolor) ;
  opacity: 0.4 ; /* Firefox */
}

.bookmarkletdiv {
  width: 30% ;
  background-color: var(--uibg) ;
  box-shadow: 0px 0px 5px 5px var(--uibg) ;
  padding: 5px ;
  margin: 15px ;
  border-radius: 10px ;
  display: inline-block ;
}

.bookmarkletdiv a {
  font-size: 30px ;
}

form {
  width: 100% ;
}
.samerow.themebtns {
  width: 70% ;
}

select {
  border-radius: 5px ;
  background-color: var(--inputbg) ;
  border-color: var(--inputborder) ;
  border-width: 5px ;
  border-radius: 10px ;
  border-style: solid ;
  padding: 0.5% 0.5% ;
  margin: 0.25% ;
}

gameframe {
  width: 100vw ;
  height: 90vh ;
}
gameframe iframe {
  width: 100% ;
  height: 100% ;
}

gameframe.header {
  display: flex ;
  justify-content: space-between ;
}

sl-icon-button {
  font-size: 2rem ;
  padding-right: 5px ;
}

h3#gametitle {
  font-size: 2rem ;
}thumb.png

.img-credits {
  height: 40vh ;
  width: auto ;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.555) ;
}

label {
  font-size: 20px ;
  padding-left: 5px ;
}
.avatar {
  margin: 5px ;
}
#bgimg {
  width: 30vw ;
  font-size: 16px ;
}