@import url('https://fonts.googleapis.com/css?family=Lato|Lora');

$dark: #252C32;
$brown: #5B4644;
$coffee: #87624F;
$tan: #DAB7A3;
$white: #F4E8DA;
$water: #859FB5;

$sans: 'Lato', sans-serif;
$serif: 'Lora', serif;

html {
  display: grid;
  min-height: 100%;
}

body {
  background: $dark;
  display: grid;
  font-family: $sans;
  text-transform: uppercase;
}

h3 {
  font-size: 0.8em;
  letter-spacing: 1px;
  font-weight: 100;
}

.container {
  position: relative;
  margin: auto;
  overflow: hidden;
  width: 500px;
  height: 700px;
}

.bar {
  position: absolute;
  height: 85%;
  width: 2px;
  left: 7%;
  top: 7.5%;
  background: $white;
}

.circle {
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  left: -5px;
  border: 1px solid $white;
  box-shadow: 0px 0px 7px rgba($white, 100%);
}

.top {
  background: $brown;
  top: -1%;
}
.middle {
  background: $coffee;
  top: 38%;
}
.bottom {
  background: $tan;
  bottom: -1%;
}

.bold {
  color: $coffee;
  position: absolute;
  top: -7%;
  left: -17px;
}

.creamy {
  color: $tan;
  position: absolute;
  bottom: -7%;
  left: -27px;
}

.info {
  width: 55%;
  height: 100%;
  position: absolute;
  left: 43%;
}

//coffee cup drawings

.coffee-cups {
  width: 40%;
  height: 100%;
  position: absolute;
  left: 10%;
  top: 3%;
}

.handle {
  position: absolute;
  height: 20px;
  width: 15px;
  background: transparent;
  border-radius: 50% 30%;
  left: 95%;
  top: 10%;
  z-index: -1;
  border: 2px solid $white;
}

.cup {
  position: absolute;
  width: 70px;
  height: 55px;
  background: $dark;
  border: 2px solid $white;
  border-radius: 0 0 5rem 5rem;
  left: 20%;
}

.cup-small {
  position: absolute;
  width: 55px;
  height: 40px;
  background: $dark;
  border: 2px solid $white;
  border-radius: 0 0 5rem 5rem;
  left: 23%;
}

.cup-long {
  position: absolute;
  width: 60px;
  height: 70px;
  background: $dark;
  border: 2px solid $white;
  border-radius: 10% 10% 50% 50%;
  left: 22%;
}

.doppio {
  top: 5%;
  background: linear-gradient(to bottom, $dark 40%, $brown 40%, $coffee 70%);
}

.americano {
  top: 18.5%;
  background: linear-gradient(to bottom, $dark 13%, $water 13%, $water 50%, $coffee 50%);
}

.macchiato {
  top: 35%;
   background: linear-gradient(to bottom, $dark 20%, $white 20%, $white 40%, $coffee 40%);
}

.flatwhite {
  top: 50%;
  background: linear-gradient(to bottom, $dark 10%, $white 10%, $tan 60%, $coffee 65%, $brown 90%);
}

.cappuccino {
  top: 64%;
  background: linear-gradient(to bottom, $white 50%, $tan 50%, $tan 55%, $coffee 60%);
}

.latte {
  top: 81%;
  background: linear-gradient(to bottom, $dark 5%, $white 5%, $white 30%, $tan 30%, $tan 70%, $coffee 70%);
}

//description
h1 {
  color: $white;
  font-size: 1em;
  letter-spacing: 3px;
}

p {
  color: $white;
  font-family: $serif;
  text-transform: none;
  font-size: 0.7em;
  letter-spacing: 0.5px;
  margin-top: -5px;
}

.first, .second, .third, .fourth, .fifth, .sixth {
  position: absolute;
}

.first {
  top: 7%;
}

.second {
  top: 21%;
}

.third {
  top: 36%;
}

.fourth {
  top: 52%;
}

.fifth {
  top: 65%;
}

.sixth {
  top: 83%;
}


// key for the colors
.small {
  margin-left: 20px;
  margin-top: -1px;
  font-family: $sans;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.key {
  position: relative;
  margin: auto;
  width: 500px;
  height: 200px;
}

.espresso {
  background: $brown;
  position: absolute;
  left: 17%;
}

.milk {
  background: $tan;
  position: absolute;
  left: 40%;
}

.foam {
  background: $white;
  position: absolute;
  left: 63%;
}

.water {
  background: $water;
  position: absolute;
  left: 83%;
}

footer {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 1em;
  text-transform: uppercase;
  padding: 10px;
  color: #EA7996;
  p {
    text-transform: uppercase;
    color: $tan;
    font-family: $sans;
    letter-spacing: 3px;
  }
  a {
    font-family: $sans;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    &:hover {
      color: $water;
    }
  }
}