function closeLetter() {
	$('.letterBox').hide()
}


function openLetter() {
  $('#letterContents').html(` <p id = "letterContents">
i have nothing to say here yet i guess. pls remind me if this is still empty and you think it's weird. 
  <br><br>
  ada`)
  $('.letterBox').toggle()
}


for(var i=0; i<recipes.length; i++){
  $('<div />', {
    id: recipes[i].name,
    class: 'recipeName',
    click: function(){ window.location.href = 'recipes/' + (this.id) + '.html' }, 
  })
  .html(recipes[i].name.replace(/-/g, ' '))
  .css({left: 35*(recipes[i][xAxis[0]]+10), top: (690-35*(recipes[i][yAxis[0]]+10)) })
  .appendTo($('#canvasCover'))
 }