window.onload = () => {
  var sat = document.querySelector('script[s]').getAttribute('s');
  var r = document.querySelector('script[r]').getAttribute('r');
  var rarity = 'Common', a = '-2.39%', b = '85.75%', c = '116.75%'
  var color = `#808080 ${a},#808080 ${b},#808080 ${c}`
  if (r == '👑') {
    rarity = "Mythic"
    color = `#ffc339 ${a},#ffb200 ${b},#f2a900 ${c}`
  } else if (r == '🌝') {
    rarity = "Legendary"
    color = `#ffe039 ${a},#ffb200 ${b},#ffd700 ${c}`
  } else if (r == '🪻') {
    rarity = "Epic"
    color = `#b060d8 ${a},#9a32cd ${b},#9932cc ${c}`
  } else if (r == '🧿') {
    rarity = "Rare"
    color = `#4d85ea ${a},#4d85ea ${b},#6495ed ${c}`
  } else if (r == '🌱') {
    rarity = "Uncommon"
    color = `#60d860 ${a},#60d860 ${b},#228b22 ${c}`
  }
  document.documentElement.innerHTML = `
  <div class="satmap">
    <style>
    body {
      min-height: 100vh !important;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    } 
    .satmap { 
      width: 100%;
      height: 80vh; 
      border-radius: 6%;
      background: linear-gradient(134deg,${color});
      padding: 8%;
      position: relative; 
      color: #fff !important;
    } 
    .rarity-wrapper {
      display: flex;
      justify-content: end;
    } 
    .rarity-text {
      padding: 3% 6%;
      border-radius: 5%;
      background: rgba(255, 255, 255, 0.25);
      margin-bottom: 0;
      font-family: Inter;
      font-size: 3.5vw;
      font-weight: 600;
    } 
    .number {
      position: absolute;
      font-size: 4vw;
      bottom: 0;
      font-weight: 600;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 5%; 
    }
    </style>
    <div class="rarity-wrapper">
      <p class="rarity-text">${rarity}</p>
    </div>
    <div class="number">
      <h1>${sat}.satmap</h1>
    </div>
  </div>`
}