<% accent_color = HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).biggest %>
<% dark_color = HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.8) %>
<style>
  body {
    background: <%= accent_color %>;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to bottom, white -70%, <%= accent_color %>);
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Roboto", sans-serif;
  }

  .preview-div-wrapper {
    overflow: hidden;
    position: relative;
  }

  .preview-div {
    background: #fff;
    border: 0.25vw solid<%= dark_color %>;
    box-shadow: 0.8vw 1vw 0px <%= dark_color %>;
    width: 94vw;
    height: 45vw;
    margin: 2.25vw auto 5vw;
    overflow: hidden;
    position: relative;
    border-radius: 0.3vw;
    border-top-left-radius: 2.3vw;
    border-top-right-radius: 2.3vw;
  }

  .preview-info-header {
    color: black;
    margin: 2vw 2.5vw 0vw;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, "Roboto", monospace;
    font-size: 3.5vw;
    width: 92%;
    border-bottom: 0.9vw solid <%= accent_color %>;
    width: 40%;
  }

  .title-area {
    position: absolute;
    bottom: 12vw;
    left: 0;
    right: 0;
    top: 9vw;
  }
  h1 {
    color: <%= dark_color %>;
    width: 93%;
    margin: 1vw auto;
    position: absolute;
    padding-left: 3.5%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 1.05em;
  }

  h1 img {
    border-radius: 100vw;
    height: 1.8em;
    width: 1.8em;
    vertical-align: -0.6em;
    border: 0.05em solid <%= accent_color %>;
  }

  .preview-user {
    font-size: 3vw;
    position: absolute;
    color: <%= dark_color %>;
    left: 1.5vw;
    bottom: 1.25vw;
    padding: 0.8vw 2vw;
    padding-left: 0.8vw;
    font-weight: 500;
  }

  .preview-user img {
    border-radius: 100vw;
    height: 4.5vw;
    width: 4.5vw;
    vertical-align: -1.3vw;
    border: 0.25vw solid<%= dark_color %>;
  }

  .badge-images {
    position: absolute;
    bottom: 1.4vw;
    right: 1.5vw;
    text-align: right;
  }

  .badge-images img {
    height: 6vw;
    right: 6vw;
    fill: <%= dark_color %>;
    margin-left: 0.5vw;
    transform: rotate(5deg);
  }
</style>
<div class="preview-div-wrapper">
  <div class="preview-div">
    <div class="title-area">
        <% if @user.name.size < 14 %>
          <% font_size = 8.3 %>
        <% elsif @user.name.size < 20 %>
          <% font_size = 6.4 %>
        <% else %>
          <% font_size = 4.6 %>
        <% end %>
      <h1 style="font-size:<%= font_size %>vw;">
        <img src="<%= ProfileImage.new(@user).get(width: 640) %>" alt="<%= @user.name %> profile image">
        <%= truncate @user.name, length: 32 %>
        <br />
        <span style="font-size: 0.4em;display: inline-block; margin-left: 5.4em; margin-top: -1.7em">@<%= @user.username %></span>
      </h1>
    </div>
    <div class="badge-images">
      <% @tag_badges.each do |badge| %>
        <%# Use a seed in Random so we don't break cache on every render %>
        <% not_so_rand = Random.new(badge.id + @user.id) %>
        <img src="<%= badge.badge_image_url %>" style="transform: rotate(<%= not_so_rand.rand(-6..6) %>deg);" />
      <% end %>
      <img src="https://thepracticaldev.s3.amazonaws.com/i/bh2wmpcltaybu1xsnico.png" />
    </div>
  </div>
</div>
