/* Add styles here */

.platform-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border: 1px dashed #fd7e7e; /* Example placeholder style */
}

body {
  background-image: url('data:image/svg+xml;utf8,<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="18" stroke="%23FDB9B9" stroke-width="3" stroke-dasharray="5 10"/><rect x="70" y="10" width="30" height="30" rx="6" stroke="%23FD7E7E" stroke-width="2" stroke-dasharray="4 8"/><ellipse cx="50" cy="90" rx="25" ry="12" stroke="%23FDDADA" stroke-width="2" stroke-dasharray="3 7"/><path d="M90 60 C100 55, 110 75, 100 75" stroke="%23FEEBEB" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 8"/></svg>');
  background-repeat: repeat;
  background-size: 120px 120px;
}

.logo {
  text-shadow: 3px 3px 0 rgba(253, 126, 126, 0.7);
  transition: color 0.3s ease;
}

.search-input:focus {
  box-shadow: 0 0 10px #fd7e7eaa;
}

.detail-modal-bg {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.detail-modal-bg.visible {
  opacity: 1;
  visibility: visible;
}

.detail-modal-dialog {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.detail-modal-bg.visible .detail-modal-dialog {
  transform: scale(1);
}