@font-face {
  font-family: XPTahoma; /* set name */
  src: url(windows-xp-tahoma.otf); /* url of the font */
}

body {
  margin: 0;
  max-height: 100vh;
  max-width: 100vw;
  background: #ffe7f5;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  font-family: Arial, sans-serif;
}

#contents{
  margin-left: 10%;
  margin-right: 10%;
  box-shadow: 0 -1px 14px 0px #b0428859;
}

.btn {
  align-content: center;
  border-radius: 5px;
  height: calc(28 / 810 * 100vh);
  cursor: pointer;
  padding-left: 5px;
  padding-right: 6px;
  font: bold calc((14/810)*100vh) Arial;
  text-decoration: none;
  line-height: 24px;
  text-align: center;
}

#header {
  display: flex;
  align-items: flex-end;
  padding: calc(16 / 810 * 100vh);
  padding-bottom: 0px;
  padding-top: 0px;
  height: calc(150 / 810 * 100vh);
  background: linear-gradient(#ff97d4, #a60d79);
  box-shadow: 0 -1px 5px 0 #b04288 inset;
  justify-content: space-between;
}

#headerimages {
  position: absolute;
  display: flex;
  z-index: 0;
  align-content: flex-end;
  align-items: flex-end;
  height: 100%;
  flex-wrap: wrap;
}

#logo {
  display: block;
  background: #fff;
  height: 100%;
  width: 400px;
  position: relative;
}

#mascots {
  display: flex;
  background: #000;
  position: relative;
  justify-content: center;
  height: 100%;
  width: 100px;
}

#navigation {
  height: inherit;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: flex-start;
  align-items: flex-end;
  gap: calc(7 / 810 * 100vh);
}

#cosmetics {
  display: grid;
  box-sizing: border-box;
  height: inherit;
  position: relative;
  padding-top: calc(15 / 810 * 100vh);
  padding-bottom: calc(20 / 810 * 100vh);

  align-content: space-between
}

#fakesearch {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  background: #fff;
  height: calc(33 / 810 * 100vh);
  padding: 0 2px 0 4px;

  border-radius: 6px;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}
#searchbtn {background: linear-gradient(#e80499 0%, #880276 100%); color: #FFF;}

#searchtext {
  margin-right: 6px;
  font-size: calc((14/810)*100vh);
  font-family: Arial, Tahoma;
  color: #848484;
  border: 0;
}

#fakelogin {
  display: grid;
  grid-template-columns: auto auto auto;
  background: rgba(255, 255, 255, .5);
  border-radius: calc((12/810)*100vh);
  box-shadow: 0 1px 8px -2px #333;
  align-items: center;
  align-content: center;
  overflow: hidden;
  padding-top: calc(11 / 810 * 100vh);
  padding-bottom: calc(11 / 810 * 100vh);
  padding-left: calc(16 / 810 * 100vh);
  padding-right: calc(16 / 810 * 100vh);
}

#signup {background: linear-gradient(#e80499 0%, #880276 100%); color: #FFF;}
#signin {background: linear-gradient(#a802e3 0, #590996 100%); color: #FFF;}

.signtext {
  margin: 0px;
  color: #ffffff;
  font: bold calc((14/810)*100vh) Arial;
  letter-spacing: 0;
}

#ortxt {
  display: block;
  color: #60025d;
  font: bold calc((14/810)*100vh) Arial;
  margin: 0 5px 0 5px;
}

.navigation {
  align-content: center;
  height: calc(26 / 810 * 100vh);
  border-radius: 7px 7px 0 0;
  box-shadow: 0 -2px 3px 0 #b04288, 0 1px 2px 0 #f8ecf4 inset;
  background: linear-gradient(#ffc7e8,
                              #ffe7f5);
  padding: 2px 42px 2px;
  z-index: 1;
  display: block;
}

.navigation p {
  margin: 0;
  font: bold calc((14/810)*100vh) Arial;
  color: #87176e;
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

.navigation:hover {
  padding-bottom: 10px;
  background: linear-gradient(#ffc7e8,
                              #ffe7f5);
}

#gamecontainer {
  box-sizing: border-box;
  height: fit-content;
  display: grid;
  grid-template-columns: calc((270/810)*100vh) auto;
  gap: calc((40/810)*100vh);
  width: 100%;
  position: relative;
  z-index: 10;
  background: #ffe7f5;
  padding: calc(16 / 810 * 100vh);
  padding-bottom: calc(40 / 810 * 100vh);
}

#tabs {
  display: flex;
}

.kind {
  position: relative;
  top: 1px;
  z-index: 10;
  text-align: center;
  font: bold 12px Arial;
  color: #87176e;
  box-shadow: 0 1px 2px 0 #fff inset;
  border: 1px solid #ff9ad4;
  border-bottom: 0;
  padding: calc(6 / 810 * 100vh) calc(17 / 810 * 100vh) calc(6 / 810 * 100vh) calc(17 / 810 * 100vh);
  border-radius: 7px 7px 0 0;
  margin: 0;
  margin-right: calc(5 / 810 * 100vh);
  background: linear-gradient(#fee1f2 7%, #fff 40%, #fff 100%);
}

.kind.hidden {
  background: linear-gradient(#f9f3f6 1%, #ffc8e8 12%, #ffdcf0 50%, #fee1f2 80%, #e0cbd7 100%);
  z-index: 1;
  top: 0;
}

.blurbtext.hidden {
  display: none;
}

#social {
  border-width: 0px 1px 0px 0px;
  border-style: solid;
  border-color: #fea9d5;
  padding-right: calc(20 / 810 * 100vh);
}

#ads {
  border-radius: 7px;
  margin-top: calc((20/810)*100vh);
  margin-bottom: calc((30/810)*100vh);
  width: 100%;
  background: #fff;
  height: fit-content;
  overflow: hidden;
  border: 1px solid #ff9ad4;
  box-shadow: 0 -2px 3px 0 #decad8;
}

#text {
  padding: calc((5/810)*100vh);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#seenow {
  display: block;
  width: fit-content;
  background: linear-gradient(#e80499 0%, #880276 100%); color: #FFF;
}

#imagerotate {
  width: calc((250/810)*100vh);
  height: calc((200/810)*100vh);
  overflow: hidden;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease;
}

.image {
  width: calc((250/810)*100vh);
  height: calc((200/810)*100vh);
  object-fit: cover;
  opacity: 1;
  overflow: hidden;
  animation: fade 15s infinite;
}

#text {
  padding: 16px;
}

#gamename {
  font: bold calc((18/810)*100vh) arial;
  color: #87176e;
  margin: 0;
}

#happening {
  margin-top: calc((20/810)*100vh);
  background: url(https://web.archive.org/web/20140223164900im_/http://static2.spilcdn.com/gl/img/activity_header.png) no-repeat scroll 0 0 transparent;
  width: 100%;
}

#title {
  color: #87176e;
  font: bold calc((18/810)*100vh) arial;
  padding-left: calc((30/810)*100vh);
}

.inhoud {
  padding: calc((20/810)*100vh);
  box-sizing: border-box;
  color: #60025d;
  border: 1px solid #ff9ad4;
  box-shadow: 0 -2px 3px 0 #decad8;
  font: normal calc((14/810)*100vh) Arial;
  background: #fff;
  position: relative;
  height: calc((300/810)*100vh);
}

#games {
  height: inherit;
  display: block;
}

#topinformation {
  margin: 0;
}

.gameTitle {
  font: bold calc((21/810)*100vh) Arial;
  margin: 0;
  line-height: calc((28/810)*100vh);

  color: #60025D;
}

.category {
  color: #CB42A6;
  font: bold calc((14/810)*100vh) Arial;
  text-align: left;
  white-space: nowrap;
}

.category a{
  color: #60025D;
  font: calc((14/810)*100vh) Arial;
  text-decoration: none;
}

#container {
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-color: #fea9d5;
  padding-top: calc(40 / 810 * 100vh);
  padding-bottom: calc(40 / 810 * 100vh);
  padding-right: calc(20 / 810 * 100vh);
  padding-left: calc(50 / 810 * 100vh);
  display: grid;
  grid-template-columns: auto calc(250 / 810 * 100vh);
  box-sizing: border-box;
  gap: calc(70 / 810 * 100vh);
  margin-bottom: calc(20 / 810 * 100vh);
}

#gamethumbnails {
  width: calc(250 / 810 * 100vh);
  height: calc(570 / 810 * 100vh);
  background: #fff5f9;
  box-shadow: 0px 0px 3px 1px #fea9d5;
  border-radius: calc(10 / 810 * 100vh);
  overflow: hidden;
}

#heading {
  height: calc(28 / 810 * 100vh);
  margin: 0px;
  background: linear-gradient(#e80499 0%, #880276 100%); 
  color: #FFF;
  width: 100%; 
  font: bold calc((14/810)*100vh) Arial;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  display: flex;
  margin-bottom: calc(15 / 810 * 100vh);
}

#clickable{
  width: calc(250 / 810 * 100vh);
  padding-top: 2px;
  padding-bottom: 5px;
  height: calc(470 / 810 * 100vh);
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
  align-content: flex-start;
  display: flex;
  z-index: 1;
  justify-content: center;
  gap: calc(10 / 810 * 100vh);
  flex-wrap: wrap;
}

#tooltip-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}

.tooltip {
  position: fixed;
  width: calc(160 / 810 * 100vh);
  z-index: 9999;
  pointer-events: none;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;

  color: #551a8b;
  padding: calc(7 / 810 * 100vh) calc(12 / 810 * 100vh) calc(7 / 810 * 100vh) calc(12 / 810 * 100vh);
  font-size: calc(14 / 810 * 100vh);
  background: linear-gradient(rgba(255, 255, 255, 1) 0%, 
                              rgba(255, 207, 233, 1) 100%);
  box-shadow: 1px 1px 2px 0.2px rgba(0,0,0,0.5);
  filter: drop-shadow(0 0px 1px #d242a9);
}

.tooltip:after {
  content: "";
  width: 50%;
  height: 50%;
  display: flex;
  top: 0;
  transform: translateY(-98%);
  left: 0;
  position: absolute;
  clip-path: polygon(22% 0, 26% 100%, 54% 100%);
  background: #ffffff;
}

.blurb-data{
  display: none;
}

.gameClick {
  position: relative;
  padding: calc(5 / 810 * 100vh);
  box-sizing: border-box;
  border: 1px solid #60025d;
  background: linear-gradient( #ffb0d8 0, #e20497 100%);
  margin:0;
  z-index: 1;
  overflow:hidden;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-content: space-between;
  flex-wrap: wrap;
  text-decoration: none;
  width: calc(150 / 810 * 100vh);
  height: auto;
  aspect-ratio: 1/1;
  box-shadow: 2px 3px 3px 0.5px rgba(96, 2, 93, 0.3);
}

.gameClick.recent:after {
  content: "New";
  text-shadow:
      0 0 2px #fff,
      0 0 2px #fff,
      0 0 2px #fff,
      0 0 2px #fff,
      0 0 2px #fff;
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-color: #60025d;
  text-align: center;
  font: bold calc(14 / 810 * 100vh) arial;
  color: #60025d;
  top: calc(-120 / 810 * 100vh);
  left: calc(40 / 810 * 100vh);
  position: relative;
  transform: rotate(45deg);
  width: 100%;
  background: linear-gradient( #ffb0d8 0, #e20497 100%);
}

.gameClick:hover {
  filter: drop-shadow(0 0px 5px #e20497);
}

.thumbnail {
  margin: 0;
  height: 65%;
  background: #ffffff;
  width: 100%;
}

.gameInfo {
  width: 100%;
  height: 35%;
  background: #ffffff;
  margin: 0;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
  align-content: center;
  flex-wrap: wrap;
  font: bold calc((14/810)*100vh) Arial;
}

.game {
  margin: 0px;
  margin-top: calc((35/810)*100vh);
  height: fit-content;
  justify-content: center;
  align-content: center;
  align-items: center;
  display: flex;
}

#border {
  width: inherit;
  position: absolute;
  border-radius: 10px;
  padding: calc((7/810)*100vh);
  padding-bottom: calc((35/810)*100vh);
  margin-bottom:calc((28/810)*100vh);
  box-shadow: 0px 0px 3px 1px #fea9d5;
  text-align: center;
  color: #FFF;
  font: bold calc((16/810)*100vh) Arial;
  text-decorations: none;
  background: linear-gradient(#e80499 0%, #880276 100%);
}

#placeholder {
  margin: 0;
}

#actualGame {
  display: block;
}

#bottominformation {
  height: fit-content;
  padding-right: calc(300 / 810 * 100vh);
  display: block;
}

.gameDescription {
  font: normal calc((16/810)*100vh) Arial;
  color: #60025D;
}

#footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(#525252,#000000 );
  color: white;
  text-align: left;
  padding: calc(5 / 810 * 100vh);
  margin: 0;
  margin-top: calc(20 / 810 * 100vh);
  z-index: 20;
  font: bold calc(14 / 810 * 100vh) arial;
}

#footer a:link {
  font-weight: normal;
  text-decoration: none;
  color: #ffffff;
}

#footer a:visited {
  color: #ffffff;
}