/* Pink Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: #d81b60;
  --primary-hover: #c2185b;
  --primary-focus: rgba(216, 27, 96, 0.125);
  --primary-inverse: #FFF;
}

/* Pink Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
	--primary: #d81b60;
	--primary-hover: #e91e63;
	--primary-focus: rgba(216, 27, 96, 0.25);
	--primary-inverse: #FFF;
  }
}

/* Pink Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: #d81b60;
  --primary-hover: #e91e63;
  --primary-focus: rgba(216, 27, 96, 0.25);
  --primary-inverse: #FFF;
}

/* Pink (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
}


.rsvps ul {
  padding-left: 0;
}

.rsvps ul li {
  list-style: none;
}

.rsvps li:before {
  content: "☑ ";
}

.checkbox_label
{
  height:0px;
  width:0px;
  display:inline-block;
  float:left;
  position:relative;
  left:20px;
  z-index:100;
}

/* Hidable stuff for the "add confetti checkbox. */
.hidable {
	height:0px;
	overflow:hidden;
  margin-top: 15px;
}

input:checked ~ .hidable {
	height: auto;
}

/* All inputs should look vibey. */
input {
  border: 2px solid black;
  border-radius: 0px;
  box-shadow: 8px 8px 0px black;
}

/* Anchor buttons that are in grids but wrapped in divs should be the width of the div. */
.grid div a {
  width: 100%;
}

a[role=button] {
  border: 2px solid black;
}

/* Submit buttons should look vibey. */
input[type=submit] {
  border: 2px solid black;
  border-radius: 0px;
  box-shadow: 8px 8px 0px black;
  margin-top: 10px;
}

/* Articles should look vibey. */
article {
  border: 2px solid black;
  border-radius: 0px;
  box-shadow: 8px 8px 0px black;
  margin: unset;
  /*box-shadow: rgba(0, 0, 0, 0.4) 8px 8px, rgba(0, 0, 0, 0.3) 16px 16px, rgba(0, 0, 0, 0.2) 24px 24px, rgba(0, 0, 0, 0.1) 32px 32px, rgba(0, 0, 0, 0.05) 40px 40px;
  /*box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 8px -8px 0px -3px, rgb(31, 193, 27) 8px -8px, rgb(255, 255, 255) 16px -16px 0px -3px, rgb(255, 217, 19) 16px -16px, rgb(255, 255, 255) 24px -24px 0px -3px, rgb(255, 156, 85) 24px -24px, rgb(255, 255, 255) 32px -32px 0px -3px, rgb(255, 85, 85) 32px -32px;*/
}

/* iframes (the location preview) should look vibey. */
iframe {
  border: 2px solid black;
  box-shadow: 8px 8px 0px black;
}

.location-preview {
  margin-bottom: 12px;
}

/* Anchor buttons should look vibey. */
a[role=button] {
  border-radius: 0px;
  box-shadow: 8px 8px 0px black;
  margin-bottom: 16px;
}

.party-title {
  font-family: "Lobster", serif;
  font-size: 3rem;
  text-align: center;
  text-decoration: underline;
  color: var(--h1-color);
}

.party-tagline {
  font-family: var(--font-family);
  text-align: center;
  font-style: italic;
  font-size: 1rem;
}

.party-detail-header {
  font-family: "Lobster", serif;
  font-size: 3rem;
  text-decoration: underline;
  margin-bottom: 0;
}

.party-detail {
  font-family: "Lobster", serif;
  font-weight: bold;
}

.borderless {
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: groove;
  border-width: 0px;
  box-shadow: 0px 0px 0px;
  /* Somewhere out there someone who knows CSS is crying */
  height: unset !important;
}

.pseudo-mark {
  background-color: var(--mark-background-color);
  color: var(--mark-color);
}

/* Revert all of the styling done by the pico framework to any of the elements
 * used for pell (except "pell-content" which we want the style for and re-class
 * as "party-description").
 *
 * TBH, I didn't even know CSS could do this and its kinda sick. */
* [class^="pell-"] {
  all: revert;
}

.pell-actionbar {
  border-bottom: 2px solid black !important;
  background-color: unset !important;
}


#editor {
  border: 2px solid black;
  border-radius: 0px;
  box-shadow: 8px 8px 0px black;
}

#editor .party-description {
  min-height: 12rem;
  padding: 5px;
}

.party-description :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: unset;
  font-family: "Lobster", serif;
}

.hidden {
  display: none;
}