style.css

body {
  font-family: "IBM Plex Mono";
  color: #fff;
  margin: 0;
  background: url("./images/bg.jpeg");
  background-size: cover;
  background-position: center; }
  body.clean {
    background: url("./images/bg-new.jpg"); }

a {
  color: #fff;
  font-weight: 400;
  text-decoration: none; }
  a:hover {
    color: #32ca76; }

.btn {
  color: #000;
  background-color: #32ca76;
  border-radius: 2px;
  border: 2px solid #000;
  text-transform: uppercase;
  font-size: 1.2rem;
  padding: 12px 20px;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s; }
  .btn:hover {
    color: #000; }
  .btn.sent {
    color: black; }

.container {
  max-width: 1280px;
  margin: 0 auto; }

.header {
  padding: 15px 0;
  position: relative;
  z-index: 1; }
  .header > .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .header > .container div {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1; }
  .header .btn {
    text-align: center; }

img {
  max-width: 100%; }

.polluter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .polluter__button {
    max-width: 320px;
    padding: 15px; }
    .polluter__button.sent {
      background: black; }
    .polluter__button .btn:hover {
      background-color: red; }
    .polluter__button .btn.polluting {
      background-color: red; }
  .polluter pre {
    position: relative;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 500px;
    flex: 0 0 500px; }
  .polluter__spin {
    -webkit-animation-name: spin;
    animation-name: spin;
    -webkit-animation-duration: 5000ms;
    animation-duration: 5000ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    max-width: 200px; }

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }