@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

:root {
  /* THEME COLORS */
  --color-theme-primary-1: #005a2b;
  --color-theme-primary-2: #006d42;
  --color-theme-primary-3: #00b456;
  --color-theme-secondary-1: #002d16;
  --color-theme-secondary-2: #00a899;
  --color-theme-secondary-3: #00805c;

  --color-theme-disabled: #6e948d;
  --color-theme-error: #e92d2d;

  --color-theme-button-primary: #009479;
  --color-theme-button-secondary: #00bcbb;
  --color-theme-button-disabled: #6e948d;
  --color-theme-button-warning: #e92d2d;

  --color-theme-flash-message-1: #e92d2d;
  --color-theme-flash-message-2: #5e1414;

  --color-404-error: #e92d2d;
  --color-404-warning: #bf6830;
  --color-404-almost: #d9a630;
  --color-404-ready: #00805c;

  /* GENERIC COLORS */
  --color-black: #000000;
  --color-gray: #808080;
  --color-silver: #b8b8b8;
  --color-super-silver: #eeeeee;
  --color-white: #ffffff;

  /* COLORS WITH CUSTOM OPACITY */
  --color-black-25: #00000040;
  --color-black-30: #0000004d;
  --color-black-50: #00000080;
  --color-black-100: #00000000;
  --color-gray-50: #80808080;
  --color-white-25: #ffffff40;
  --color-white-75: #ffffffbf;

  /* EXTRA COLORS */
  --color-black-80: #00000080;
  --color-button-background: #eef1ee;
  --color-button-disabled-bottom: #2d2d2d;
  --color-button-disabled-top: #233b2f;
  --color-button-preview-bottom: #16b979;
  --color-button-preview-top: #1da45c;
  --color-container: #aaaaaa;
  --color-login-error: #800000;
  --color-logout-gradient-bottom: #a93600;
  --color-logout-gradient-top: #981f00;
  --color-main-background: #eef1ee;
  --color-white-50: #ffffff80;

  /* FONTS */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Orbitron', sans-serif;
}

body {
  background: var(--color-main-background);
  margin: 0;
}

button {
	background: linear-gradient(to bottom, var(--color-theme-primary-1) 5%, var(--color-theme-primary-2) 100%);
	background-color: var(--color-theme-primary-1);
	border-radius: 0.375rem;
	border: 0.0625rem solid var(--color-theme-primary-1);
	display: inline-block;
	cursor: pointer;
	color: var(--color-white);
  font: 600 0.75rem var(--font-secondary);
	padding: 6px 24px;
	text-decoration: none;
	text-shadow: 0 0.0625rem 0 var(--color-theme-primary-2);
}
button:hover {
	background: linear-gradient(to bottom, var(--color-button-preview-top) 5%, var(--color-button-preview-bottom) 100%);
	background-color :var(--color-button-preview-top);
}
button:active {
	position: relative;
	top: 0.0625rem;
}
button:disabled {
	background: linear-gradient(to bottom, var(--color-button-disabled-top) 5%, var(--color-button-disabled-bottom) 100%);
	cursor: not-allowed;
}

h2 {
	color: var(--color-theme-primary-1);
  font: 600 1rem var(--font-secondary);
	margin: 0 auto;
}

input {
  border: 0.125rem solid var(--color-theme-primary-1);
  border-radius: 0.5rem;
  height: 1.5rem;
  padding: 0.25rem 0.375rem;
}

p {
  color: var(--color-theme-primary-1);
  font: 400 0.75rem var(--font-primary);
}

textarea {
  border: 0.125rem solid var(--color-theme-primary-1);
  border-radius: 0.5rem;
	height: 4.5rem;
	padding: 0.25rem 0.375rem;
	resize: none;
	width: calc(100% - 1rem);
}

.cntr-labels {
  display: none;
}

.cntr-login {
  display: flex;
  flex-direction: column;
}

.cntr-nonmobile-preview {
  display: none;
}

.frm-create {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
  position: relative;
  width: calc(100vw - 1rem);
}

@media (min-width: 768px) {
	button, p {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
  .frm-create {
    min-width: 63rem;
    max-width: 90rem;
  }
}

#loader {
  background: var(--color-white-50);
  display: flex;
  height: 100vh;
  margin: auto;
  position: absolute;
  width: 100vw;
  z-index: 3;
}

.triple-spinner {
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  border-top: 0.25rem solid var(--color-theme-primary-1);
  display: block;
  height: 6.25rem;
  margin: auto;
  position: relative;
  width: 6.25rem;
}

.triple-spinner::before,
.triple-spinner::after {
  border: 0.25rem solid transparent;
  border-radius: 50%;
  content: "";
  position: absolute;
}
.triple-spinner::before {
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.75s linear infinite;
  border-top-color: var(--color-theme-primary-2);
  bottom: 0.3125rem;
  left: 0.3125rem;
  right: 0.3125rem;
  top: 0.3125rem;
}
.triple-spinner::after {
  -webkit-animation: spin 0.75s linear infinite;
  animation: spin 0.875s linear infinite;
  border-top-color: var(--color-theme-primary-3);
  bottom: 0.9375rem;
  left: 0.9375rem;
  right: 0.9375rem;
  top: 0.9375rem;
}

@media (min-width: 768px) {
  .cntr-nonmobile-preview {
    aspect-ratio: 3 / 4;
    background: var(--color-container);
    border-radius: 0.5rem;
    display: flex;
    padding: 0.5rem;
    width: 34%;
  }

  .triple-spinner {
    height: 7.8125rem;
    width: 7.8125rem;
  }
}

@media (min-width: 1024px) {
  .cntr-labels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 10%;

    label {
      align-items: center;
      color: var(--color-theme-primary-1);
      display: flex;
      font: 400 1rem "Orbitron", sans-serif;
      height: 2.25rem;
      justify-content: flex-end;
    }
    label:last-child {
      align-items: normal;
      flex-grow: 1;
    }
  }

  .cntr-nonmobile-preview {
    width: 30%;
  }

  .triple-spinner {
    height: 9.375rem;
    width: 9.375rem;
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}