/* Base styles imported from https://makepages.com/css/shared.css */
/* Modern Styles for the DieCube class*/

.diecube {
  --size: 120px; /* value in pixels, please */
  --perspective: calc(var(--size) * 4); /* always 4 times the size */
  --dicecolor: #1a1a2e; /* Dark navy blue */
  --cornercolor: #16213e; /* Slightly lighter navy */
  --bordercolor: #0f3460; /* Deep blue border */
  --cornerradius: calc(var(--size) * 0.18); /* best at 0.1 to 0.18 */
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  background: transparent;
  margin: calc(var(--size) * 0.25) calc(var(--size) * 0.3)
    calc(var(--size) * 0.5) calc(var(--size) * 0.3);
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  transform: perspective(var(--perspective));
  transform-origin: 50% 50% calc(var(--size) / 2);
  cursor: pointer;
  overflow: visible;
  user-select: none;
  border: 0 none;
  border-radius: var(--cornerradius);
}
.dieface {
  height: var(--size);
  width: var(--size);
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border: 2px solid var(--bordercolor);
  border-radius: 0;
  box-shadow: 1px 1px 1px var(--bordercolor), -1px -1px 1px var(--bordercolor);
  transform-style: preserve-3d;
  overflow: visible;
  background: var(--dicecolor);
  background: radial-gradient(
    ellipse at center,
    var(--dicecolor) 0%,
    var(--dicecolor) 35%,
    var(--cornercolor) 80%,
    var(--bordercolor) 100%
  );
  opacity: 1;
}
.dieface--back {
  transform: rotateX(180deg);
  transform-origin: right;
}
.dieface--right {
  transform: rotateY(90deg);
  transform-origin: right;
}
.dieface--left {
  transform: rotateY(-90deg);
  transform-origin: left;
}
.dieface--bottom {
  transform: rotateX(-90deg);
  transform-origin: bottom;
}
.dieface--top {
  transform: rotateX(90deg);
  transform-origin: top;
}
.dieface--front {
  transform: translateZ(var(--size));
  transform-origin: top;
}
.dot {
  position: absolute;
  width: 21%;
  height: 21%;
  background: radial-gradient(#00d4ff, #0ea5e9); /* Bright cyan to blue gradient */
  border-radius: 50%;
  border: 2px solid #38bdf8; /* Light blue border */
  --dotmargin: var(--cornerradius);
  --dotmid: 40%;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.4); /* Subtle glow */
}
.dot--1 {
  left: var(--dotmargin);
  top: var(--dotmargin);
}
.dot--2 {
  left: var(--dotmid);
  top: var(--dotmargin);
}
.dot--3 {
  right: var(--dotmargin);
  top: var(--dotmargin);
}
.dot--4 {
  left: var(--dotmargin);
  top: var(--dotmid);
}
.dot--5 {
  left: var(--dotmid);
  top: var(--dotmid);
}
.dot--6 {
  right: var(--dotmargin);
  top: var(--dotmid);
}
.dot--7 {
  left: var(--dotmargin);
  bottom: var(--dotmargin);
}
.dot--8 {
  left: var(--dotmid);
  bottom: var(--dotmargin);
}
.dot--9 {
  right: var(--dotmargin);
  bottom: var(--dotmargin);
}

/* Modern Styles for the layout and user interface */
.wrapper {
  --gridbordercolor: #6366f1; /* Modern indigo */
  --griditembordercolor: #22c55e; /* Modern green */
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* Dark gradient background */
  min-height: 100vh;
  overflow: hidden;
}

body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
}

.header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.titlehead {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#dicefield {
  position: relative;
  top: 20px;
  left: 0;
}
.container {
  margin: 0 5% 1rem 5%;
  padding: 0;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(auto-fit, auto);
  background: transparent;
}
.comment {
  text-align: left;
}
.wrapper > .grid-box {
  justify-self: center;
}
.examplehead {
  justify-self: stretch;
  margin: 1rem 5% 1rem 5%;
  padding: 0.5rem;
  max-width: 90%;
  text-align: left;
  color: white;
  background: var(--gridbordercolor);
}
#info,
#outputbox {
  padding: 2rem;
  line-height: 1.6;
  background: rgba(30, 41, 59, 0.8); /* Semi-transparent dark background */
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
#info {
  text-align: left;
  color: #e2e8f0;
}
#info ol,
#info p {
  text-align: left;
  color: #cbd5e1;
}
#info button {
  margin: 1rem 0 1rem 1rem;
  min-width: auto;
  padding: 12px 24px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

#info button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

em {
  font-style: italic;
  color: #38bdf8;
}

#outputbox {
  position: relative;
  min-height: 400px;
  text-align: center;
  background: rgba(15, 23, 42, 0.9);
  overflow: visible;
  border: 1px solid rgba(0, 212, 255, 0.2);
}
code {
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}
.elbox {
  margin: 0 auto 1rem auto;
  width: 96%;
  max-width: 600px;
}
.ellabel {
  display: inline-block;
  padding: 0;
  margin: 1rem 0 0.5rem 1rem;
  font-weight: bold;
  color: #f1f5f9;
}
.textio {
  font-size: 1rem;
  font-family: "Courier New", monospace;
  height: 4ex;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 2px 2px -2px #6366f1 inset;
  padding: 0.5rem;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #f1f5f9;
}
.textio--number {
  font-family: "Courier New", monospace;
  width: auto;
  max-width: 5rem;
  text-align: center;
}
#inputFld {
  width: 100%;
  height: auto;
  min-height: auto;
  max-height: auto;
  background: rgba(30, 41, 59, 0.8);
  color: #f1f5f9;
}
#rollResult {
  padding: 0;
  margin: 0 20px 0 5px;
  white-space: nowrap;
  color: #00d4ff;
  font-weight: bold;
  font-size: 1.2rem;
}
.rangestyle {
  text-align: left;
  padding: 0;
  margin: 0 0 2rem 0;
  --uimargin: 10px 0 10px 0;
  --uiborderfocuscolor: #6366f1;
  --rangewidth: 200px;
  --rangeheight: 30px;
  --thumbwidth: 30px;
  --thumbheight: 30px;
  --thumbborderradius: 50%;
  --thumbcolor: #6366f1;
  --uibordercolor: rgba(99, 102, 241, 0.3);
  --uibackground: rgba(30, 41, 59, 0.8);
  --uiborderradius: 15px;
  --thumbboxshadow: 0 0 10px rgba(99, 102, 241, 0.5);
}
.rangestyle--style3 {
  --rangewidth: 95%;
  --rangeheight: 40px;
  --thumbwidth: 40px;
  --thumbheight: 40px;
  --thumbcolor: linear-gradient(
    to right,
    #6366f1 0,
    #8b5cf6 50%,
    #6366f1 100%
  );
  --uibordercolor: rgba(99, 102, 241, 0.3);
  --uibackground: rgba(30, 41, 59, 0.6);
  --uiborderradius: 8px;
  --thumbborderradius: 8px;
  --thumbboxshadow: -300px 0 0 300px rgba(15, 23, 42, 0.8);
}
.rangestyle__rangebox {
  width: var(--rangewidth);
  height: var(--rangeheight);
  display: inline-block;
  margin: var(--uimargin);
  border: 0 none;
  border-radius: var(--uiborderradius);
  position: relative;
}
.rangestyle__rangebox input[type="range"] {
  -webkit-appearance: none; /* Override default CSS styles */
  width: var(--rangewidth);
  height: var(--rangeheight);
  background: var(--uibackground);
  border: 1px solid var(--uibordercolor);
  outline: none; /* Remove outline */
  opacity: 0.8; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
  border-radius: var(--uiborderradius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) inset;
}

.rangestyle__rangebox input[type="range"]:hover {
  opacity: 1; /* Fully shown on mouse-over */
}
.rangestyle__rangebox input[type="range"]:focus {
  opacity: 1; /* Fully shown on focus */
  border: 1px solid var(--uiborderfocuscolor);
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.rangestyle__rangebox input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  width: var(--thumbwidth); /* Set a specific slider handle width */
  height: var(--thumbheight); /* Slider handle height */
  background: var(--thumbcolor);
  border-radius: var(--thumbborderradius);
  cursor: pointer; /* Cursor on hover */
  box-shadow: var(--thumbboxshadow);
}

.rangestyle__rangebox input[type="range"]::-moz-range-thumb {
  width: var(--thumbwidth); /* Set a specific slider handle width */
  height: var(--thumbheight); /* Slider handle height */
  background: var(--thumbcolor);
  border-radius: var(--thumbborderradius);
  cursor: pointer; /* Cursor on hover */
  box-shadow: var(--thumbboxshadow);
}

/*Modern checkbox style*/
.customcheckbox {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  width: auto;
  text-align: left;
  --checksize: 1.6rem;
  line-height: calc(var(--checksize) * 1.1);
  font-size: calc(var(--checksize) * 0.7);
}
.customcheckbox input[type="checkbox"] {
  opacity: 0;
}
.customcheckbox label {
  cursor: pointer;
  position: relative;
  --bordercolor: #6366f1;
  --checkcolor: #00d4ff;
  left: calc(var(--checksize) * 0.7);
  color: #e2e8f0;
}
.customcheckbox label::before,
.customcheckbox label::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.customcheckbox label::before {
  height: calc(var(--checksize) * 0.75);
  width: calc(var(--checksize) * 0.75);
  left: calc(var(--checksize) * -1);
  top: 0;
}
.customcheckbox input[type="checkbox"] + label::before {
  border: calc(var(--checksize) * 0.1) solid var(--bordercolor);
  background: rgba(30, 41, 59, 0.8);
  border-radius: 4px;
}
.customcheckbox input[type="checkbox"]:checked + label::before {
  background: rgba(99, 102, 241, 0.2);
  border-color: #00d4ff;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}
.customcheckbox input[type="checkbox"]:focus + label::before {
  outline: var(--bordercolor) auto calc(var(--checksize) * 0.13);
}
.customcheckbox label::after {
  height: calc(var(--checksize) * 0.2);
  width: calc(var(--checksize) * 0.45);
  border-left: calc(var(--checksize) * 0.1) solid var(--checkcolor);
  border-bottom: calc(var(--checksize) * 0.08) solid var(--checkcolor);
  transform: rotate(-50deg);
  left: calc(var(--checksize) * -0.86);
  top: calc(var(--checksize) * 0.25);
}
.customcheckbox input[type="checkbox"] + label::after {
  content: none;
}
.customcheckbox input[type="checkbox"]:checked + label::after {
  content: "";
}

/* Modern Article Section */
#article {
  padding: 4rem 10%;
  background: rgba(15, 23, 42, 0.95);
  margin: 3rem 0 0 0;
  border-top: 1px solid rgba(99, 102, 241, 0.3);
  backdrop-filter: blur(10px);
}

#article hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent);
  margin: 2rem 0 3rem 0;
}

#article p {
  color: #cbd5e1;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  max-width: 800px;
}

#article strong {
  color: #f1f5f9;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.2rem;
}

#article ul {
  color: #cbd5e1;
  margin: 1.5rem 0;
  padding-left: 0;
}

#article ul li {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.7;
}

#article ul li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #00d4ff;
  font-size: 0.8rem;
}

#article ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#article ul ul li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #94a3b8;
}

#article ul ul li::before {
  content: "•";
  color: #6366f1;
}

#article em {
  color: #38bdf8;
  font-style: italic;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  #article {
    padding: 2rem 5%;
  }
  
  .container {
    grid-template-columns: 1fr;
    margin: 0 2% 1rem 2%;
  }
  
  #info,
  #outputbox {
    padding: 1.5rem;
  }
}