section
  //- .inner
  .triangle-holder
    .label.performance#PerformanceLabel Performance
    .label.velocity#VelocityLabel Velocity
    .label.adaptability#Adaptability Adaptability
    .triangle#Triangle()
      .dot#Knob()
  //-dl#Coordinates
    dt height
    dd#TriangleHeight
    dt width
    dd#TriangleWidth
    dt X
    dd#CoordinatesX
    dt Y
    dd#CoordinatesY
    dt X%
    dd#CoordinatesXPct
    dt Y%
    dd#CoordinatesYPct

body { background: #212529; }
section { height:100vh; display: flex; align-items:center; justify-content:center; }
.triangle-holder { position:relative;
  .label { position:absolute; font-family: 'Work Sans', sans-serif; font-weight:400; font-size:clamp(16px, 5.35vw, 94px); color:#e01e37; text-transform:lowercase; letter-spacing:0.05em;
    &.performance { top:-1.5em; left:0; right:0; text-align:center; }
    &.velocity { bottom:-1.5em; left:-2em; width:calc(50% + 2em); text-align:left; }
    &.adaptability { bottom:-1.5em; right:-2em; width:calc(50% + 2em); text-align:right; }
  }
}
.triangle { background:rgba(0,0,0,0.5); 
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width:65vw; height:60vh; max-height:50vw; display: flex; align-items:center; justify-content:center; position:relative;
  .dot { top:calc(50% + 5px); left:calc(50% - 25px); background:#c71f37; border-radius:50%; position:absolute; width:50px; height:50px; cursor:move; } 
}

#Coordinates { color:white; font-family: 'Work Sans', sans-serif;
}

dragElement(document.getElementById("Knob"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id)) {
    document.getElementById(elmnt.id).onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    
    
    const triangleHeight = $('#Triangle').height();
    const triangleWidth = $('#Triangle').width();
    const knobWidth = $('#Knob').width();
    
    
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    
    const top = elmnt.offsetTop - pos2;
    const left = elmnt.offsetLeft - pos1;
    
    const topPct = Math.round((top * 100) / triangleHeight);
    const leftPct = Math.round((left * 100) / triangleWidth);
    
    
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    $('#TriangleHeight').text(triangleHeight);
    $('#TriangleWidth').text(triangleHeight);
    $('#CoordinatesX').text(top);
    $('#CoordinatesY').text(left);
    $('#CoordinatesXPct').text(topPct);
    $('#CoordinatesYPct').text(leftPct);
    
    let performanceLabelWeight = (900 - (topPct * 10)) + 200;
    if (performanceLabelWeight < 100) {
      performanceLabelWeight <= 100;
    } else if (performanceLabelWeight >= 900) {
      performanceLabelWeight = 900;
    }
    
    let velocityLabelWeight = Math.round((topPct * 10) / 2);
    if (leftPct <= 50) {
      velocityLabelWeight += 400 - Math.round((leftPct * 10) / 2);
    } else if (leftPct >= 50)  {
      velocityLabelWeight += 400 - (Math.round((leftPct * 10) / 2));
    }
    if (velocityLabelWeight <= 100) {
      velocityLabelWeight = 100;
    } else if (velocityLabelWeight >= 900) {
      velocityLabelWeight = 900;
    }
    
    let AdaptabilityLabelWeight = Math.round((topPct * 10) / 2);
    if (leftPct >= 50) {
      AdaptabilityLabelWeight += Math.round(((leftPct - 50) * 10) / 2) + 100;
    } else if (leftPct <= 50) {
      AdaptabilityLabelWeight -= 250 - Math.round((leftPct * 10) / 2);
    }
    if (AdaptabilityLabelWeight <= 100) {
      AdaptabilityLabelWeight = 100;
    } else if (AdaptabilityLabelWeight >= 900) {
      AdaptabilityLabelWeight = 900;
    }
    
    
    $('#PerformanceLabel').css('font-weight', performanceLabelWeight);
    $('#VelocityLabel').css('font-weight', velocityLabelWeight);
    $('#Adaptability').css('font-weight', AdaptabilityLabelWeight);
    
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}