html {
	max-width: 100vw;
}

html,
body {
  max-width: 100vw;
	height: 100vh;

}

.w-80 {
  width: 80%;
}

.w-85 {
  width: 85%;
}

.w-90 {
  width: 90%;

}

.glass {
  backdrop-filter: blur(30px);  
}

html[data-bs-theme="light"] .glass {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

html[data-bs-theme="dark"] .glass {
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.1);
}

body {
  overflow-x: hidden;
}

#made-with::after {
	content: var(--symbol);
	font-size: 1rem;
	text-shadow: var(--text-shadow);
}

/* Default theme */
html[data-theme="default"] {
  --color-primary: #eee;
  --color-secondary: #555;
  --color-accent: #aaa;
  --color-accent2: #555;
  --symbol: "💔";
}
html[data-theme="0"] {
  --color-primary: #d2ff06;
  --color-accent2: #042a05;
  --color-secondary: #15aa5c;
  --color-accent: #258073;
  --symbol: "🖤";
}
html[data-theme="1"] {
  --color-primary: #e02411;
  --color-accent2: #1e4ea0;
  --color-secondary: #ffa913;
  --color-accent: #569ced;
  --symbol: "💙";
}

html[data-theme="2"] {
  --color-primary: #dba05c;
  --color-accent2: #9995bc;
  --color-secondary: #e9cca4;
  --color-accent: #8eafd8;
  --symbol: "🤎";
}

html[data-theme="3"] {
  --color-primary: #f3f1ed;
  --color-accent2: #0b190c;
  --color-secondary: #fffd6e;
  --color-accent: #ff6100;
  --symbol: "🖤";
}
html[data-theme="4"] {
  --color-primary: #84caec;
  --color-accent2: #fcec86;
  --color-secondary: #efb7dc;
  --color-accent: #ff9969;
  --symbol: "💛";
}
html[data-theme="5"] {
  --color-primary: #d88f00;
  --color-accent2: #812a89;
  --color-secondary: #efca93;
  --color-accent: #ff6cdc;
  --symbol: "💜";
}
html[data-theme="6"] {
  --color-primary: #4b4921;
  --color-accent2: #f01c1f;
  --color-secondary: #2a8a56;
  --color-accent: #66d848;
  --symbol: "💚";
}
html[data-theme="7"] {
  --color-primary: #f5f5f5;
  --color-accent2: #f02;
  --color-secondary: #9ea5a8;
  --color-accent: #ff6800;
  --symbol: "❤️";
}
html[data-theme="8"] {
  --color-primary: #031624;
  --color-accent2: #30ffa4;
  --color-secondary: #044b4a;
  --color-accent: #5fbe92;
  --symbol: "💚";
}
html[data-theme="9"] {
  --color-primary: #de8735;
  --color-accent2: #a11225;
  --color-secondary: #f4c16e;
  --color-accent: #b5a492;
  --symbol: "💙";
}

* {
  --gradient: radial-gradient(ellipse farthest-corner at right bottom,
  var(--color-accent2) 2%,
  var(--color-primary) 12%,
  var(--color-primary) 18%,
  var(--color-accent) 33%,
  var(--color-secondary) 50%,
  transparent 80%),
radial-gradient(ellipse farthest-corner at left top,
  var(--color-accent2) 2%,
  var(--color-primary) 12%,
  var(--color-primary) 18%,
  var(--color-accent) 33%,
  var(--color-secondary) 50%,
  transparent 80%);
}



.title {
  letter-spacing: .05rem;
}

.bg-primary {
  background-color: var(--color-accent) !important;
}

.card {
  text-rendering: geometricPrecision;
  backdrop-filter: blur(90vw);
}

input, button{
  max-width: 90vw;
}

.gradient {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  background-image: var(--gradient) !important;
}

.bg-fixed {
  background-attachment: fixed;
}
ul {
  list-style: none;
  padding: 1rem;
  margin: 1rem;
}
.topcoat-switch__toggle {
  font-size: medium;
  font-weight: 999;
}
/*
.topcoat-switch__toggle:before {
	color: #00aa00aa!important;
}

.topcoat-switch__toggle:after {
  color: #aa0000aa !important;
}
*/

.bg-theme-accent {
  background-color: var(--color-accent) !important;
}
.bg-theme-accent2 {
  background-color: var(--color-accent2) !important;
}
.bg-theme-secondary {
  background-color: var(--color-secondary) !important;
}
.bg-theme-primary {
  background-color: var(--color-primary) !important;
}