@import 'https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css';
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,600;1,700;1,900&display=swap');

:root {
  --sl-color-primary-50: var(--sl-color-violet-50);
  --sl-color-primary-100: var(--sl-color-violet-100);
  --sl-color-primary-200: var(--sl-color-violet-200);
  --sl-color-primary-300: var(--sl-color-violet-300);
  --sl-color-primary-400: var(--sl-color-violet-400);
  --sl-color-primary-500: var(--sl-color-violet-500);
  --sl-color-primary-600: var(--sl-color-violet-600);
  --sl-color-primary-700: var(--sl-color-violet-700);
  --sl-color-primary-800: var(--sl-color-violet-800);
  --sl-color-primary-900: var(--sl-color-violet-900);
  --sl-color-primary-950: var(--sl-color-violet-950);
  --sl-input-focus-ring-color: var(--sl-color-violet-500);
  --sl-focus-ring-width: 0px;
  --white: #ffffff;
  --neutralLight: var(--sl-color-gray-900);
  --neutralDark: #0d0d13;
  --textLight: #ffffff;
  --textDark: var(--sl-color-gray-100);
  --accent1: var(--sl-color-primary-500);
  --accent1Light: var(--sl-color-primary-50);
  --accent1Dark: var(--sl-color-primary-800);
  --accent2: var(--sl-color-amber-300);
  --accent2Dark: var(--sl-color-amber-500);
  --danger: var(--sl-color-red-500);
}

* {
  box-sizing: border-box;
}

[v-cloak] {
  display: none;
}

:not(:defined) {
  visibility: hidden;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: var(--neutralDark);
  color: var(--textLight);
  overflow: auto !important;
  scroll-behavior: smooth;
}

a {
  color: var(--accent1);
  font-weight: 600;
  display: inline;
}

a:hover {
  color: var(--accent2);
}

a.flex {
  display: flex;
  align-items: center;
}

img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

strong {
  color: inherit;
}

/* Top navigation bar */

.title {
  color: var(--textLight) !important;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.subtitle {
  color: var(--textLight);
}

.topBar {
  background-color: var(--sl-color-primary-500);
  padding: 12px 24px;
  display: flex;
  align-items: center;
}

/* Sections */

.section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.sectionDivider {
  height: 1px;
  background-color: var(--accent1);
}

.heroSection {
  background-color: var(--accent1);
  color: var(--textLight);
}

.heroSection .subtitle {
  color: var(--textLight);
}

.benefitIcon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.blogSlider {
  width: 100%;
  overflow-x: auto;
  display: flex;
}

.blogCard {
  min-width: 250px;
  max-width: 350px;
  border: 2px solid var(--sl-color-neutral-200);
  border-radius: 8px;
}

.blogCard:hover {
  border: 2px solid var(--accent1);
}

.blogCard a {
  color: inherit;
}

/* Name selection */

.preDisplay {
  padding: 10px;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nameDisplay {
  height: calc(100vh - 250px);
  padding: 10px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nameList {
  /* max-height: 350px; */
  overflow-y: auto;
}

.name {
  background-color: var(--sl-color-gray-100);
  padding: 5px;
  border-radius: 5px;
}

.config {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Presenting mode */

.fixedStopPresentingButton {
  position: fixed;
  top: calc(100vh - 40px);
  left: calc(50vw - 75px);
  z-index: 1000;
}

.presenting {
  display: none;
  visibility: hidden;
}

/* Shoelace modifiers */

.card-basic {
  width: 100%;
}

/* Helpers */

.is-fullheight {
  height: 100%;
}

.flexGap {
  display: flex;
  gap: 10px;
}

.editable {
  border-bottom: 1px solid var(--textLight);
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.lightText {
  color: var(--textLight) !important;
}

.darkText {
  color: var(--textDark) !important;
}

.danger {
  color: var(--danger);
}

.zoom {
  transition: transform 0.2s;
}

.zoom:hover {
  transform: scale(1.05);
}

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}