* {
    box-sizing:border-box
}

body {
    font-family: "Benton Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", helvetica, arial, sans-serif;

}

h1 {
    font-weight: 700;
    color:#373fff
}

.bold {
    font-weight:700
}

p {
    max-width:600px
}

form {
    margin-bottom: 25px;
    padding: 15px;
    display: inline-block;
    width: 100%;
    max-width: 340px;
    border-radius:3px
}

input {
    display: block;
    padding: 5px;
    width: 100%;
    font-size:16px
}

button {
    font-weight: bold;
    transition: .5s;
    border: 1px solid #cfcfe1 !important;
    padding: 2% 4%;
    cursor:pointer;
    background-color: #fff;
    border-radius: 5px;
    color: #373fff;
}

button:hover {
    color: #fff;
    background-color: #373fff;
    transition: .5s;
    border: 2px solid #fff !important;
}

button:active {
    box-shadow:none
}

li {
    margin-bottom:5px
}


footer > a {
    color:#bbb
}

.nicejob {
    text-decoration:line-through
}

.add-to-slack {
    background-color: #25e1a5;
    padding: 2em;
    border-radius: .3em;
}

.add-to-slack h1 {
    color: #fff;
    background: url(https://glitch.com/slack-icon.png) no-repeat;
    padding: 0 0 0 3em;
    line-height: 2.5em;
    margin:0
}

.add-to-slack h2 {
    font-weight: 400;
    margin:.5em 0
}

.slack-support {
    padding:0 2em
}

.add-to-slack h2, .add-to-slack p, .slack-support h4, .slack-support p {
    max-width: 700px;
    line-height:1.5em
}

.slack-flag {
    padding: 1em;
    color: #fff;
    max-width: 100%;
    background-color:#454bfb
}

.slack-flag.error {
    background-color: #fd696f
}