// 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 {
    color: var(--meetups-color) !important;
    text-decoration: none;
}

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

.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: 36rem;
    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;
}
