.main-container
  .menu
  .wallet-amount
    .qr-code
    h3 Wallet
    p.total dec="31" 9238
    p.increment 170.25 (22.1%)
    button.action-btn
    svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"
      path.wave d="M0,128L24,117.3C48,107,96,85,144,117.3C192,149,240,235,288,224C336,213,384,107,432,101.3C480,96,528,192,576,224C624,256,672,224,720,197.3C768,171,816,149,864,133.3C912,117,960,107,1008,101.3C1056,96,1104,96,1152,128C1200,160,1248,224,1296,240C1344,256,1392,224,1416,208L1440,192L1440,320L1416,320C1392,320,1344,320,1296,320C1248,320,1200,320,1152,320C1104,320,1056,320,1008,320C960,320,912,320,864,320C816,320,768,320,720,320C672,320,624,320,576,320C528,320,480,320,432,320C384,320,336,320,288,320C240,320,192,320,144,320C96,320,48,320,24,320L0,320Z"
  .wallet-details
    h2 My Wallet
    p.amount 4,9326.44 (22.1%)
    button.add-coin Add Coin
  .cryptos
    - [{:crypto => 'BTC', :value => '2,463.4', :amount => 0.382},
       {:crypto => 'ETH', :value => '1,477.8', :amount => 4.879},
       {:crypto => 'XRP', :value => '985.29',  :amount => 1037.15},
       {:crypto => 'BQX', :value => '1,723.5', :amount => 40.31}].map do |item|
       div class="#{item[:crypto]}"
         h4 #{item[:crypto]}
         p.value #{item[:value]}
         p.amount #{item[:amount]}

// TODO: Improve all this shit

:root {
  --mobile-width: 370px;
  --mobile-height: 650px;
}

body {
  height: 100vh;
  padding: 10px;
  background-image: linear-gradient(to bottom right, #848faf, #515b7e);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  
  .main-container {
    position: relative;
    width: var(--mobile-width);
    height: var(--mobile-height);
    background: #3f496c;
    font-family: "Poppins";
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    
    .menu {
      position: absolute;
      top: 40px; left: 35px;
      width: 20px;
      height: 2px;
      background-color: white;
      border-radius: 1px;
      z-index: 1;
      
      &::before, &::after {
        content: "";
        position: relative;
        display: inline-block;
        background-color: white;
        width: 10px;
        height: 2px;
        border-radius: 1px;
        z-index: 2;
      }
      
      &::before {
        top: -5.5px;
        transform: translatex(50%);
      }
      
      &::after {
        top: -20px;
        transform: translatex(-50%);
      }
    }
    
    .wallet-amount {
      position: relative;
      padding: 30px;
      color: white;
      background-image: linear-gradient(to right, #9f80f4, #f96cab);
      text-align: center;
      border-radius:10px;
      box-shadow: 0 10px 5px -5px rgba(202, 119, 209, .5);
      
      svg {
        position: absolute;
        bottom: 0; right: 0;
        border-radius: 0 0 10px 10px;
        
        .wave {
          fill-opacity: .1;
          margin: 0;
        }
      }
      
      .qr-code {
        position: absolute;
        right: 40px;
        width: 30px;
        height: 30px;
        border: 1px solid white;
      }
      
      h3 {
        margin-bottom: 40px;
        text-transform: uppercase;
        font-size: .5em;
        font-weight: bold;
        letter-spacing: 1px;
      }
      
      .total {
        font-size: 1.8em;
        font-weight: 300;
        line-height: 0;
        
        &::before {
          content: "$";
          font-size: .7em;
        }
        
        &::after {
          content: ". "attr(dec);
          font-size: .7em;
        }
      }
      
      .increment {
        font-size: .8em;
        font-weight: 500;
        line-height: 0;
        
        &::before {
          content: "+";
        }
        
        &::after {
          content: "↑";
        }
      }
      
      .action-btn {
        position: absolute;
        background-color: #fff;
        bottom: 0; right: 30px;
        width: 45px;
        height: 45px;
        border: none;
        border-radius: 50%;
        transform: translatey(50%);
        z-index: 1;
      }
    }
    
    .wallet-details {
      display: grid;
      color: white;
      padding: 3em;
      grid-template-areas:
        "title   title   button"
        "details details button";
      
      h2 {
        grid-area: title;
        font-weight: 300;
        line-height: 0;
      }
      
      .amount {
        grid-area: details;
        color: #BBB;
        font-size: .85em;
        line-height: 0;
        
        &::before {
          content: "$";
        }
        
        &::after {
          content: "↑";
          color: #90e69d;
        }
      }
      
      .add-coin {
        grid-area: button;
        color: #82c4ea;
        background-color: transparent;
        text-transform: uppercase;
        font-size: .75em;
        font-weight: 600;
        border: none;
        
        &::after {
          content: "";
          padding: 5px 15px;
          background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABmJLR0QA/wD/AP+gvaeTAAABYklEQVQokaWQvyuEcRzHX5+v5851ZfDjMCklA6ssR7rRKHUYLAajskmOJ6UMlJj8ATYTIiWUxGBjoyySH9edK8qde74fk3P39JzFe3p/P9/3q88P+Iek/OGe3EeME51AZEBEPatyqF+xLTchxT/hpcvnFq/IMUiXL3Nqvz4G3UT7px82P8YrynoAaIE7p7ausWpn9+oxaj6dNyBU9qcKYxFkv6BMKtqmyNFCf2y3orNTCNf7QETYrjP5nTxcqOgKwpSI7iyevcxVwJ0PjU+gmXJYre69a3gYtNs36+zmlYZKcDIpHshqZcZkQBoCVo1kyUZLMICNx5aBNcADsGJ7pcgB4L/y0UxPQ64CdkXsfF/ztK3xOhAdx3CeGmi+FWUIuAZyKNs1jo7/ThegxfPXUVQ3QF+s6Igbb70JypmgIqrrQBNIl1GTCsxUh0mXvJR5n5ygojU2adSkENIhG54Lyvxb3+ZffIj8rNuUAAAAAElFTkSuQmCC") no-repeat center;
        }
      }
    }
    
    .cryptos {
      color: white;
      
      div {
        display: grid;
        margin: 10px 20px;
        background-image: linear-gradient(to right, #7784b0, #384162);
        grid-template-areas:
        "name value"
        "name amount";
        place-items: center;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0,0,0,.3);
        
        h4 {
          grid-area: name;
          margin:0;
        }
        
        .value {
          grid-area: value;
          line-height: 0;
        }
        
        .amount {
          grid-area: amount;
          line-height: 0;
        }
      }
    }
  }
}