@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  box-sizing: border-box;

  z-index: 0;
  font-family: Comfortaa, sans-serif;
}

html {
  --bg: white;
  /* --bg: rgb(32, 32, 32); */
  --primary-clr: #c4c4c4;
  /* --primary-clr: #3a3a3a; */
  --secondary-clr: #b2b2b2;
  /* --secondary-clr: #525252; */
  --secondary-clr-dark: #6d6d6d;
  /* --secondary-clr-dark: #7e7e7e; */
  --underline: rgba(0, 0, 0, 0.5);
  --hover-bg: rgba(0, 0, 0, 0.25);
  --hover-color: white;
  /* --hover-color: rgb(151, 151, 151); */
  --special-text-color: white;

  --btn-clr: white;

  --text-clr: black;
  /* --text-clr: rgb(219, 219, 219); */
  --transition: 0.5s ease-in-out;
}

html[theme="red"] {
  --bg: rgb(255, 221, 221);
  --primary-clr: #ffa6a6;
  --secondary-clr: #aa3939 !important;
  --secondary-clr-dark: #431010;

  --underline: rgba(0, 0, 0, 0.25);
  --hover-bg: rgba(170, 57, 57, 0.25);
}

html[theme="green"] {
  --bg: rgb(222, 255, 221);
  --primary-clr: #a6ffad;
  --secondary-clr: #29ac1f !important;
  --secondary-clr-dark: #0c5404;

  --underline: rgba(0, 0, 0, 0.25);
  --hover-bg: rgba(57, 170, 81, 0.25);
}

html[theme="dark"] {
  --bg: #232323;
  --primary-clr: #000000;
  --secondary-clr: #393939 !important;
  --secondary-clr-dark: #434343;
  --underline: rgba(137, 137, 137, 0.25);
  --hover-bg: rgba(133, 133, 133, 0.25);
  --hover-color: white;
  --text-clr: rgb(173, 173, 173);
}

body {
  background: var(--bg);
  min-height: 100vh;
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-content: center;
  justify-content: center;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: var(--text-clr);
}

nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  width: 100%;
  height: 100%;
}

.nav-link {
  list-style: none;
  /* padding: 1.5rem; */
  transition: var(--transition);
  font-size: 1rem;
  display: flex;
  align-content: center;
  justify-content: center;

  font-size: small;

  color: var(--text-clr) !important;
}

.hamburger {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1em;
  margin: 0.1em;
  font-size: larger;
  border-radius: 1em;
  transition: var(--transition);
  display: none;
}

.hamburger:hover,
.hamburger:focus {
  background: var(--hover-bg);
  color: var(--hover-color);
}

@media only screen and (max-width: 49em) {
  nav ul {
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
  }

  nav ul.closed {
    display: none;
  }

  nav ul.open {
    display: flex;
  }

  .nav-link {
    list-style: none;
    /* padding: 1.5rem; */
    transition: var(--transition);
    font-size: 1rem;
    display: flex;
    align-content: center;
    justify-content: flex-end;
    font-size: small;
    width: 100%;
  }

  .hamburger {
    /* display: block; */
    display: flex;
  }
}

.nav-link:hover,
.nav-link:focus-within,
.nav-link.active:hover,
.nav-link.active:focus-within {
  background: var(--hover-bg);
  color: var(--hover-color) !important;
  /* color: black !important; */
  cursor: pointer;
  text-decoration: underline;
}

.nav-link.active {
  background: var(--secondary-clr);
}

.nav-link a {
  display: block;
  padding: 1.5rem;
  width: 100%;
  text-align: end;

  /* color: var(--text-clr); */
}

nav {
  background: var(--primary-clr);
  min-height: 3.875em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.page-content {
  width: 100%;
  height: 100vh;
  top: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block-start: 8em;
  flex-direction: column;
}

button,
a.button {
  position: relative;
  padding: 0.75em 1rem;
  border: none;
  cursor: pointer;
  background-color: #0000;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-clr-dark);
  color: var(--hover-color);
  color: var(--btn-clr);
  border-radius: 0.25rem;
  gap: 0.5em;
  transition: var(--transition);

  font-weight: 700;
}

button .fi,
a.button .fi {
  color: inherit;
}

button:hover,
button:focus,
a.button:hover,
a.button:focus {
  background: var(--bg);
  color: var(--secondary-clr-dark);
  box-shadow: 0 1em 1em -1em var(--underline);
}

form {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* BUTTON SPECIFIC CLASSES */
.blue {
  background: rgb(44, 118, 255) !important;
}

.blue:hover,
.blue:focus {
  background: rgb(122, 168, 255) !important;
  color: var(--hover-color) !important;
}

.red {
  background: rgb(255, 88, 88) !important;
}

.red:hover,
.red:focus {
  background: rgb(255, 162, 162) !important;
  color: var(--hover-color) !important;
}

.green {
  background: rgb(0, 182, 106) !important;
}

.green:hover,
.green:focus {
  background: rgb(122, 216, 177) !important;
  color: var(--hover-color) !important;
}

.inverse {
  background: white !important;
  color: var(--secondary-clr-dark) !important;
}

.inverse:hover,
.inverse:focus {
  background: var(--secondary-clr-dark) !important;
  color: var(--hover-color) !important;
}

.yellow {
  background: rgb(255, 213, 0) !important;
  text-shadow: 1px 1px black;
  /* color: var(--secondary-clr-dark) !important; */
}

.yellow:hover,
.yellow:focus {
  background: rgb(255, 231, 109) !important;
  color: var(--hover-color) !important;
}

.purple {
  background: rgb(132, 0, 255) !important;
  /* text-shadow: 1px 1px black; */
  /* color: var(--secondary-clr-dark) !important; */
}

.purple:hover,
.purple:focus {
  background: rgb(193, 60, 255) !important;
  color: var(--hover-color) !important;
}

.green-inverse {
  /* background: var(--bg) !important;
  color: rgb(0, 182, 106);
  font-weight: bold;
  box-shadow: inset 0 0 0 0.12em rgb(0, 182, 106); */

  background: rgb(0, 182, 106) !important;
  color: white;
  font-weight: bold;
  box-shadow: inset 0 0 0 0.12em rgb(0, 182, 106);
}

.green-inverse:focus,
.green-inverse:hover {
  /* background:rgb(0, 182, 106) !important;
  color: white;
  font-weight: bold;
  box-shadow: inset 0 0 0 0.12em rgb(0, 182, 106); */
  background: var(--bg) !important;
  color: rgb(0, 182, 106);
  font-weight: bold;
  box-shadow: inset 0 0 0 0.12em rgb(0, 182, 106);
}

i {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fade-in {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
}

@keyframes fade-in {
  0% {
    opacity: 0%;
  }

  100% {
    opacity: 100%;
  }
}

select {
  border: 1px solid var(--primary-clr);
  border-radius: 0.25em;
  cursor: pointer;
  padding: 0.5em 1em;
  margin-inline-start: 0.5em;
  background: var(--secondary-clr);
}

h2 {
  width: 100%;
  margin-block: 1em 0.5em;
  padding-block: 0.5em;
  box-shadow: 0 2px 2px -2px var(--underline);
}

.special-text-0,
.special-text-1,
.special-text-2,
.special-text-3,
.special-text-4,
.special-text-5,
.special-text-6,
.special-text-7,
.special-text-8,
.special-text-9,
.special-text-10 {
  position: relative;
  padding: 0.3em;
  border-radius: 0.25em;
  line-height: 1.8;
  color: var(--special-text-color);
  text-shadow: 1px 1px black;
  min-width: 75px;
  min-height: 40px;

  text-shadow: none;
  font-weight: 700;

  /* text-shadow: 
  0px 1px var(--special-text-color),
  0px -1px var(--special-text-color),
  -1px 0px var(--special-text-color),
  1px 0px var(--special-text-color); */

  /* box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); */

  text-shadow: 1px 1px rgba(255, 255, 255, 0.3), -1px -1px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.5);
}

.special-text-0 {
  --special-text-color: white;
  /* background: #69b1f5; */
  /* color: var(--hover-color); */
  text-shadow: none;
}

.special-text-1 {
  --special-text-color: #69b1f5;
  /* background: #69b1f5; */
  /* color: var(--hover-color); */
}

.special-text-2 {
  /* color: #5cbf7d; */
  /* background: #5cbf7d; */
  --special-text-color: #5cbf7d;
}

.special-text-3 {
  /* color: #ffd730; */
  /* background: #ffd730; */
  --special-text-color: #ffd730;
}

.special-text-4 {
  /* color: #ff9643; */
  /* background: #ff9643; */
  --special-text-color: #ff9643;
}

.special-text-5 {
  /* color: #ff2a00; */
  /* background: #ff2a00; */
  --special-text-color: #ff2a00;
}

.special-text-6 {
  /* color: #ae00ff; */
  /* background: #ae00ff; */
  --special-text-color: #ae00ff;
}

.special-text-7 {
  /* color: #0c00b0; */
  /* background: #0c00b0; */
  --special-text-color: #0c00b0;
}

.special-text-8 {
  /* color: #bf5e34; */
  /* background: #bf5e34; */
  --special-text-color: #bf5e34;
}

.special-text-9 {
  /* color: #ff6ceb; */
  /* background: #ff6ceb; */
  --special-text-color: #ff6ceb;
}

.special-text-10 {
  /* color: #27b8b0; */
  /* background: #27b8b0; */
  --special-text-color: #27b8b0;
}

tr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

td {
  display: inline-flex;
  gap: 1em;
  margin-inline: 0.5em 1em;
}

/* .test::before,
.test::after {
  position: absolute;
  content: "";
  display: block;
  height: 1em;
  width: 1em;
  background-size: 100% 100%;
  background-image: url("../svg/test-tube.svg");
  background-repeat: no-repeat;
}

.test::before {
  right: 100%;
}

.test::after {
  left: 100%;
} */

input:disabled {
  cursor: not-allowed;
}

.footer {
  width: 100%;
  height: 2em;
  /* background: red; */
  position: absolute;
  bottom: 0;
  pointer-events: none;
}

.swal2-title {
  box-shadow: 0 0;
}

.empty {
  background: #eee;
  border-radius: 0.25em;
  width: 5em;
  height: 2.5em;

  display: flex;
  align-items: center;
  justify-content: center;
}

ion-icon {
  /* font-size: 32px; */
  aspect-ratio: 1;
}

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/Shapes.png);
  background-position: center;
  z-index: -1;
  filter: blur(5px);
  opacity: 35%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* .backdrop::after {
  
} */