#container.closed
  header#toggle
    .header
    .title Mint Julip
  
  article
    ul.ingredients
      li 
        .amount 50ml
        .ingredient Rum
      li 
        .amount 2tsp
        .ingredient Sugar
      li 
        .amount 4 sprigs
        .ingredient Mint
      li 
        .amount dash
        .ingredient Soda water (optional)
    .preperation 
      div Add the mint sprigs, caster sugar and a couple of tablespoons of crushed ice. 
      div Begin 'massaging' the mix together with a spoon. The caster sugar helps to bring out the flavour of the mint. Breaking or crushing the mint makes the taste sour, hence the need to gently fold and stir. 
      div Add 25ml of rum, more crushed ice and continue 'massaging'. Fill with ice, pour in the second 25ml shot of rum and add a dash of soda, if desired.

*, *:before, *:after {
  box-sizing: border-box;
  transition: all 0.5s ease;
}

body {
  background: linear-gradient(to left, #FF5F6D , #FFC371);
  font-family: sans-serif;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

#container {
  width: 100%;
  max-width: 400px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#container.closed header { cursor: pointer; }
header { cursor: pointer; }

.header {
  width: 100%;
  height: 250px;
  background: center / cover;
  background-image: url(https://3.bp.blogspot.com/-v7vHC8w2AKs/TbbD-X8BhTI/AAAAAAAAAJ4/LCcrwIaMgf0/s1600/Mint+Julep+glass+tools.jpg);
}

.title {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 0px;
}

#container.closed .title {
  padding: 40px 20px 10px 20px;
  margin-top: -87px;
  color: white;
  border: none;
}

.title:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  opacity: 0;
}

#container.closed .title:before {
  opacity: 1;
}

article {
  padding: 25px 30px;
  overflow: hidden;
  max-height: 400px;
} 

#container.closed article {
  max-height: 0px;
  padding: 0 30px;
}

.ingredients {
  margin: 0px;
  padding: 0px;
  margin-bottom: 20px;
  padding-left: 4px;
  font-size: 0.9rem;
}

.ingredients > li {
  list-style-type: none;
  display: flex;
  margin: 4px 0px;
}

.ingredients > li > .amount {
  width: 80px;
  color: #1976D2;
}

.preperation > div {
  margin-bottom: 10px;
}

function byID(id) {
  return document.getElementById(id);
}

byID("toggle").onclick = function() {
  if (byID("container").classList.contains("closed")) {
    byID("container").classList.remove("closed");
  } else {
    byID("container").classList.add("closed");
  }
}