@import url("https://use.typekit.net/pwc5fri.css");
@import url("https://fonts.googleapis.com/css?family=Forum");

element {
}
* {
    box-sizing: border-box;
}

/* Base Variables */
body {
    --pink: #e7747b;
    --red: #b34b40;
    --orange:  #dc6c3c;
    --yellow:  #e6bb5b;
    --green:   #81894f;
    --lt-blue: #a1c9c2;
    --teal:    #1b8492;
    --dk-blue: #283a59;
    --neon:    #e9fa26;
    --burgundy: #3d1a14;
    --dk-body: #131b2a;
    --glass: rgba(249, 249, 249, 0.56);
    --glass1: rgba(253, 255, 253, 0.45);
    --glass2: rgba(251, 253, 255, 0.60);
    --itc-avant-garde-gothic-pro: "itc-avant-garde-gothic-pro";
    --itc-avant-garde: "itc-avant-garde";
    --neue-kabel: "neue-kabel";
    --american-typewriter: "itc-american-typewriter";
    --cooper-black: "cooper-black-std";
    --benguiat: "itc-benguiat";
}

body {
    font-family: "forum", helvetica, arial, sans-serif;
    background: var(--lt-blue);
    background: linear-gradient(to top left, var(--teal), var(--lt-blue));
    /*background: var(--burgundy) url("/img-noise-100x100.png");*/
    margin:0;
    font-size: 18px;
    font-weight: 400;
}

body a {
    color: var(--teal);
    font-family: "forum", "museo sans", helvetica, arial, sans-serif;
}

.container {
    margin: 20px auto 100px auto;
    max-width: 800px;
    background: var(--glass);
    background: linear-gradient(to bottom right, var(--glass1), var(--glass2));
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.06) 3px 3px 3px;
}

main {
    padding: 20px;
    /*opacity: .85;*/
    color: var(--dk-body);
    /*color: #DAF2EE;*/
    line-height: 1.5;
    margin-bottom: 0;
}

h1, h2, h3 {
    color: var(--dk-blue);
    font-family: var(--cooper-black);
    font-weight: 700;
    margin-bottom: 0;
    /*text-decoration: underline;*/
    /*border-bottom: 1px solid var(--dk-blue);*/
    /*color: var(--dk-blue);*/
}

main h1 {
    font-size: 25px;
}

header h1 {
    color: var(--yellow);
}

header {
    color: var(--teal);
    text-align: center;
    margin-bottom: 0;
    font-family: var(--cooper-black);
    font-weight: normal;
    padding-top: 15px;
}

/* smaller than logo (also right around mobile/iPad mini size) */
@media only screen and (max-width: 650px) {
    .logo {
        width: 80%;
    }
}

/* smaller than container (also right around iPad size) */
@media only screen and (max-width: 820px) {
    .container {
        margin: 20px 10px 100px 10px;
    }
}

/* All mobile */
@media only screen and (max-width: 650px) {
    main h1 {
        font-size: 22px;
    }
}

/* iPhone 5 */
@media only screen and (max-width: 340px) {
    main h1 {
        font-size: 21px;
    }
}

@media only screen and (min-width: 650px) {
    main {
        padding: 20px 100px;
    }
}

body {
    border-top: 10px solid linear-gradient(to right var(--red) var(--pink));
}

input, button, select, textarea, .button {
    font-family: "museo sans", Helvetica, Arial, sans-serif;
}

a.button {
    text-decoration: none;
}

.button {
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.gloss.button {
    color: var(--dk-blue);
}

.gloss {
    position: relative;
    border: 1px solid var(--teal);
    background: none;
}

.gloss::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.1));
}

.pinball-button {
  color: white;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 0;
  margin: 1em;
  outline: none;
  background-color: #c2290a;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 200ms;
  box-shadow: inset 0 4.1666666667px 0 #da2e0b, inset 0 -4.1666666667px 1.6666666667px #aa2409, 0 0 1.6666666667px #c2290a, inset 0 0 3.3333333333px #791a06, inset 0 0 3.3333333333px rgba(51, 51, 51, 0.5), inset 0 0 1.6666666667px 8.3333333333px #c2290a, inset 0 -3.3333333333px 2.5px 10px rgba(51, 51, 51, 0.7), inset 0 0 1.6666666667px 10px #611405, inset 0 0 1.6666666667px 10px rgba(51, 51, 51, 0.7), inset 0 0 0.8333333333px 10.8695652174px black, inset 0 0 0.8333333333px 12.5px rgba(247, 133, 110, 0.7), inset 0 5px 0 11.7647058824px rgba(244, 71, 37, 0.7), inset 0 -5px 1.6666666667px 11.7647058824px rgba(145, 31, 8, 0.2), inset 0 0 0 18.1818181818px #c2290a, inset 0 40px 13.3333333333px #aa2409, inset 0 0 10px 16.6666666667px #911f08, 0 2.5px 5px rgba(0, 0, 0, 0.5);
}

.pinball-button:hover {
  box-shadow: inset 0 4.1666666667px 0 #da2e0b, inset 0 -4.1666666667px 1.6666666667px #aa2409, 0 0 1.6666666667px #c2290a, inset 0 0 3.3333333333px #791a06, inset 0 0 3.3333333333px rgba(51, 51, 51, 0.5), inset 0 0 1.6666666667px 8.3333333333px #c2290a, inset 0 -3.3333333333px 2.5px 10px rgba(51, 51, 51, 0.7), inset 0 0 1.6666666667px 10px #611405, inset 0 0 1.6666666667px 10px rgba(51, 51, 51, 0.7), inset 0 0 2.5px 11.7647058824px black, inset 0 0 0.8333333333px 13.3333333333px rgba(247, 133, 110, 0.2), inset 0 5px 0 28px rgba(146, 68, 53, 0.5), inset 0 -5px 1.6666666667px 28px rgba(97, 20, 5, 0.2), inset 0 0 0 18.1818181818px #b32609, inset 0 40px 13.3333333333px #9b2108, inset 0 0 10px 16.6666666667px #791a06, 0 2.5px 5px rgba(0, 0, 0, 0.5);

  background-color: #b8270a;
}

.pinball-button:hover:before {
  opacity: .5;
}

.pinball-button:before {
  content: '';
  position: absolute;
  bottom: 30px;
  left: 30px;
  display: block;
  width: 45.4545454545px;
  height: 30.303030303px;
  background: rgba(247, 133, 110, 0.2);
  background: linear-gradient(to top, rgba(250, 173, 158, 0.3) 0%, rgba(194, 41, 10, 0.1) 100%);
  border-radius: 40% 40% 60% 60%;
  transition: opacity 200ms;
  text-align: center;
  font-size: xx-large;
}

.blue.button {
    background: var(--teal);
    border: 2px solid var(--dk-blue);
    color: white;
}


input[type="text"], input[type="email"] {
  font-size: 15px;
  width: 50%;
  padding: 5px 10px;
  border: 2px solid var(--teal);
}

.social-buttons {
    text-align: center;
}

.social-buttons a {
    font-family: "museo sans", Helvetica, Arial, sans-serif;
}

.contact-form {
    margin-bottom: 20px;
}
#mc_embed_signup button[type="submit"] {
    margin-top: 10px;
}

.light-bar {
    background: url("../images/colors.svg") repeat-x;
}

.center-text {
    text-align: center;
}

.floating {
  float: right;
  width: 40%;
}

.callout {
  margin: 2rem;
  background-color: #fff;
  box-shadow: -4px 4px 0 var(--red),
    -8px 8px 0 var(--yellow),
    -12px 12px 0 var(--teal),
    -16px 16px 0 var(--pink);
  padding: 1rem;
}

.sponsor-image {
  width: 100%;
}

#mc_embed_signup_scroll {
  display: flex;
}

#mc_embed_signup_scroll > * {
  margin: auto;
}