/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Universal
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Apply styling to all elements (including their `::before` and `::after`
pseudo-elements). One common use of this selector is to apply a custom
`box-sizing`. */
*,
*::before,
*::after {
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Root
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* lIGHT THEME BY DEFAULT */
:root {
  --accent: #38bdf8;
  --background-1: #fcfcfc;
  --background-2: #f8f8f8;
  --background-3: #ededed;
  --text-1: #171717;
  --text-2: #525252;
  --text-3: #8f8f8f;
  --panel-border: #dfdfdf;
  --icon: #2a3141;
  --icon-hover: #f0f2f5;
  --icon-selected: #38bdf8;
  --red-1: #fef2f2;
  --red-2: #fecaca;
  --red-3: #ef4444;
  --red-4: #991b1b;
  --red-5: #5f1b1b;
  --orange-1: #fff7ed;
  --orange-2: #fed7aa;
  --orange-3: #f97316;
  --orange-4: #9a3412;
  --orange-5: #52200f;
  --yellow-1: #fefce8;
  --yellow-2: #fef08a;
  --yellow-3: #eab308;
  --yellow-4: #854d0e;
  --yellow-5: #3c260b;
  --lime-1: #f7fee7;
  --lime-2: #d9f99d;
  --lime-3: #84cc16;
  --lime-4: #3f6212;
  --lime-5: #26390e;
  --green-1: #f0fdf4;
  --green-2: #bbf7d0;
  --green-3: #22c55e;
  --green-4: #166534;
  --green-5: #0c311b;
  --blue-1: #f0f9ff;
  --blue-2: #bae6fd;
  --blue-3: #0ea5e9;
  --blue-4: #075985;
  --blue-5: #0b3249;
  --purple-1: #FAF5FF;
  --purple-2: #E9D5FF;
  --purple-3: #A855F7;
  --purple-4: #6B21A8;
  --purple-5: #2F1143;
  --rose-1: #FFF1F2;
  --rose-2: #FECDD3;
  --rose-3: #F43F5E;
  --rose-4: #9F1239;
  --rose-5: #4A0D20;
  --neutral-1: #f9f9f9;
  --neutral-2: #e4e4e7;
  --neutral-3: #71717a;
  --neutral-4: #27272a;
  --neutral-5: #131316;
  --box-shadow-small: 2px 2px 3px rgba(0, 0, 0, 0.3);
  --box-shadow-big: 3px 3px 6px rgba(0, 0, 0, 0.4);
  --z-index-drawer: 100;
  --z-index-toaster: 200;
  --z-index-footer: 250;
  --z-index-overlay: 300;

  /* sizing variables */
  --header-height: 3.5rem;

  /* font variables */
  --font-size-bigger: 18pt;
  --font-size-big: 14pt;
  --font-size-regular: 11pt;
  --font-size-small: 8pt;
  --font-size-smaller: 6pt;
}

@font-face {
  font-family: "Quicksand";
  src: url("./fonts/Quicksand-Light.woff2") format("woff2"),
    url("./fonts/Quicksand-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("./fonts/Quicksand-Medium.woff2") format("woff2"),
    url("./fonts/Quicksand-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("./fonts/Quicksand-Bold.woff2") format("woff2"),
    url("./fonts/Quicksand-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("./fonts/Quicksand-SemiBold.woff2") format("woff2"),
    url("./fonts/Quicksand-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("./fonts/Quicksand-Regular.woff2") format("woff2"),
    url("./fonts/Quicksand-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.accordion-item {
  padding: 0.5rem 0rem;
}

.accordion-content {
  overflow: hidden;
}

.accordion-header {
  padding-left: 2rem;
  position: relative;
  cursor: pointer;
}

.accordion-header::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "▼";
}

.accordion-item.collapsed .accordion-content {
  height: 0px;
}

.accordion-item.collapsed .accordion-header::before {
  content: "►";
}

.ytp-large-play-button {
  display: none !important;
}

.card {
  background-color: var(--background-1);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
}

.blurred {
  /*filter: blur(5px);*/
  position: relative;
  background-color: inherit;
}
.blurred::before {
  background-color: inherit;
  background-color: var(--background-1);
  position: absolute;
  width: 100%;
  content: "####";
}
.blurred::after {
  background-color: var(--background-1);
  position: absolute;
  width: 100%;
  height: 100%;
}

.hover-pointer:hover {
  cursor: pointer;
}

.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.realtime-table-row {
  height: 2rem;
  padding: 0rem 0.5rem;
  align-items: center;
  justify-items: center;
  font-family: monospace;
  background-color: var(--background-2);
  color: var(--text-1);
  button {
    border: none;
  }
}

.realtime-table-row.green {
  background-color: var(--green-2);
  color: var(--green-4);
  button {
    background-color: var(--green-2);
    color: var(--green-4);
  }
}
.realtime-table-row.yellow {
  background-color: var(--yellow-2);
  color: var(--yellow-4);
  button {
    background-color: var(--yellow-2);
    color: var(--yellow-4);
  }
}
.realtime-table-row.red {
  background-color: var(--red-2);
  color: var(--red-4);
  button {
    background-color: var(--red-2);
    color: var(--red-4);
  }
}

.realtime-table-row button:hover {
  color: var(--background-2);
  background-color: var(--text-2);
}

.realtime-table-row:hover {
  cursor: pointer;
  background-color: var(--text-1);
  color: var(--background-2);
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* screenshot card in the */
.screenshot-container {
  display: grid;
  gap: 10px;
  width: 100%;
  height: 100vh; /* Adjust as needed */
  padding: 10px;
  box-sizing: border-box;
}

.screenshot-container {
  display: grid;
  gap: 10px;
  width: 100%;
  height: 100vh; /* Full height of the viewport */
  padding: 10px;
  box-sizing: border-box;
}

iframe,
.screenshot-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive grid for up to 6 elements */
.screenshot-container:has(img:nth-child(6), iframe:nth-child(6)) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.screenshot-container:has(img:nth-child(5), iframe:nth-child(5)):not(
    :has(img:nth-child(6), iframe:nth-child(6))
  ) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.screenshot-container:has(img:nth-child(4), iframe:nth-child(4)):not(
    :has(img:nth-child(5), iframe:nth-child(5))
  ) {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.screenshot-container:has(img:nth-child(3), iframe:nth-child(3)):not(
    :has(img:nth-child(4), iframe:nth-child(4))
  ) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
}

.screenshot-container:has(img:nth-child(2), iframe:nth-child(2)):not(
    :has(img:nth-child(3), iframe:nth-child(3))
  ) {
  grid-template-columns: repeat(2, 1fr);
}

.screenshot-container:has(img:nth-child(1), iframe:nth-child(1)):not(
    :has(img:nth-child(2), iframe:nth-child(2))
  ) {
  grid-template-columns: 1fr;
}

/* nodeui editor Controls Styling */

html {
  font-size: var(--font-size-regular);
}

html[data-theme="dark"] {
  .grid-stack-placeholder > .placeholder-content {
    background-color: rgba(255, 255, 255, 0.1);
  }
  --accent: #38bdf8;
  --background-1: #171717;
  --background-2: #1a1a1a;
  --background-3: #2e2e2e;
  --text-1: #fafafa;
  --text-2: #b4b4b4;
  --text-3: #8a8a8a;
  --panel-border: #2e2e2e;
  --icon: #b4b4b4;
  --icon-hover: #171717;
  --icon-selected: #38bdf8;
  --red-1: #5f1b1b;
  --red-2: #9e211f;
  --red-3: #f43230;
  --red-4: #ffb6b6;
  --red-5: #ffeaea;
  --orange-1: #622815;
  --orange-2: #9f3916;
  --orange-3: #ff6903;
  --orange-4: #ffd195;
  --orange-5: #fff9e5;
  --yellow-1: #4a3113;
  --yellow-2: #8a5113;
  --yellow-3: #dda80e;
  --yellow-4: #fff375;
  --yellow-5: #ffffe0;
  --lime-1: #314715;
  --lime-2: #446617;
  --lime-3: #7abb1c;
  --lime-4: #d5fe89;
  --lime-5: #faffdf;
  --green-1: #133f25;
  --green-2: #1c6a38;
  --green-3: #26b559;
  --green-4: #a8fbc5;
  --green-5: #e8fff1;
  --blue-1: #133d57;
  --blue-2: #119ee2;
  --blue-4: #a6e3ff;
  --blue-3: #0ea5e9;
  --blue-5: #e8fdff;
  --purple-1: #3A1851;
  --purple-2: #7026AD;
  --purple-3: #A141FC;
  --purple-4: #E2C0FF;
  --purple-5: #FFEDFF;
  --rose-1: #591429;
  --rose-2: #A41A3D;
  --rose-3: #F92C4D;
  --rose-4: #FFB9C2;
  --rose-5: #FFE9EC;
  --neutral-1: #131316;
  --neutral-2: #27272a;
  --neutral-3: #71717a;
  --neutral-4: #e4e4e7;
  --neutral-5: #f9f9f9;
  color-scheme: dark;
}

.ql-toolbar .ql-stroke {
  fill: none;
  stroke: var(--text-2);
}

.ql-toolbar .ql-fill {
  fill: var(--text-2);
  stroke: none;
}

.ql-toolbar .ql-picker {
  color: var(--text-2);
}

.ql-toolbar.ql-snow {
  border: none;
}
.ql-container.ql-snow {
  border: 1px solid var(--panel-border);
  border-radius: 5px;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 1px solid var(--panel-border);
}

html[data-theme="light"] {
  .grid-stack-placeholder > .placeholder-content {
    background-color: rgba(0, 0, 0, 0.1);
  }
}

body {
  display: grid;
  color: var(--text-1);
  font-family: "Quicksand", Arial, Helvetica, sans-serif;
  grid-template-areas:
    "header header"
    "message message"
    "sidebar main"
    "footer footer";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  height: 100vh;
  background-color: var(--background-2);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Content sectioning
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

h1,
h2,
h3,
h4,
h5,
h6 {
}
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}

header {
}

nav {
}
nav ul,
nav ol {
}
nav li {
}
nav a {
}
nav a:visited {
}
nav a:hover {
}
nav a:active {
}

main {
}

article {
}

section {
}

aside {
}

search {
}

footer {
}

address {
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Text block content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Overall styling, e.g. vertical spacing */
p,
ol,
ul,
pre,
blockquote,
figure,
hr,
dl {
}

p {
  color: var(--text-2);
}

ol,
ul {
}
ol {
}
ul {
}
li {
}
ol ol,
ol ul,
ul ul,
ul ol {
}
li li {
}

pre {
}
pre code {
}
pre samp {
}

blockquote {
}

figure {
}
figcaption {
}

hr {
}

dl {
}
dt {
}
dd {
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Inline text semantics
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

a {
}
a:visited {
}
a:hover {
}
a:active {
}

a.button-link {
  padding: 0.8rem;
  border: 1px solid var(--panel-border);
  background-color: var(--background-1);
  color: var(--text-1);
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
}

a.button-link.tight {
  padding: 0.2em 0.4rem;
}

strong {
}
b {
}

em {
}
i {
}

q {
}
cite {
}

s {
}

mark {
}

/* If you specify a font size, consider using the `em` unit so that it works
universally, e.g. for both `h1 small` and `p small` */
small {
}
sub {
}
sup {
}

code {
}

dfn {
}
abbr {
}
abbr[title] {
}

var {
}
kbd {
}
kbd kbd {
}
samp {
}

u {
}

data {
}
time {
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Demarcating edits
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

del {
}
ins {
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Embedded content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

img {
}
svg {
}
video {
}
canvas {
}
audio {
}
object {
}

noscript {
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Table content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

table {
  border-spacing: 0px;
  border-collapse: collapse;
}

th {
  text-align: left;
}
caption {
}
col:first-child {
}
thead {
}
tbody {
}
tfoot {
}
tr {
}
th {
}
td {
  vertical-align: center;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Forms
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

fieldset {
  margin-top: 0.5rem;
  padding: 0rem 0.5rem;
}
fieldset:disabled {
  opacity: 0.6;
  pointer-events: none; /* Prevent interaction with child elements */
  border-color: var(--background-3);
}

fieldset:disabled legend {
  color: var(--text-2);
}

legend {
  padding: 0rem 0.5rem;
}

form {
}

label {
  display: flex;
  flex-direction: column;
  color: var(--text-1);
  margin-top: 0.5rem;
}

fieldset label {
  display: inline-flex;
  align-items: center;
  color: var(--text-1);
  margin: 0.5em 0;
  flex-direction: row;
}

::placeholder {
}
:focus::placeholder {
}

/* Overall styling, e.g. vertical spacing */
input,
textarea,
select,
button.primary {
  margin-top: 0.5em;
  padding: 0.5em;
}

input.tight,
textarea.tight,
button.tight {
  padding: 0.2em 0.4rem;
  margin: 0px;
}

button.no-border {
  border: none;
}

select.tight {
  padding: 0.2em 1rem 0.2rem 0.4rem;
  margin: 0px;
}

/* `textarea` and `input` elements that share a similar look and similar styling
capabilities */
/* - common styling */
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"] {
  background-color: var(--background-1);
  color: var(--text-1);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  font-size: 9pt;

  /* Placeholder text styling */
  ::placeholder {
    color: var(--text-2);
  }
}

textarea:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled,
input[type="url"]:disabled,
input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
input[type="time"]:disabled {
  background-color: transparent;
  color: var(--text-3);
}
/* - individual styling */
textarea {
}
input[type="text"] {
}
input[type="password"] {
}
input[type="email"] {
}
input[type="tel"] {
}
input[type="number"] {
}
input[type="search"] {
}
input[type="url"] {
}
input[type="date"] {
}
input[type="datetime-local"] {
}
input[type="month"] {
}
input[type="week"] {
}
input[type="time"] {
}
/* Tick boxes */
input[type="checkbox"],
input[type="radio"] {
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
}
input[type="checkbox"] {
}
input[type="checkbox"]:checked {
}
input[type="radio"] {
}
input[type="radio"]:checked {
}
/* Other input fields, some with limited styling capabilities */
input[type="file"] {
  color: black;
}
input[type="color"] {
}
input[type="range"] {
}

select {
  background-color: var(--background-1);
  color: var(--text-1);
  border: 1px solid var(--panel-border);
  padding: 0.5em 1rem 0.5rem 0.5rem;
  border-radius: 4px;
  appearance: none; /* Removes default OS-specific styling */
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 20 20' fill='%238291B5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E"); /* Dropdown arrow icon */
  background-repeat: no-repeat;
  background-position: right 0.25em center;
  background-size: 1em;
  font-size: 9pt;
}

input.not-editable,
textarea.not-editable,
select.not-editable,
button.not-editable {
  background-color: transparent;
  border: none;
  background-image: none;
}
input:disabled.not-editable,
textarea:disabled.not-editable,
select:disabled.not-editable,
button:disabled.not-editable {
  color: var(--text-1);
}

optgroup {
}
option {
}
option:checked {
}
datalist {
}

button,
input[type="submit"] {
  margin: 0.5rem 0rem;
  background-color: var(--background-1);
  color: var(--text-1);
  border: 1px solid var(--panel-border);
  padding: 0.5em 1em;
  border-radius: 4px;
  font-size: 9pt;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
button:disabled,
input[type="submit"]:disabled {
}

button.accent {
  background-color: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 0.5em 1em;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

button.secondary {
}
button.secondary:disabled {
}

button.accent:hover {
  background-color: darken(var(--accent), 10%);
}

/* Disabled button styles */
button:disabled,
button.default:disabled,
button.accent:disabled {
  background-color: var(--background-2);
  color: var(--text-3);
  border-color: var(--panel-border);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Loading state styles */
button.is-loading {
  position: relative;
  color: transparent; /* Hide the button text */
}

button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border: 2px solid var(--text-2);
  border-top: 2px solid var(--accent);
  border-radius: 50%;
  animation: button-spin 0.8s linear infinite;
}

button.link {
  background-color: transparent;
  color: var(--accent);
  font-size: var(--font-size-regular);
  padding: 0;
  margin: 0;
  border: none;
  text-decoration: underline;
}

/* Spinner animation */
@keyframes button-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* pulse animation */
@keyframes pulse {
  0% {
    background-color: rgba(255, 0, 0, 0); /* Fully transparent */
  }
  50% {
    background-color: var(--blue-2);
  }
  100% {
    background-color: rgba(255, 0, 0, 0); /* Back to fully transparent */
  }
}
.pulse {
  /*animation: pulse 2s infinite;*/
}

.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid #fff;
  border-right: 3px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* This matches forms or form elements that are invalid *and* have been
interacted with. Note that:
1) You may need to add the `interacted` class to forms yourself
2) You may need to add the `touched` class to form fields yourself
3) `:user-invalid` is a working draft and not yet supported by most browsers
4) `:-moz-ui-invalid` is non-standard and only works in Firefox
Form validation error messages will appear (in capable browsers) regardless of
this styling. You can omit 1) and 2) and still have working forms. Perfect
example of progressive enhancement. */
/* Applies to invalid forms */
form.interacted:invalid {
}
/* Applies to invalid form fields. You would need to repeat your declarations
for the following three groups of selectors individually. Browsers completely
ignore any rule that contains a selector they do not know. */
form.interacted :invalid,
form .touched:invalid {
}
:user-invalid {
}
:-moz-ui-invalid {
}

output {
}

progress {
}
meter {
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Interactive elements
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

details {
}
details[open] {
}
summary {
}
details[open] summary {
}

dialog {
}
dialog::backdrop {
}

/* Some form fields, `details`, elements with `tabindex`, and possibly other
elements can be focussed. You should use `:focus-visible` instead of `:focus`
whenever possible. As the former is not yet widely supported, you need to do it
as follows:
1) Set styling on focus
2) If browser supports `:focus-visible`, revert/unset the styling from 1)
3) If the element matches `:focus-visible`, apply the styling again */
:focus {
  border-color: var(--accent);
  box-shadow: 0 0 4px var(--accent);
}
:focus:not(:focus-visible) {
}
:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 4px var(--accent);
}

[inert],
[inert] * {
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Media queries
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media (prefers-reduced-motion: reduce) {
}

@media (orientation: portrait) {
}

@media (orientation: landscape) {
}

@media print {
}

/*
This file evolved from Natural Selection:
https://github.com/frontaid/natural-selection
*/