@font-face {
    font-family: Cooper Hewitt;
    font-style: normal;
    font-display: swap;
    font-weight: 100;
    src:  local("Cooper Hewitt Thin normal"),
         local("Cooper Hewitt-Thinnormal"),
         url(fonts/cooper-hewitt-100-f992a013bd6d6d32d83a64d4414a067c.woff2) format("woff2"),
         url(fonts/cooper-hewitt-100-b66ba4e713fe050d824127a0c5c94d8b.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: italic;
    font-display: swap;
    font-weight: 100;
    src: local("Cooper Hewitt Thin italic"),
         local("Cooper Hewitt-Thinitalic"),
         url(fonts/cooper-hewitt-100italic-72bf7c5c682b14f96a184df57b52501f.woff2) format("woff2"),
         url(fonts/cooper-hewitt-100italic-5610d3d06a0d3350815f78e63ce2562a.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: local("Cooper Hewitt Light normal"),
         local("Cooper Hewitt-Lightnormal"),
         url(fonts/cooper-hewitt-300-ad115fa995f960312f9dd06d2f888ab3.woff2) format("woff2"),
         url(fonts/cooper-hewitt-300-1615d89dec6e1d397cc3fec15994b141.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: italic;
    font-display: swap;
    font-weight: 300;
    src: local("Cooper Hewitt Light italic"),
         local("Cooper Hewitt-Lightitalic"),
         url(fonts/cooper-hewitt-300italic-eda221dddbfc6975bc16446c599aba59.woff2) format("woff2"),
         url(fonts/cooper-hewitt-300italic-977f832c81f0c2923b19d28d050190e4.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local("Cooper Hewitt Regular normal"),
         local("Cooper Hewitt-Regularnormal"),
         url(fonts/cooper-hewitt-400-4a9b97676ded344a2d0a2cbc9a20cab4.woff2) format("woff2"),
         url(fonts/cooper-hewitt-400-649d0315403943c1e2faa9acb4b55b93.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src: local("Cooper Hewitt Regular italic"),
         local("Cooper Hewitt-Regularitalic"),
         url(fonts/cooper-hewitt-400italic-152f5ad3e5a7c86ad33e23f62692c250.woff2) format("woff2"),
         url(fonts/cooper-hewitt-400italic-fd3ffccd81360b020f51e2e6d53df6b6.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: local("Cooper Hewitt Medium normal"),
         local("Cooper Hewitt-Mediumnormal"),
         url(fonts/cooper-hewitt-500-10008f93875ffb126a90cda537e3ff47.woff2) format("woff2"),
         url(fonts/cooper-hewitt-500-7b36c03784683ab733ff3b40551c2d87.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: italic;
    font-display: swap;
    font-weight: 500;
    src: local("Cooper Hewitt Medium italic"),
         local("Cooper Hewitt-Mediumitalic"),
         url(fonts/cooper-hewitt-500italic-f7578365d0bdadcf61c2a893932e375a.woff2) format("woff2"),
         url(fonts/cooper-hewitt-500italic-bbbf7fa73ac149842394500427e9b6b1.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: local("Cooper Hewitt SemiBold normal"),
         local("Cooper Hewitt-SemiBoldnormal"),
         url(fonts/cooper-hewitt-600-11576fe5a64c71806b03481120dff0c1.woff2) format("woff2"),
         url(fonts/cooper-hewitt-600-450383bde84c63c1369ce8a55bf34e96.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: italic;
    font-display: swap;
    font-weight: 600;
    src: local("Cooper Hewitt SemiBold italic"),
         local("Cooper Hewitt-SemiBolditalic"),
         url(fonts/cooper-hewitt-600italic-b744d96a2c2b92beb1bf696451b1cbea.woff2) format("woff2"),
         url(fonts/cooper-hewitt-600italic-662f530796787be59c4fa365ff8b3183.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: local("Cooper Hewitt Bold normal"),
         local("Cooper Hewitt-Boldnormal"),
         url(fonts/cooper-hewitt-700-3458d021a841edc16486ac4cefd60f03.woff2) format("woff2"),
         url(fonts/cooper-hewitt-700-77ffbbeefee131338d0c7fa14535b1d2.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: italic;
    font-display: swap;
    font-weight: 700;
    src: local("Cooper Hewitt Bold italic"),
         local("Cooper Hewitt-Bolditalic"),
         url(fonts/cooper-hewitt-700italic-c07c319fad4f6e86358a22575c6fc4a4.woff2) format("woff2"),
         url(fonts/cooper-hewitt-700italic-69b8e809f6d30da0987d9d87f4c7de9c.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: normal;
    font-display: swap;
    font-weight: 800;
    src: local("Cooper Hewitt ExtraBold normal"),
         local("Cooper Hewitt-ExtraBoldnormal"),
         url(fonts/cooper-hewitt-800-de5606e6eb12fefbf81b478f6692dbc3.woff2) format("woff2"),
         url(fonts/cooper-hewitt-800-a09b81e71f4c33092e1b5010a24cf8f2.woff) format("woff")
}

@font-face{
    font-family: Cooper Hewitt;
    font-style: italic;
    font-display: swap;
    font-weight: 800;
    src: local("Cooper Hewitt ExtraBold italic"),
         local("Cooper Hewitt-ExtraBolditalic"),
         url(fonts/cooper-hewitt-800italic-a7a6056a2abec3b4efd026e3fdddc094.woff2) format("woff2"),
         url(fonts/cooper-hewitt-800italic-67d9d39872e9a41d8fd01146fe1b6bfa.woff) format("woff")
}

body {
    background-color: #000;
    color: #fff;
}

* {
    box-sizing: border-box;
    font-family: 'Cooper Hewitt', sans-serif;
    font-size: 18px;
}

::placeholder {
    font-weight: 400;
    text-transform: none;
    color: #fff;
    opacity: 1;
}

.rf {
    margin: 32px auto 0;
    max-width: 1200px;
    padding: 0 20px 4rem;
    width: 100%;
}

.rf_logo {
    display: block;
    margin: 0 auto 32px;
    max-width: 600px;
    width: 100%;
}

.rf_form {
    display: grid;
    font-size: 2rem;
    grid-gap: 32px;
    grid-template-columns: 80% auto;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.rf_form input {
    height: 2rem;
    line-height: 2rem;
    border: 0;
    border-bottom: 1px solid #fff;
    padding: .5rem 0;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Cooper Hewitt', sans-serif;
}

.rf_form button {
    background-color: #1db954;
    font-weight: bold;
    color: #fff;
    border: 0;
    text-transform: uppercase;
    cursor: pointer;
}

.rf_result {
    border-bottom: 1px solid #444;
    display: grid;
    grid-template-columns: auto 35% 100px;
    grid-gap: 0.5rem;
    padding: 0.5rem 0;
    margin: 0;
}

.rf_result:last-of-type {
    border-bottom: 0;
}

.rf_result__title {
    text-transform: uppercase;
}

.rf_result__artists {
    font-weight: 400;
}

.rf_result__artist::after {
    content: ', ';
}

.rf_result__artist:last-of-type::after {
    display: none;
}

.rf_connected {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #444;
    text-align: center;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: bold;
    margin: 0;
    padding: 1rem 0;
}

.rf_result__options {
    text-align: right;
    padding-right: .5rem;
}

.rf_result__add {
    color: #1db954;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .3s;
}

.rf_result__add:hover {
    color: #fff;
}

.rf_menu {
    display: block;
    text-align: center;
}

.rf_menu li {
    display: inline-block;
    padding-right: 2rem;
}

.rf_menu a {
    color: #1db954;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s;
}

.rf_menu a:hover {
    color: #b7e6c8;
    text-decoration: underline;
}

.rf_message a {
    color: #1db954;
    text-decoration: none;
}

.rf_message a:hover {
    color: #b7e6c8;
    text-decoration: underline;
    transition: color .3s;
}

.rf_nowplaying {
    background-image: url('/stippie.png');
    color: #1db954;
    display: block;
    font-weight: bold;
    margin: 0 auto 1rem;
    max-width: 600px;
    padding: .5rem;
    text-transform: uppercase;
    width: 100%;
}

.rf_nowplaying span {
    color: #fff;
    font-weight: normal;
    text-transform: none;
}