style.css

@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/cascadia-code.min.css");

* {
  transition: all 0.5s ease;
  max-width: 100%;
}

@keyframes global {
  /* I did 100% of that manually. */

  0% {
    background-image: linear-gradient(to left, rgb(73, 151, 73), rgb(39, 216, 157));
  }

  2% {
    background-image: linear-gradient(to left, rgb(72, 150, 72), rgb(38, 215, 156));
  }

  4% {
    background-image: linear-gradient(to left, rgb(71, 149, 71), rgb(37, 214, 155));
  }

  6% {
    background-image: linear-gradient(to left, rgb(70, 148, 70), rgb(36, 213, 154));
  }

  8% {
    background-image: linear-gradient(to left, rgb(69, 147, 69), rgb(35, 212, 153));
  }

  10% {
    background-image: linear-gradient(to left, rgb(68, 146, 68), rgb(34, 211, 152));
  }

  12% {
    background-image: linear-gradient(to left, rgb(67, 145, 67), rgb(33, 210, 151));
  }

  14% {
    background-image: linear-gradient(to left, rgb(66, 144, 66), rgb(32, 210, 150));
  }

  16% {
    background-image: linear-gradient(to left, rgb(65, 143, 65), rgb(31, 209, 149));
  }

  18% {
    background-image: linear-gradient(to left, rgb(64, 142, 64), rgb(30, 208, 148));
  }

  20% {
    background-image: linear-gradient(to left, rgb(63, 141, 63), rgb(29, 207, 147));
  }

  22% {
    background-image: linear-gradient(to left, rgb(62, 140, 62), rgb(28, 206, 146));
  }

  24% {
    background-image: linear-gradient(to left, rgb(61, 139, 61), rgb(27, 205, 145));
  }

  26% {
    background-image: linear-gradient(to left, rgb(60, 138, 60), rgb(26, 204, 144));
  }

  28% {
    background-image: linear-gradient(to left, rgb(59, 137, 59), rgb(25, 203, 143));
  }

  30% {
    background-image: linear-gradient(to left, rgb(58, 136, 58), rgb(24, 202, 142));
  }

  32% {
    background-image: linear-gradient(to left, rgb(57, 135, 57), rgb(23, 201, 141));
  }

  34% {
    background-image: linear-gradient(to left, rgb(56, 134, 56), rgb(22, 200, 140));
  }

  36% {
    background-image: linear-gradient(to left, rgb(55, 133, 55), rgb(21, 199, 139));
  }

  38% {
    background-image: linear-gradient(to left, rgb(54, 132, 54), rgb(20, 198, 138));
  }

  40% {
    background-image: linear-gradient(to left, rgb(53, 131, 53), rgb(19, 197, 137));
  }

  42% {
    background-image: linear-gradient(to left, rgb(52, 130, 52), rgb(18, 196, 136));
  }

  44% {
    background-image: linear-gradient(to left, rgb(51, 129, 51), rgb(17, 195, 135));
  }

  46% {
    background-image: linear-gradient(to left, rgb(50, 128, 50), rgb(16, 194, 134));
  }

  48% {
    background-image: linear-gradient(to left, rgb(49, 127, 49), rgb(15, 193, 133));
  }

  50% {
    background-image: linear-gradient(to left, rgb(48, 126, 48), rgb(14, 192, 132));
  }

  52% {
    background-image: linear-gradient(to left, rgb(47, 125, 47), rgb(13, 191, 131));
  }

  54% {
    background-image: linear-gradient(to left, rgb(46, 124, 46), rgb(12, 190, 130));
  }

  56% {
    background-image: linear-gradient(to left, rgb(45, 123, 45), rgb(11, 189, 129));
  }

  58% {
    background-image: linear-gradient(to left, rgb(44, 122, 44), rgb(10, 188, 128));
  }

  60% {
    background-image: linear-gradient(to left, rgb(43, 121, 43), rgb(9, 187, 127));
  }

  62% {
    background-image: linear-gradient(to left, rgb(42, 120, 42), rgb(8, 186, 126));
  }

  64% {
    background-image: linear-gradient(to left, rgb(41, 119, 41), rgb(7, 185, 125));
  }

  66% {
    background-image: linear-gradient(to left, rgb(40, 118, 40), rgb(6, 184, 124));
  }

  68% {
    background-image: linear-gradient(to left, rgb(39, 117, 39), rgb(5, 183, 123));
  }

  70% {
    background-image: linear-gradient(to left, rgb(38, 116, 38), rgb(4, 182, 122));
  }

  72% {
    background-image: linear-gradient(to left, rgb(37, 115, 37), rgb(3, 181, 121));
  }

  74% {
    background-image: linear-gradient(to left, rgb(36, 114, 36), rgb(2, 180, 120));
  }

  76% {
    background-image: linear-gradient(to left, rgb(35, 113, 35), rgb(1, 179, 119));
  }

  78% {
    background-image: linear-gradient(to left, rgb(34, 112, 34), rgb(0, 178, 118));
  }

  80% {
    background-image: linear-gradient(to left, rgb(33, 111, 33), rgb(0, 177, 117));
  }

  82% {
    background-image: linear-gradient(to left, rgb(32, 110, 32), rgb(0, 176, 116));
  }

  84% {
    background-image: linear-gradient(to left, rgb(31, 109, 31), rgb(0, 175, 115));
  }

  86% {
    background-image: linear-gradient(to left, rgb(30, 108, 30), rgb(0, 174, 114));
  }

  88% {
    background-image: linear-gradient(to left, rgb(29, 107, 29), rgb(0, 173, 113));
  }

  90% {
    background-image: linear-gradient(to left, rgb(28, 106, 28), rgb(0, 172, 112));
  }

  92% {
    background-image: linear-gradient(to left, rgb(27, 105, 27), rgb(0, 171, 111));
  }

  94% {
    background-image: linear-gradient(to left, rgb(26, 104, 26), rgb(0, 170, 110));
  }

  96% {
    background-image: linear-gradient(to left, rgb(25, 103, 25), rgb(0, 169, 109));
  }

  98% {
    background-image: linear-gradient(to left, rgb(24, 102, 24), rgb(0, 168, 108));
  }

  100% {
    background-image: linear-gradient(to left, rgb(23, 101, 23), rgb(0, 167, 107));
  }
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow-x: hidden;
  max-width: 100%;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

#formdiv {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  margin-right: 20%;
  margin-left: 20%;
  border-radius: 25px;
  transition: all 0.5s ease;
  filter: drop-shadow(25px 25px 2.5px rgba(0, 0, 0, 0.35));
}

#formdiv:not(.prevented) {
  animation-name: revcurback;
  animation-duration: 0.75s;
}

#formdiv.prevented {
  --previous-height: 0px;
  --current-height: 250px;
  height: var(--current-height);
}

#formdivc {
  animation-name: revcurback;
  animation-duration: 0.75s;
}

@keyframes animate-form-height {
  0% {
    height: var(--previous-height);
  }

  100% {
    height: var(--current-height);
  }
}

h1.main {
  text-align: center;
  background: linear-gradient(to right bottom, rgb(209, 58, 209), rgb(54, 54, 170));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: calc();
}

p.main {
  text-align: center;
  background: linear-gradient(to right bottom, rgb(209, 58, 209), rgb(54, 54, 170));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: calc();
  font-size: 150%;
}

textarea#input {
  width: 60%;
  font-family: "Cascadia Code";
  font-size: 150%;
  border-radius: 15px;
  text-align: center;
  resize: horizontal;
  min-width: 60%;
  max-width: 95%;
  border-color: black;
  border-width: 0px;
  scrollbar-width: none;
  transition: color 0.5s ease;
  transition: background-color 0.5s ease;
}

#submit,
#forfile,
#clear,
#setbtn,
#cetbtn,
#okbtn,
#schlog,
#cchlog,
#suggest,
#save,
#download {
  font-family: "Cascadia Code";
  font-size: 130%;
  background-image: linear-gradient(to right bottom, rgb(219, 186, 219), rgb(107, 107, 175));
  border-radius: 50%;
  border-width: 0px;
  transition: color 0.5s ease;
  padding: 5px;
  transition: opacity 0.5s ease;
}

#suggest,
#save {
  border-radius: 10px;
  transition: all 0.5s ease;
}

#quiz {
  text-align: start;
}

input[type="radio"] {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  vertical-align: middle;
  border-width: 0px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: all 1s ease;
}

input[type="radio"]:not(:checked) {
  background-color: rgb(255, 255, 255);
}

input[type="radio"]:checked {
  background-color: rgb(60, 168, 163);
}

.checkbox-round:disabled {
  cursor: not-allowed;
}

#okbtn {
  width: 40px;
  height: 40px;
}

#submit:disabled,
#forfile.disableClass,
#setbtn:disabled,
#schlog:disabled,
#save:disabled,
#download:disabled {
  opacity: 0.5;
}

#forfile {
  display: inline-block;
}

#clear {
  position: fixed;
  bottom: 10px;
  height: 45px;
  width: 45px;
}

/* Settings+ */

#setbtn,
#cetbtn,
#schlog,
#cchlog,
#download {
  height: 35px;
  width: 35px;
}

#setbtn:hover:enabled,
#cetbtn:hover,
#okbtn:hover,
#schlog:hover,
#cchlog:hover,
#suggest:hover,
#clear:hover,
#save:hover:enabled,
#download:hover:enabled {
  cursor: pointer;
}

.change {
  text-align: start;
  white-space: pre;
  text-wrap: wrap;
}

#settings,
#cookies,
#changelog {
  background-color: #9df;
  transition: opacity 0.5s ease;
  border-width: 0px;
  border-radius: 35px;
  top: 0px;
  text-align: center;
  z-index: 1;
}

#settings,
#cookies {
  position: fixed;
  top: 0px;
}

#changelog {
  position: absolute;
  width: 50%;
}

#cookies {
  animation: revcurback 0.5s;
  width: 90%;
}

@keyframes settingsOpen {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes settingsClose {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

fieldset {
  border-radius: 25px;
}

/* Context menu */
a.context {
  text-decoration: none;
  font-size: larger;
}

a.context:hover {
  cursor: pointer;
}

#contextmenu {
  transition: none;
  position: absolute;
  background-color: rgba(125, 125, 125, 0.5);
  filter: drop-shadow(12px 12px 2px rgba(25, 25, 25, 0.5));
  backdrop-filter: blur(5px);
  border-radius: 20px;
  width: fit-content;
  z-index: 0;
  transition: all 0.5s;
}

hr {
  border: 0;
  border-top: 2px solid rgba(55, 55, 55, 0.4);
}

/* End */

.loading {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: Loading 0.5s linear infinite;
  float: right;
  margin-right: 2%;
}

@keyframes Loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

select {
  font-family: "Cascadia Code";
  background-color: #9df;
  scrollbar-width: none;
  width: 240px;
}

option:checked,
option:hover {
  box-shadow: 0 0 10px 100px #6ab inset;
}

option {
  border-width: 1px;
}

#model {
  margin-top: 5%;
  border-width: 1px;
  border-radius: 10px;
}

#length {
  border-width: 0px;
  border-radius: 1pc;
}

#usernameInput {
  border-radius: 1pc;
  border-width: 0px;
}

#birthday {
  border-width: 0px;
  border-radius: 5px;
  font-family: "Cascadia Code";
}

/* End */

#submit:hover:enabled,
#forfile:hover:not(.disableClass) {
  cursor: pointer;
}

@keyframes webChange {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.previous {
  animation: webChange 2s ease forwards;
}

#tab {
  border-radius: 5px;
  color: rgb(0, 0, 0);
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease;
}

#ptab {
  color: rgb(0, 0, 0);
  transition: color 0.5s ease;
}

#darklight {
  text-align: start;
  border-radius: 0px 20px 0px 0px;
  margin-top: 5px;
  margin-left: -1%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 130%;
  background-color: rgb(0, 255, 149);
  border-width: 0px;
  width: 12pc;
  transition: all 0.5s ease;
  filter: drop-shadow(15px 15px 2.5px rgba(0, 0, 0, 0.35));
}

#darklight:disabled {
  pointer-events: none;
}

#darklight:hover:enabled {
  cursor: pointer;
}

ul#end {
  filter: drop-shadow(15px 15px 2.5px rgba(0, 0, 0, 0.35));
  margin-top: -0.1%;
  margin-left: -1%;
  list-style-type: none;
  padding: 0px;
  width: 12pc;
  background-color: rgb(0, 255, 149);
  transition: all 0.5s ease;
}

li {
  filter: drop-shadow(15px 15px 1pc rgba(0, 0, 0, 0.35));
}

li a {
  margin-left: -10px;
  font-size: 130%;
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  transition: color 0.5s ease;
}

ul#end {
  border-radius: 0px 0px 20px 0px;
}

@keyframes current {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 0.95;
  }

  20% {
    opacity: 0.9;
  }

  30% {
    opacity: 0.85;
  }

  40% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.75;
  }

  60% {
    opacity: 0.7;
  }

  70% {
    opacity: 0.65;
  }

  80% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.55;
  }

  100% {
    opacity: 0.5;
  }
}

a.current {
  opacity: 0.5;
  transition: color 0.5s ease;
  animation-name: current;
  animation-duration: 0.5s;
}

#aa {
  font-size: 200%;
  text-decoration: underline;
  color: blue;
  transition: color 0.5s ease;
}

#aa:hover {
  cursor: pointer;
  color: rgb(112, 112, 112);
}

@keyframes curimg {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 0.95;
  }

  20% {
    opacity: 0.9;
  }

  30% {
    opacity: 0.85;
  }

  40% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.75;
  }

  60% {
    opacity: 0.7;
  }

  70% {
    opacity: 0.65;
  }

  80% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.55;
  }

  100% {
    opacity: 0.5;
  }
}

@keyframes curback {
  0% {
    opacity: 1;
  }

  5% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  15% {
    opacity: 0.85;
  }

  20% {
    opacity: 0.8;
  }

  25% {
    opacity: 0.75;
  }

  30% {
    opacity: 0.7;
  }

  35% {
    opacity: 0.65;
  }

  40% {
    opacity: 0.6;
  }

  45% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.5;
  }

  55% {
    opacity: 0.45;
  }

  60% {
    opacity: 0.4;
  }

  65% {
    opacity: 0.35;
  }

  70% {
    opacity: 0.3;
  }

  75% {
    opacity: 0.25;
  }

  80% {
    opacity: 0.2;
  }

  85% {
    opacity: 0.15;
  }

  90% {
    opacity: 0.1;
  }

  95% {
    opacity: 0.05;
  }

  100% {
    opacity: 0;
  }
}

@keyframes revcurback {
  100% {
    opacity: 1;
  }

  95% {
    opacity: 0.95;
  }

  90% {
    opacity: 0.9;
  }

  85% {
    opacity: 0.85;
  }

  80% {
    opacity: 0.8;
  }

  75% {
    opacity: 0.75;
  }

  70% {
    opacity: 0.7;
  }

  65% {
    opacity: 0.65;
  }

  60% {
    opacity: 0.6;
  }

  55% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.5;
  }

  45% {
    opacity: 0.45;
  }

  40% {
    opacity: 0.4;
  }

  35% {
    opacity: 0.35;
  }

  30% {
    opacity: 0.3;
  }

  25% {
    opacity: 0.25;
  }

  20% {
    opacity: 0.2;
  }

  15% {
    opacity: 0.15;
  }

  10% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.05;
  }

  0% {
    opacity: 0;
  }
}

.curimg {
  animation: curimg 0.5s;
}

@media (max-width: 720px) and (min-width: 481px) {
  #formdiv {
    width: 400px;
    margin: auto;
  }
}

@media (max-width: 480px) and (min-width: 300px) {
  #formdiv {
    width: 300px;
    margin: auto;
  }
}

@media (max-width: 300px) and (min-width: 100px) {
  #formdiv {
    width: 90%;
    margin: auto;
  }
}

.task {
  margin: auto;
  background-color: rgba(0, 255, 213, 0.3);
  border-radius: 20px;
  width: 80%;
  transition: color 1s ease-in-out;
}

.checkbox-round {
  width: 1.5em;
  height: 1.5em;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  vertical-align: middle;
  border-width: 0px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: background-color 1s ease;
}

.checkbox-round:checked {
  background-color: rgb(60, 168, 163);
}

.checkbox-round:disabled {
  cursor: not-allowed;
}

.label {
  transition: color 2.5s ease;
}

.tskinp {
  border-width: 0px;
  border-radius: 1pc;
  text-align: center;
  width: 90%;
}

#p {
  transition: color 1s ease-out;
}

.tskinp {
  transition: color 0.5s ease;
  transition: all 0.5s ease;
}

table,
th,
td {
  border: 1px solid;
}

table {
  border-radius: 5px;
}

#record {
  animation: reverse opacityrecord 0.5s;
  border-radius: 5px;
  border-width: 0px;
}

#points {
  transition: color 1s ease;
}

#pfil {
  transition: color 0.5s ease;
}

.output {
  text-align: start;
  background-color: rgba(100, 100, 100, 0.3);
}

.output a {
  color: blue;
}

.input {
  text-align: end;
  background-color: rgba(100, 100, 255, 0.3);
}

.input,
.output {
  font-size: 200%;
  transition: color 0.5s ease;
  transition: background-color 0.5s ease;
  text-wrap: wrap;
}

.textcontainer:not(#textcontainer) {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  width: 200px;
  margin-right: 0px;
  margin-left: auto;
}

#inputDIV {
  margin: auto;
  position: sticky;
  right: 0px;
  left: 0px;
  top: 0px;
  bottom: -125px;
  opacity: 0.7;
  transition: all 0.5s ease;
}

#textcontainer {
  width: 30%;
  margin: auto;
}

.image {
  border-radius: 10px;
  width: 200px;
}

.input:hover {
  background-color: rgba(150, 150, 255, 0.3);
}

.output:hover {
  background-color: rgba(150, 150, 150, 0.3);
}