@import url("https://bayanbox.ir/blog/trash/templates/fonts/arad/style.css?download");

* {
  box-sizing: border-box;
}

:root {
  --color-bg: #eee;
  --color-txt: #454c55;
  --color-title: #252c35;
  --color-accent: hsl(190, 100%, 40%);
  --color-accent: #12b9a9;
  --color-accent-opacity: #12b9a933;
  --color-accent-opacity2: #12b9a911;
  --borderRradius: 12px;
  --fontFamily: arad,"sahel", "estedad", "b yekan", System;
  --card-shadow: 0 10px 30px -10px #0001;
  --gap: 1rem;
  --border: 1px solid #8884;
  --color-link: hsl(174.3, 50%, 80%);
  text-shadow: 0 4px 4px #0003;
}

body{
  direction: rtl;
  font-family: var(--fontFamily);
}


h1 {
  width: max-content;
  margin: 0 auto 1rem;
  padding: .75em;
  line-height: 1;
  padding: 1rem;
  background: linear-gradient(#0000 20%,var(--color-accent-opacity2) 80%);
  border-radius: 16px;
  max-width: 100%;
  width: 16rem;
}


.games {
  width: fit-content;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  --kaj: 1;
  perspective: 50rem;
  gap: 1em 0;
  max-width: 75vw;
  flex-grow: 1;
}
.games > a {
  text-decoration: none;
  font-size: 1.5em;
  line-height: 1.1;
  transform: skewY(calc(var(--kaj) * 1deg)); 
  transition: 0.15s ease;
  display: inline-block;
  background: var(--color-accent-opacity);
  width: max-content;
  color: var(--color-accent);
  padding: 0.5em 0.75em 3.5em;
  border: none;
  font-weight: bold;
  background-image: linear-gradient(var(--color-accent-opacity) 0%, #0000 80%);
  text-align: center;
  flex: 1;
  width: 100%;
  background-color: var(--color-bg);
  transform: rotatex(5deg) rotatey(calc(30deg * var(--kaj) )) rotateZ(calc( -5deg * var(--kaj) ));
  border-radius: 8px;
  transform-origin: bottom left;
  margin-bottom: -3em;
  box-shadow: -24px -24px 24px -16px #0004;
  color: var(--color-link);
}

.games > a:nth-child(2n) {
  --kaj: -1;
  transform-origin: bottom right;
  --color-accent-opacity: var(--color-accent-opacity2);
}

html {
  font-size: calc(1rem + 1vw);
}
body {
  margin: auto;
  background: var(--color-bg);
  color: var(--color-txt);
  text-align: center;
  /*! perspective: 100em; */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}


/*@media (prefers-color-scheme: dark) {*/
  body {
    --color-bg: #07080a;
    --color-txt: #e0e4e8;
    --color-title: #e0e4e8;
  }
  .card{
    background: #0f1012;
  }

/*
}
*/

footer {
  margin: 5rem auto 1rem;
  padding: .5em;
  background: linear-gradient(var(--color-accent-opacity2),#0000 75%);
  border-radius: 16px;
}
footer a {
  text-decoration: none;
  font-weight: bold;
  color: var(--color-accent);
  font-size: 1.25em;
}