$dark: #231f20;
$chocolate: #3a1d07;
$whiteChocolate: #cdb694;
$espresso: #643718;
$liquor: #fd862b;
$honey: #ffb700;
$vanillaSugar: #ffb982;
$steamedMilk: #ffd6b0;
$milkfoam: #ffeeca;
$whippedCream: #ffeeca;
$white: #ffffff;
$water: #b0dfe1;

$sans: "Montserrat", sans-serif;

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

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

.container {
  width: 80%;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px;
}

.item {
  position: relative;
}

.cup {
  background: $dark;
  border: 2px solid $white;
  position: absolute;
}

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

.cup-tall {
  width: 55px;
  height: 40px;
  border-radius: 0 0 5rem 5rem;
  margin: 30px;
}

.cup-grande {
  width: 70px;
  height: 50px;
  border-radius: 0 0 5rem 5rem;
  margin: 23px;
}

.espresso {
  background: linear-gradient(to bottom, $dark 60%, $espresso 60%);
}
.doppio {
  background: linear-gradient(to bottom, $dark 35%, $espresso 35%);
}
.lungo {
  background: linear-gradient(
    to bottom,
    $dark 20%,
    $water 20%,
    $water 60%,
    $espresso 60%
  );
}
.ristretto {
  background: linear-gradient(to bottom, $dark 70%, $espresso 70%);
}
.macchiato {
  background: linear-gradient(
    to bottom,
    $dark 20%,
    $milkfoam 20%,
    $milkfoam 60%,
    $espresso 60%
  );
}
.corretto {
  background: linear-gradient(
    to bottom,
    $dark 30%,
    $liquor 30%,
    $liquor 60%,
    $espresso 60%
  );
}
.conpanna {
  background: linear-gradient(
    to bottom,
    $dark 5%,
    $whippedCream 5%,
    $whippedCream 60%,
    $espresso 60%
  );
}
.romano {
  background: linear-gradient(to bottom, $dark 50%, $espresso 50%);
}

.cappuccino {
  background: linear-gradient(
    to bottom,
    $milkfoam 25%,
    $steamedMilk 25%,
    $steamedMilk 50%,
    $espresso 50%
  );
}
.americano {
  background: linear-gradient(
    to bottom,
    $dark 10%,
    $water 10%,
    $water 65%,
    $espresso 65%
  );
}
.cafelatte {
  background: linear-gradient(
    to bottom,
    $milkfoam 25%,
    $steamedMilk 25%,
    $steamedMilk 65%,
    $espresso 65%
  );
}
.flatwhite {
  background: linear-gradient(to bottom, $steamedMilk 65%, $espresso 65%);
}
.marocchino {
  background: linear-gradient(
    to bottom,
    $milkfoam 25%,
    $chocolate 25%,
    $chocolate 65%,
    $espresso 65%
  );
}
.mocha {
  background: linear-gradient(
    to bottom,
    $whippedCream 20%,
    $steamedMilk 20%,
    $steamedMilk 40%,
    $chocolate 40%,
    $chocolate 65%,
    $espresso 65%
  );
}
.bicerin {
  background: linear-gradient(
    to bottom,
    $whippedCream 20%,
    $whiteChocolate 20%,
    $whiteChocolate 40%,
    $chocolate 40%,
    $chocolate 65%,
    $espresso 65%
  );
}
.breve {
  background: linear-gradient(
    to bottom,
    $dark 5%,
    $milkfoam 5%,
    $milkfoam 35%,
    $steamedMilk 35%,
    $steamedMilk 65%,
    $espresso 65%
  );
}
.rafcoffee {
  background: linear-gradient(
    to bottom,
    $dark 5%,
    $milkfoam 5%,
    $milkfoam 35%,
    $vanillaSugar 35%,
    $vanillaSugar 65%,
    $espresso 65%
  );
}
.meadraf {
  background: linear-gradient(
    to bottom,
    $dark 5%,
    $milkfoam 5%,
    $milkfoam 35%,
    $honey 35%,
    $honey 65%,
    $espresso 65%
  );
}
.viennacoffee {
  background: linear-gradient(to bottom, $whippedCream 45%, $espresso 45%);
}
.chocolatemilk {
  background: linear-gradient(to bottom, $steamedMilk 45%, $espresso 45%);
}

.info {
  margin-left: 150px;
  margin-top: 35px;
}

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

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