/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */
body, html {
  margin: unset;
  padding: unset;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-image: url('background.svg');
  background-repeat: no-repeat;
  background-size: cover;
  color: rgb(var(--primary-off-white));
  font-family: trasandina, "sans-serif";
}

@font-face {
  font-family: trasandina;
  src: url('Trasandina-Book.woff2') format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: trasandina;
  src: url('Trasandina-Thin.woff2') format("woff2");
  font-weight: 300;
  font-display: block;
}
@font-face {
  font-family: trasandina;
  src: url('Trasandina-Medium.woff2') format("woff2");
  font-weight: 500;
  font-display: block;
}
:root {
  --primary-dark-blue: 11,15,20;
  --primary-moss: 20,75,70;
  --primary-off-white: 251,251,251;
  --secondary-tech-moss: 67, 255, 187;
  --secondary-light-grey: 219, 219, 219;
  --secondary-grey: 122, 122, 122;
}

h1 {
  color: #43FFBB;
}

.des-button {
  border-radius: 4px;
  background: rgba(var(--primary-dark-blue), 0.7);
  border: 1px solid rgba(var(--secondary-tech-moss), 0.7);
  color: rgb(var(--primary-off-white));
  padding: 0.5rem;
}
.des-button:hover:not(:disabled) {
  cursor: pointer;
  background: rgba(var(--secondary-tech-moss), 0.3);
}
.des-button:disabled {
  background: rgba(122, 122, 122, 0.4666666667);
  border-color: #7A7A7A;
}

.des-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
.des-input textarea, .des-input input {
  padding: 0.5rem;
  background: rgba(var(--secondary-tech-moss), 0.05);
  border-left: unset;
  border-top: unset;
  border-right: unset;
  border-bottom: 1px solid rgba(var(--secondary-tech-moss), 0.8);
  border-radius: 4px;
  color: rgb(var(--primary-off-white));
}
.des-input textarea:focus, .des-input input:focus {
  outline: 1px solid rgba(153, 153, 153, 0.6);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(var(--primary-dark-blue), 0.7);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--secondary-tech-moss), 0.6);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--secondary-tech-moss), 0.9);
}

::-webkit-scrollbar-corner {
  background: rgba(var(--primary-dark-blue), 0.7);
}

/*# sourceMappingURL=styles.css.map*/