:root {
  --primary: #282828;
  --primary-text: #eeeeee;
  --secondary: #2f71db;
  --secondary-text: #ffffff;
  --accent: #e4aa4e;
  --accent-text: #eccf8f;
}

.icon {
  vertical-align: middle;
}
.icon:hover {
  color: #2f71db;
}

#header-container {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;

  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

#logo {
  flex-grow: 0;
  padding-bottom: 10px;
}
#mower {
  flex-grow: 1;
  min-width: 200px;
}

#lawn-mower-slider:hover {
  bottom: 2em;
  -webkit-transition: 1s bottom, 1s 1s left cubic-bezier(0, 1, 1, 1);
  -moz-transition: 1s bottom, 1s 1s left cubic-bezier(0, 1, 1, 1);
  -o-transition: 1s bottom, 1s 1s left cubic-bezier(0, 1, 1, 1);
  transition: 1s bottom, 1s 1s left cubic-bezier(0, 1, 1, 1);
}

#lawn-mower-slider {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 100px;

  -webkit-transition: 1s 1s bottom, 1s left cubic-bezier(1, 0, 1, 1);
  -moz-transition: 1s 1s bottom, 1s left cubic-bezier(1, 0, 1, 1);
  -o-transition: 1s 1s bottom, 1s left cubic-bezier(1, 0, 1, 1);
  transition: 1s 1s bottom, 1s left cubic-bezier(1, 0, 1, 1);
  animation: left-to-right 10s ease-in-out infinite;
}

#lawn-mower-wrapper {
  position: relative;
  height: 120px;
  text-align: center;
  width: 100%;
}

/* https://stackoverflow.com/questions/50802681/how-to-pass-props-to-keyframes-in-styled-component-with-react */
@keyframes left-to-right {
  0% {
    left: 0;
    transform: scaleX(-1);
  }
  40% {
    left: calc(100% - 200px);
    transform: scaleX(-1);
    transform-origin: top right;
  }
  50% {
    left: calc(100% - 200px);
    transform-origin: top right;
    transform: scaleX(1);
  }
  90% {
    left: 0;
    transform: scaleX(1);
    transform-origin: top 50px;
  }
  100% {
    left: 0;
    transform: scaleX(-1);
    transform-origin: top 50px;
  }
}

#minting-icon {
  animation: minting 5s linear infinite;
}

@keyframes minting {
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-20deg);
  }
}