#app h1 {
  color: #ffffff;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.9);
}

#app > p {
  color: #ffffff;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.9);
}

/*
|--------------------------------------------------------------------------
| New York Graffiti Background
|--------------------------------------------------------------------------
*/

html {
  min-height: 100%;
  background: #09000f;
}

body {
  min-height: 100vh;

  background-image:
    linear-gradient(
      rgba(5, 0, 10, 0.25),
      rgba(5, 0, 10, 0.45)
    ),
    url("/images/thenewyorkskater.png");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  color: #ffffff;
}

main,
#app {
  background: transparent;
}

/*
|--------------------------------------------------------------------------
| New York Graffiti Background
|--------------------------------------------------------------------------
*/

html {
  min-height: 100%;
  background: #09000f;
}

body {
  min-height: 100vh;

  background:
    linear-gradient(
      rgba(8, 0, 15, 0.35),
      rgba(8, 0, 15, 0.58)
    ),
    url("/images/thenewyorkskater.png");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  color: #ffffff;
}

/* FORUM NAV LOGIN STATUS */

.forum-nav-user {
  color:
    var(--cal-white);
}

.forum-nav-logout {
  border-color:
    rgba(255, 255, 255, 0.8);

  color:
    var(--cal-white);
}

.forum-nav-logout:hover {
  background:
    rgba(255, 255, 255, 0.18);
}

/*
|--------------------------------------------------------------------------
| New York Forum Navigation
|--------------------------------------------------------------------------
*/

.forum-nav {
  background:
    linear-gradient(
      90deg,
      var(--cal-orange),
      #ff8a3d
    );

  border-bottom:
    6px solid
    var(--cal-yellow);

  box-shadow:
    0 5px 18px
    rgba(1, 87, 155, 0.18);
}

.forum-nav-brand {
  color:
    var(--cal-white);

  font-size:
    1.35rem;
}

.forum-nav-links a {
  color:
    var(--cal-white);
}

.forum-nav-links a:hover {
  background:
    rgba(255, 255, 255, 0.18);
}

.forum-nav-login {
  background:
    var(--cal-yellow);

  color:
    var(--cal-blue-dark)
    !important;

  border:
    0;
}

/*
|--------------------------------------------------------------------------
| New York Login CTA
|--------------------------------------------------------------------------
*/

.shared-login-cta-content {
  background:
    linear-gradient(
      135deg,
      var(--cal-orange),
      #ff7043
    );

  color:
    var(--cal-white);

  border-bottom:
    8px solid
    var(--cal-yellow);

  box-shadow:
    0 14px 35px
    rgba(1, 87, 155, 0.18);
}

.shared-login-cta-content h2 {
  color:
    var(--cal-white);
}

.shared-login-cta-button {
  background:
    var(--cal-yellow);

  color:
    var(--cal-blue-dark);

  box-shadow:
    0 5px 0
    #e5a900;
}

/*
|--------------------------------------------------------------------------
| The New York Skater
|--------------------------------------------------------------------------
|
| Summer New York palette:
| - Deep orange
| - Golden yellow
| - Pacific blue
| - White
|--------------------------------------------------------------------------
*/

:root {
  --cal-orange: #f4511e;
  --cal-orange-dark: #d84315;
  --cal-yellow: #ffd54f;
  --cal-yellow-bright: #ffeb3b;
  --cal-blue: #0277bd;
  --cal-blue-dark: #01579b;
  --cal-sky: #e3f5ff;
  --cal-white: #ffffff;
  --cal-text: #17232d;
}


/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

html {
  background:
    linear-gradient(
      180deg,
      #78d4ff 0%,
      #e3f5ff 32%,
      #ffffff 72%
    );
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cal-text);
  background: transparent;
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

#app {
  min-height: 70vh;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

#siteHeader {
  min-height: 18px;
  background:
    linear-gradient(
      90deg,
      var(--cal-orange),
      var(--cal-yellow),
      var(--cal-orange)
    );
  border-bottom: 5px solid var(--cal-white);
  box-shadow:
    0 4px 16px
    rgba(1, 87, 155, 0.18);
}


/*
|--------------------------------------------------------------------------
| Home
|--------------------------------------------------------------------------
*/

#app > section {
  width: min(100% - 32px, 1000px);
  box-sizing: border-box;
  margin: 40px auto;
}

#app > section > h1 {
  margin: 0 0 14px;
  color: var(--cal-blue-dark);
  font-size: clamp(
    2.7rem,
    8vw,
    5.5rem
  );
  line-height: 0.95;
  letter-spacing: -0.05em;
}

#app > section > p {
  max-width: 650px;
  margin-bottom: 28px;
  font-size: 1.1rem;
  line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| General links
|--------------------------------------------------------------------------
*/

#app > section > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px 8px 4px 0;
  padding: 12px 22px;
  border-radius: 999px;

  background:
    var(--cal-orange);

  color:
    var(--cal-white);

  font-weight: 800;
  text-decoration: none;

  box-shadow:
    0 5px 0
    var(--cal-orange-dark);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#app > section > a:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 7px 0
    var(--cal-orange-dark);
}


/*
|--------------------------------------------------------------------------
| Forum page
|--------------------------------------------------------------------------
*/

.forum-page,
.forum-thread-page,
.forum-create-page {
  background:
    rgba(255, 255, 255, 0.94);

  margin-top: 32px;
  margin-bottom: 60px;

  padding:
    32px;

  box-sizing:
    border-box;

  border-radius:
    24px;

  border-top:
    8px solid
    var(--cal-yellow);

  box-shadow:
    0 16px 45px
    rgba(1, 87, 155, 0.15);
}


/*
|--------------------------------------------------------------------------
| Forum headings
|--------------------------------------------------------------------------
*/

.forum-page-title,
.forum-create-header h1,
.forum-thread-header h1 {
  color:
    var(--cal-blue-dark);
}

.forum-page-description,
.forum-create-header p {
  color:
    #4b6575;
}


/*
|--------------------------------------------------------------------------
| Forum buttons
|--------------------------------------------------------------------------
*/

.forum-create-button,
.forum-submit-button {
  border:
    0;

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      var(--cal-orange),
      #ff7043
    );

  color:
    var(--cal-white);

  box-shadow:
    0 5px 0
    var(--cal-orange-dark);
}

.forum-create-button:hover,
.forum-submit-button:hover {
  transform:
    translateY(-2px);
}

.forum-cancel-button {
  border:
    2px solid
    var(--cal-blue);

  border-radius:
    999px;

  color:
    var(--cal-blue);

  background:
    var(--cal-white);
}


/*
|--------------------------------------------------------------------------
| Thread cards
|--------------------------------------------------------------------------
*/

.forum-thread-card {
  border:
    2px solid
    #d5efff;

  border-radius:
    18px;

  background:
    var(--cal-white);

  box-shadow:
    0 6px 18px
    rgba(2, 119, 189, 0.08);

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.forum-thread-card:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--cal-yellow);

  box-shadow:
    0 10px 25px
    rgba(2, 119, 189, 0.14);
}

.forum-thread-title {
  color:
    var(--cal-blue-dark);
}

.forum-thread-meta {
  color:
    var(--cal-orange-dark);

  font-weight:
    700;
}


/*
|--------------------------------------------------------------------------
| Replies
|--------------------------------------------------------------------------
*/

.forum-replies-section > h2,
.forum-reply-section > h2 {
  color:
    var(--cal-blue-dark);
}

.forum-post {
  margin-bottom:
    12px;

  padding:
    18px;

  border:
    0;

  border-left:
    5px solid
    var(--cal-yellow);

  border-radius:
    0 14px 14px 0;

  background:
    var(--cal-sky);
}

.forum-post-meta strong {
  color:
    var(--cal-orange-dark);
}


/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/

.forum-create-form input,
.forum-create-form textarea,
.forum-reply-form textarea {
  border:
    2px solid
    #b9e5ff;

  border-radius:
    14px;

  background:
    var(--cal-white);

  color:
    var(--cal-text);

  outline:
    none;
}

.forum-create-form input:focus,
.forum-create-form textarea:focus,
.forum-reply-form textarea:focus {
  border-color:
    var(--cal-blue);

  box-shadow:
    0 0 0 4px
    rgba(2, 119, 189, 0.12);
}


/*
|--------------------------------------------------------------------------
| Empty / error states
|--------------------------------------------------------------------------
*/

.forum-empty-state {
  background:
    #fffbea;

  border:
    2px dashed
    var(--cal-yellow);

  color:
    var(--cal-blue-dark);
}

.forum-error-state {
  background:
    #fff2ed;

  border:
    2px dashed
    var(--cal-orange);

  color:
    var(--cal-orange-dark);
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

#siteFooter {
  min-height:
    90px;

  background:
    var(--cal-blue-dark);

  border-top:
    8px solid
    var(--cal-yellow);
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

  .forum-page,
  .forum-thread-page,
  .forum-create-page {
    margin-top:
      18px;

    padding:
      22px;

    border-radius:
      18px;
  }

  #app > section > h1 {
    font-size:
      clamp(
        2.5rem,
        14vw,
        4rem
      );
  }
}

/*
|--------------------------------------------------------------------------
| New York Full Page Background
|--------------------------------------------------------------------------
*/

html,
body {
  min-height: 100%;
  background-color: #08000d;
}

body {
  background-image:
    linear-gradient(
      rgba(5, 0, 10, 0.32),
      rgba(5, 0, 10, 0.52)
    ),
    url("/images/thenewyorkskater.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/*
|--------------------------------------------------------------------------
| Remove containers covering background
|--------------------------------------------------------------------------
*/

main,
#app,
.page,
.page-shell,
.site-main,
main > section {
  background-color: transparent !important;
  background-image: none !important;
}

/*
|--------------------------------------------------------------------------
| New York readable text
|--------------------------------------------------------------------------
*/

#app h1,
#app h2,
#app h3,
#app p {
  color: #ffffff;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.9);
}