// Add your own custom styles here
:root {
    --boston-color: #20CCf8;
    --seattle-color: #FF3CC8;
    --meetups-color: #7A5DF9;
}

.boston-color {
    color: #20CCF8;
}

.boston-bg {
    background-color: #20CCF8;
}

.seattle-color {
    color: #FF3CC8 !important;
}

.seattle-bg {
    background-color: #FF3CC8;
}

.meetups-color {
    color: #7A5DF9;
}

.meetups-bg {
    background-color: #7A5DF9;
}

.about-content a,
.content-container a {
    color: var(--meetups-color) !important;
    text-decoration: none;
}

.about-content a:hover,
.content-container a:hover {
    text-decoration: underline !important;
}

.qa a {
    color: var(--meetups-color) !important;
    text-decoration: none;
}

.qa a:hover {
    text-decoration: underline;
}

.testimonial a,
.img_grid_container a,
.timeline_grid_container a {
    color: var(--meetups-color) !important;
    text-decoration: none;
}

.testimonial a:hover,
.img_grid_container a:hover,
.timeline_grid_container a {
    text-decoration: underline;
}

// .day_listing.active {

// }

.day_listing.inactive {
    color: rgb(163, 163, 163);
}

.modal-bg a {
    color: var(--meetups-color) !important;
    text-decoration: none;
}

.modal-bg a:hover {
    text-decoration: underline;
}

.frontpage-stream-container {
    max-height: calc(75vh);
    min-height: 34rem;
    aspect-ratio: 16 / 9;
}

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.dark .announcement {
    background-color: #35284F !important;
    color: #fff !important;
}

.announcement {
    background-color: #0a0a0a !important;
    color: #fff !important;
    box-shadow: none !important;
}

.announcement a {
    font-weight: bold;
    color: var(--seattle-color) !important;
}

.announcement a:hover {
    text-decoration: underline !important;
}

.bignote-notice {
    background-color: #fff3cd;
    color: #856404;
}

// Disable the horrendous open and close quotes on blockquote content
blockquote p:first-of-type {
    &::before, &::after {
        content: "" !important;
    }
}

// Revolt chat server
.revolt-form-section {
  max-width: 600px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.revolt-form .form-group {
  margin-bottom: 1.25rem;
}

.revolt-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.revolt-form .required {
  color: #e74c3c;
}

.revolt-form input,
.revolt-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.revolt-form input:focus,
.revolt-form textarea:focus {
  outline: none;
  border-color: #3498db;
}

.revolt-form button {
  background: #3498db;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

.revolt-form button:hover {
  background: #2980b9;
}