html, body {font-size: 18px; color: var(--clr-text); margin: 0px; padding: 0px; height: 100%; overflow: hidden; font-family: 'Social', sans-serif;} 
body {position: relative; background-color: var(--clr-bg, #fff);}

* {margin: 0; padding: 0; box-sizing: border-box;}
a, a:link, a:visited {text-decoration: none; color: inherit;} 

p, a, h1, h2, h3, h4, ul, ul li, span, .btn {font-family: 'Social', sans-serif; text-align: left; font-feature-settings: "ss01","ss02", "ss05";}

p, ul, ul li {font-variation-settings: 'wght' 600, 'wdth' 7, 'ital' 0; font-size: 1rem;}
h1 {font-variation-settings: 'wght' 800, 'wdth' 7, 'ital' 0; font-size: 3.5rem;}
h2 {font-variation-settings: 'wght' 750, 'wdth' 7, 'ital' 0; font-size: 1.4rem;}
h4 {font-variation-settings: 'wght' 750, 'wdth' 7, 'ital' 0; font-size: 1.75rem;}

.spot {position: relative; padding: 2px 12px; border-radius: 5rem; background-color: var(--clr-text); color: #fff;}

@font-face {
  font-family: 'Social';
  src: url('files/fonts/ABCSocialPlusVariableEdu.woff2') format('woff2-variations'),
        url('files/fonts/ABCSocialPlusVariableEdu.woff') format('woff-variations');
  font-weight: 100 900;
}

:root {
  --clr-bg: #fff;
  --clr-dark-bg: #181818;

  --clr-alert: #d11313;

  --clr-text: #1a1a1a;

  --clr-grey: rgba(240, 240, 240, .4);
  --clr-grey-600: #d0d0d0;
  --clr-grey-700: #f3f3f3;
  --clr-grey-900: #2e2e2e;


  --clr-dark-800: #323232;


  --clr-btn-hover: #f1f1f1;
  --clr-btn-dark: #151515;
  
  --max-width: 1440px;
  --tile-gap: 1.5rem;
  --panel-top-padding: 3rem;
  /* Höhe eines Tiles:
     2 Tiles übereinander => Höhe ungefähr Fensterhöhe / 2,
     minus ein bisschen Platz für den Abstand dazwischen. */
  --tile-height: calc((100vh  - (var(--panel-top-padding) * 2)  - (var(--tile-gap) * 3)) / 2);
}


.gradient-grey {background: linear-gradient(to bottom, rgba(240, 240, 240, 0) 20%, rgba(240, 240, 240, .4) 40%);}
.gradient-blue {background: linear-gradient(to bottom, rgba(185, 76, 219, 0) 15%, rgba(185, 76, 219, 0.2) 65%, rgba(107, 188, 247, 0.3) 100%);}
.animated-gradient {background: linear-gradient(45deg, rgb(185, 76, 219) 0%, rgb(10, 120, 230) 100%); background-size: 200% 200%; animation: textGradient 4s ease infinite; -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block;}
.animated-gradient-bg {  background: linear-gradient(45deg,rgb(185, 76, 219) 30%,rgb(10, 120, 230) 100%); background-size: 200% 200%; animation: textGradient 6s ease infinite; -webkit-background-clip: border-box; background-clip: border-box; color: #fff;}

@keyframes textGradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

.shadow {box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}

.app {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.btn {
  background-color: #fff;
  color: var(--clr-text);
  font-size: 1rem;
  font-variation-settings: 'wght' 650, 'wdth' 7, 'ital' 0;
  padding: 7.5px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5rem;
  transition: transform 300ms ease-in-out, background-color 300ms ease-in-out;
}

.btn:hover {background-color: var(--clr-btn-hover); transition: background-color 300ms ease-in-out;}

.btn.scale:hover {transform: scale(1.065); transition: transform 300ms ease;}
.btn.dark {background-color: var(--clr-dark-bg); color: #fff;}
.btn.dark:hover {background-color: var(--clr-grey-900);}
.btn.shadow {box-shadow: rgba(0, 0, 0, 0.20) 0px 5px 15px 0px;}

/* button white */
.btn.white {background-color: #fff; border: 1px solid var(--clr-grey-600); transition: transform 300ms ease-in-out, background-color 300ms ease-in-out;}
.btn.white:hover{background-color: var(--clr-grey-700); transition: transform 300ms ease-in-out, background-color 300ms ease-in-out;}

/* button small w/ text + icon */
.category-anchor {
  display: flex;
  align-items: center;
  font-size: .6rem;
  gap: .3rem;
  padding: 5px 11px;
}

.category-anchor-label {opacity: .75;}
.category-anchor .icon {width: 20px; height: 20px;} 


/* button w/ ui icon */
.btn.icon, .btn.icon-small {
  padding: 0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

}

.btn.icon {
  width: 2.5rem;
  height: 2.5rem;
}

.btn.icon-small {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  box-shadow: rgba(0, 0, 0, 0.10) 0px 5px 15px 0px;
}

.btn.icon-small .icon {width: 17.5px; height: 17.5px;}

/* button small */
.btn.small {font-size: .6rem; padding: 5px 15px;}


#add {
  width: 1rem;
  height: 1rem;
}

#category {
  width: 1.25rem;
  height: 1.25rem;
}

#logout {
  width: 1.25rem;
  height: 1.25rem;
}

.icon {width: 30px; height: 30px;}
.icon-large {width: 100px; height: 100px;}

/* Alles, was klickbar sein soll, darf wieder Events bekommen */
.app .btn,
.app .add-project-overlay,
.app .add-project-form,
.app .popup-container,
.app .confirm-overlay,
.app .confirm-dialog,
.app .form-details,
.app form,
.app input,
.app textarea,
.app label,
.app h2 {
  pointer-events: auto;
}

.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.nav.top {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem 1.5rem 0 1.5rem;
}

.nav.top .right {
  display: flex;
  gap: .5rem;
}

.nav.top .left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #fff;
  gap: .6rem;
  border-radius: 5rem;
  height: 2.5rem;
  padding: 0 15px 0 12.5px;
}

.nav.top .left h1 {
  font-size: 1rem;
  margin-top: 2px;
}

.nav.top .left #dino, .login-card #dino {
  width: 30px;
}

.nav.center {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

#system-info {
  min-height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.system-message {
  font-size: 0.7rem;
  font-variation-settings: 'wght' 650, 'wdth' 7, 'ital' 0;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: #fff;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 180ms ease-out;
  pointer-events: none;
}

@keyframes systemMessageBounceIn {
  0% {
    opacity: 0;
    transform: translateY(-18px);
  }
  60% {
    opacity: 1;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes systemMessageBounceOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(3px);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px);
  }
}

.system-message-visible .system-message {
  opacity: 1;
  animation: systemMessageBounceIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.system-message-hiding .system-message {
  animation: systemMessageBounceOut 260ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nav.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 1.5rem 1rem 1.5rem;
}

.nav.bottom .left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #fff;
  gap: .5rem;
  border-radius: 5rem;
  height: 2.5rem;
  padding: 0 7.5px;
}

.add-project-overlay,
.confirm-overlay {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(24, 24, 24, 0.3);
  backdrop-filter: blur(5px);
  z-index: 9999;
}

/** popup [check] **/

.popup-container {
  width: 1000px;
  max-height: 950px;
  position: relative;
  font-family: 'Social', sans-serif;
  background-color: var(--clr-bg);
  border-radius: 25px;
  padding: 1.5rem 1.5rem;
}

.popup-container .spacer, .confirm-dialog .spacer, .spacer  {
  margin-bottom: 1rem;
}

.popup-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
}

.popup-subhead {
  text-align: center;
  opacity: .75;
  font-size: 0.6rem;
  margin: .25rem 0 .75rem 0;
}

.topbar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.confirm-dialog {
  max-width: 450px;
  width: 90%;
  text-align: center;
  background-color: var(--clr-bg);
  border-radius: 25px;
  padding: 1rem 1.25rem;
}

.confirm-dialog .btn {
  min-width: 9rem;
  text-align: center;
}

.confirm-dialog .bottombar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.confirm-dialog .topbar {
  text-align: center;
  justify-content: space-between;
  padding: .5rem 0;
}

/** form [check] **/

.form-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.form-details label, .login-row label, .form-row label {
  font-size: 0.6rem;
  opacity: .75;
  font-variation-settings: 'wght' 600, 'wdth' 5, 'ital' 0;
}

.form-row, .login-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 1rem;
  width: 100%;
}


.form-row-double {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.form-row .btn {
  align-self: flex-start;
}

#change-category .form-row:last-child {
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.form-details .form-row:last-child {
  margin-bottom: 0;
  flex-direction: row-reverse;
}



.form-details input,
.form-details textarea,
.form-details select,
#change-category-select {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--clr-grey-600);
  font: inherit;
  font-size: .8rem;
  font-variation-settings: 'wght' 600, 'wdth' 7, 'ital' 0;
  width: 100%;
}

#change-category-input {
  width: 85%;
  margin: 0 auto;
}

#page-category:invalid {
  opacity: .6;
}

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.file-input-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.file-name {
  font-size: 0.6rem;
  font-variation-settings: 'wght' 600, 'wdth' 7, 'ital' 0;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-error, .login-error {
  font-variation-settings: 'wght' 600, 'wdth' 7, 'ital' 0;
  font-size: 0.6rem;
  color: var(--clr-alert);
}

.file-error {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-area {margin: 0 auto 0.5rem auto;}


/** matrix **/

.matrix {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding-top: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none; 
}

.matrix::-webkit-scrollbar {display: none;}

.matrix::before {
	--line: rgba(240, 240, 240, .35);
	content: "";
	height: 100vh;
	width: 100vw;
	position: fixed;
	background:
		linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
		linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
	mask: linear-gradient(-15deg, transparent 30%, white);
	top: 0;
	z-index: -1;
}

.matrix-inner {
  width: fit-content;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.panel {
  height: 100vh;
  min-width: fit-content;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
  padding: var(--panel-top-padding) 8rem var(--panel-top-padding) 4rem;
}

.description, .categorie-description {
  margin: 0;
  font-size: .6rem;
  opacity: .75;
  max-width: 340px;
}

.categorie-description {
  margin: 0;
  max-width: 40rem;
  max-width: 200px;
}

.tile-grid {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, var(--tile-height));
  grid-auto-columns: calc(var(--tile-height) * (2 / 3));
  row-gap: var(--tile-gap);
  column-gap: var(--tile-gap);
  width: -webkit-max-content;
  width: max-content;
  flex: 0 0 auto;
}

/** tiles **/

.tile {
  position: relative;
  flex: 0 0 auto;
  height: var(--tile-height);
  width: calc(var(--tile-height) * (2 / 3));

  background: #ffffff;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: translateY(10px);
}

.tile.tile-visible {
  animation: tileFadeIn 350ms ease-out forwards;
}

@keyframes tileFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-actions {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 2;
  opacity: 0;
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.tile:hover .tile-actions {
  opacity: 1;
  pointer-events: auto;
}

.tile-delete-btn,
.tile-move-btn {
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.tile-image-wrap {
  position: relative;
  flex: 1;
  min-height: 45%;
  max-height: 55%;
  overflow: hidden;
  background: #ddd;
}

.tile-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile-details {
  flex: 1;
  padding: 0.75rem 0.9rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tile-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.tile-description {
  font-size: 0.6rem;
  opacity: .75;
  line-height: 1.1;
  margin: 0;
  color: var(--clr-text);
}

.tile-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tag {
  font-size: 0.5rem;
  padding: 0.15rem 0.4rem;
  border-radius: 5px;
  background: var(--clr-grey-600);
  white-space: nowrap;
  color: #fff;
}

/** categories (popup) [check ongoing] **/

.categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.categories-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  padding: 0.35rem 0.5rem 0.35rem 1.25rem;
  font-size: 0.8rem;
  gap: 0.4rem; 

  border-radius: 0.75rem;
  border: 1px solid var(--clr-grey-600);  
}

.categories-item.is-editing {
  background-color: var(--clr-grey-700);
}

.categories-actions {
  display: flex;
  justify-content: flex-start;
}

.category-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.category-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.category-edit-extra {
  overflow: hidden;
  max-height: 0;
  opacity: 0;

  margin-top: 0;

  transition:
    max-height 250ms ease,
    opacity 200ms ease,
    margin-top 200ms ease;
}

.categories-item.is-editing .category-edit-extra {
  max-height: 200px;
  opacity: 1;
  margin-top: 0.35rem;
}

.category-description-label {
  display: block;
  font-size: 0.55rem;
  margin-bottom: 0.15rem;
  font-variation-settings: 'wght' 600, 'wdth' 5, 'ital' 0;
}

.category-icon-select,
.category-description-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--clr-grey-600);
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.7rem;
  resize: vertical;
  min-height: 2.2rem;
}


.category-edit-inner label {
  font-size: 0.6rem;
  font-variation-settings: 'wght' 600, 'wdth' 5, 'ital' 0;
}


.category-edit-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0 0 0;
}

.category-name,
.category-name-input {
  flex: 1;
  text-align: left;
}

.category-name-input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font: inherit;
}

.category-name {
  font-size: 1rem;
  font-variation-settings: 'wght' 650, 'wdth' 7, 'ital' 0;
}