@charset "utf-8";

.rectangles-container {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  justify-self: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
}

.rounded-rectangle {
  width: 400px;
  height: 350px;
  background-color: #34495E;
  border-radius: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  margin: 20px 10px 0 10px;
}

.rounded-rectangle.hidden {
  display: none;
}

.text {
  color: #fff;
  font-size: medium;
  text-align: center;
  border-radius: inherit;
  margin-top: 230px;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
}

.image-container {
  width: 380px;
  height: 220px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  top: 8px;
}

.game-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.button {
  display: block;
  color: black;
  background-color: #ffcb30;
  padding: 10px 18px 10px 18px;
  text-align: center;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
  cursor: pointer;
}

.button-edit {
  display: block;
  color: black;
  background-color: #ffcb30;
  padding: 10px;
  text-align: center;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
  cursor: pointer;
  margin-right: 10px;
}

.button:hover {
  background-color: #EDA200
}

.Primebutton {
  display: block;
  color: black;
  background-color: #c258ff;
  padding: 10px 18px 10px 18px;
  text-align: center;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
}

.Primebutton:hover {
  background-color: #ab1aff;
  cursor: pointer;
}

@media only screen and (max-width: 500px) {
  .rectangles-container {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    min-width: 420px;
  }
}

.PSbutton {
  display: block;
  color: rgb(0, 0, 0);
  background-color: #56aeff;
  padding: 10px 18px 10px 18px;
  text-align: center;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
}

.PSbutton-edit {
  display: block;
  color: black;
  background-color: #56aeff;
  padding: 10px;
  text-align: center;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
  cursor: pointer;
  margin-right: 10px;
}

.PSbutton:hover {
  background-color: #0095eb;
  cursor: pointer;
}

.button-info {
  display: block;
  color: black;
  background-color: #ffcb30;
  padding: 10px;
  text-align: center;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
  cursor: pointer;
  margin-left: 10px;
}

.button-info:hover {
  background-color: #EDA200;
}

.button-edit:hover {
  background-color: #EDA200;
}

.game-buttons {
  display: flex;
}

.primebutton-info {
  display: block;
  color: black;
  background-color: #c258ff;
  padding: 10px;
  text-align: center;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
  cursor: pointer;
  margin-left: 10px;
}

.primebutton-info:hover {
  background-color: #ab1aff;
}

.primebutton-edit {
  display: block;
  color: black;
  background-color: #c258ff;
  padding: 10px;
  text-align: center;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
  cursor: pointer;
  margin-right: 10px;
}

.primebutton-edit:hover {
  background-color: #ab1aff;
}

.PSbutton-info {
  display: block;
  color: black;
  background-color: #56aeff;
  padding: 10px;
  text-align: center;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease;
  font-family: Inter, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
  cursor: pointer;
  margin-left: 10px;
}

.PSbutton-info:hover {
  background-color: #0095eb;
}

.PSbutton-edit:hover {
  background-color: #0095eb;
}

.selected {
  outline: #ffcb30 4px solid
}

.rounded-rectangle[data-platform="epic"] {
  --platform-bg: url("/images/epicBG.png");
  background-image: var(--platform-bg);
  background-position: bottom left;
  background-repeat: no-repeat;
}

.rounded-rectangle[data-platform="steam"] {
  --platform-bg: url("/images/steamBG.png");
  background-image: var(--platform-bg);
  background-position: bottom left;
  background-repeat: no-repeat;
}

.rounded-rectangle[data-platform="gx"] {
  --platform-bg: url("/images/gxBG.png");
  background-image: var(--platform-bg);
  background-position: bottom left;
  background-repeat: no-repeat;
}

.rounded-rectangle[data-platform="prime"] {
  --platform-bg: url("/images/twitchBG.png");
  background-image: var(--platform-bg);
  background-position: bottom left;
  background-repeat: no-repeat;
}

.rounded-rectangle[data-platform="ps"] {
  --platform-bg: url("/images/psBG.png");
  background-image: var(--platform-bg);
  background-position: bottom left;
  background-repeat: no-repeat;
}

.rounded-rectangle.scraped {
  background-image: 
    repeating-linear-gradient(
      135deg,
      rgba(68, 68, 68, 0.6) 0,
      rgba(68, 68, 68, 0.6) 10px,
      rgba(51, 51, 51, 0.6) 10px,
      rgba(51, 51, 51, 0.6) 20px
    ),
    var(--platform-bg) !important;

  background-position: top left, bottom left;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;

  color: white;
  position: relative;
}