body {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  background-color: #edf4ff;
}

h1, h2, h3 {
  font-family: 'Cabin', sans-serif;
}

h3 {
  font-size: 1.4em;
}
h4 {
  font-size: 1.2em;
}
h5 {
  font-size: 1em;
}

code {
  color: #659cf3;
  font-size: 1em;
  padding: 0;
  background-color: inherit;
  border-radius: 0;
}

code > span {
  transition: color 250ms ease;
}

code > .input {
  color: #0056a0;
  font-weight: 800;
}

code > .correct {
  color: #228822;
  font-weight: 800;
}

.center {
  text-align: center;
}

.vcenter {
  margin-top: 20%;
  margin-bottom: 1.25em;
  transition: margin 250ms ease;
}
.vcenter.vtop {
  margin-top: 5%;
}
.vmiddle {
  margin-top: 12%;
}

.list-inline > li > code {
  padding-left: 10px;
  padding-right: 10px;
}

ul.ingredients {
  -moz-column-count: 2;
  -moz-column-gap: 15px;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
  column-count: 2;
  column-gap: 10px;
  list-style-position: inside;
  padding-left: 20px;
}
ul.ingredients > li {
  font-size: 0.9em;
}

ul.ingredients-step > li {
  list-style-type: none;
}

.chefBox {
  margin: 10px auto;
  min-height: 200px;
  padding: 10px;
  transition: background-color 250ms ease;
}

.chefBox > h4.chefDesc {
  margin-bottom: 0;
}


/* Transitions */
.fade-enter {
  opacity: 0.01;
  transition: opacity 250ms ease-in;
}
.fade-enter.fade-enter-active {
  opacity: 1;
}

.fade-leave {
  opacity: 1;
  transition: opacity 250ms ease-out;
}
.fade-leave.fade-leave-active {
  opacity: 0;
}

.padLeft {
  padding-left: 1.5em;
}
.padLeft10 {
  padding-left: 0.75em;
}
.padRight10 {
  padding-right: 0.75em;
}
.padTop {
  padding-top: 0.75em;
}

.fireRed {
  color: #ff0500;
}

.lightRed {
  color: #da8280;
}

.darkBlue {
  color: #0056a0;
}

.lightBlue {
  color: #659cf3;
}

.green {
  color: #149614;
}

.goldenBrown {
  color: #f5a018;
}

.failure {
  background-color: #ffbaba;
}

.success {
  background-color: #c1f5b1;
}

.popup {
  position: relative;
  bottom: 20%;
}

.capslock {
  width: 150px;
  margin: 0 auto;
  -webkit-animation: blink 1s ease-out infinite alternate; /* Chrome, Safari, Opera */
      -ms-animation: blink 1s ease-out infinite alternate; /* Internet Explorer */
          animation: blink 1s ease-out infinite alternate;
}

.blink {
  -webkit-animation: blink 0.5s ease-out infinite alternate; /* Chrome, Safari, Opera */
      -ms-animation: blink 0.5s ease-out infinite alternate; /* Internet Explorer */
          animation: blink 0.5s ease-out infinite alternate;
}

.recipeName {
  margin-top: -1.3em;
}

.dot {
  display: inline-block;
  background-color: #eee;
  border: 1px solid #666;
  border-radius: 5px;
  height: 10px;
  width: 10px;
  margin: 0 2px;
}
.dot.active {
  background-color: #0056a0;
}

.locked {
  color: gray;
}

.meal {
  height: 16em;
}

.mealInfo {
  display: inline-block;
  min-width: 200px;
  max-width: 300px;
  margin: 0 50px;
  vertical-align: top;
}

.leaderboard th, .leaderboard td {
  text-align: left;
}
.leaderboard th:last-child, .leaderboard td:last-child {
  text-align: right;
}

.leaderboard.table {
  margin-bottom: 0;
}

.leaderboard.table > thead > tr > th {
  border-bottom: none;
}
.leaderboard.table > tbody > tr > th,
.leaderboard.table > tbody > tr > td {
  border-top: none;
  padding: 1px 8px;
}

.report {
  background-color: #f3f8ff;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 320px;
  margin-left: -200px;
  margin-top: -160px;
  padding: 15px 10px;
  border: 1px solid #659cf3;
  border-radius: 10px;
}

blockquote {
  position: relative;
  max-width: 500px;
  margin: 50px auto 0;
  border-left: none;
}

blockquote:before {
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -30px;
  top: -30px;
}
blockquote:after {
  content: "\201D";
  float: right;
  font-size: 80px;
  position: absolute;
  right: -30px;
  bottom: -20px;
}

blockquote > footer {
  margin-left: 100px;
}

.chefHat {
  position: absolute;
  width: 50px;
  height: 50px;
  margin-left: 15px;
  margin-top: -40px;
      -ms-transform: rotate(-15deg); /* IE-9 */
  -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
          transform: rotate(-15deg);
  -webkit-animation: hatFadeIn 1s; /* Chrome, Safari, Opera */
      -ms-animation: hatFadeIn 1s; /* Internet Explorer */
          animation: hatFadeIn 1s;
}

/* Decrease timer bar animation speed */
.rc-progress-line-path {
  transition: stroke-dashoffset 2s ease,
              stroke 2s ease !important;
}

/* chefHat animations */
@keyframes hatFadeIn {
  from { opacity: 0; margin-top: -80px; }
  to   { opacity: 1; margin-top: -40px; }
}
@-webkit-keyframes hatFadeIn {
  from { opacity: 0; margin-top: -80px; }
  to   { opacity: 1; margin-top: -40px; }
}
@-ms-keyframes hatFadeIn {
  from { opacity: 0; margin-top: -80px; }
  to   { opacity: 1; margin-top: -40px; }
}
@keyframes blink {
  0%   { opacity: 0.2; }
  100% { opacity: 1; }
}
@-webkit-keyframes blink {
  0%   { opacity: 0.2; }
  100% { opacity: 1; }
}
@-ms-keyframes blink {
  0%   { opacity: 0.2; }
  100% { opacity: 1; }
}

/* Phones */
@media screen and (max-width: 768px) {
  body {
    font-size: 12px;
  }
  .vcenter {
    margin-top: 15%;
  }
  .vcenter.vtop {
    margin-top: 8%;
  }
  .padLeft {
    padding-left: 0;
  }
  .padRight {
    padding-right: 0;
  }
}

/* Tablets */
@media screen and (min-width: 769px) and (max-width: 992px) {
  body {
    font-size: 13px;
  }
  .padLeft {
    padding-left: 0.75em;
  }
  .padRight {
    padding-right: 0.75em;
  }
}

/* Small laptops */
@media screen and (min-width: 993px) and (max-width: 1200px) {
  body {
    font-size: 14px;
  }
  .padLeft {
    padding-left: 0.75em;
  }
  .padRight {
    padding-right: 0.75em;
  }
}

/* Large laptops */
@media screen and (min-width: 1201px) {
  body {
    font-size: 15px;
  }
  .chefBox {
    padding: 10px 20px;
  }
  .chefBox > h4.chefDesc {
    margin-bottom: 5px;
  }
  .recipeName {
    margin-top: -1.6em;
  }
  ul.ingredients > li {
    font-size: 1em;
  }
}