style.scss

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

    &.clean {
        background:url('./images/bg-new.jpg');
    }
}

a {
    color:#fff;
    font-weight:400;
    text-decoration:none;

    &: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;
    transition:background-color 0.2s;

    &:hover {
      color:#000;
    }

    &.sent {
        color:black;
    }
}

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

.header {
    padding:15px 0;
    position:relative;
    z-index:1;

    >.container {
        display:flex;
        align-items:center;

        div {
            flex:1;
        }
    }

    .btn {
        text-align:center;
    }
}

img {
    max-width:100%;
}

.polluter {
    display:flex;
    align-items:center;
    justify-content: space-around;
    position:absolute;
    width:100%;
    top:50%;
    transform:translateY(-50%);
    flex-wrap:wrap;

    &__button {
        max-width:320px;
        padding:15px;

        &.sent {
            background:black;
        }

        .btn {
            &:hover {
                background-color:red;
            }
            &.polluting {
                background-color:red;
            }
        }

        
    }

    pre {
        position:relative;
        margin-left:50%;
        transform:translateX(-50%);
        flex:0 0 500px;
    }

    &__spin {
        animation-name: spin;
        animation-duration: 5000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        max-width:200px;
    }
}

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