@import url('components/button-popup.css');
@import url('components/alerts.css');
@import url('components/fab-btn.css');
@import url('components/top-nav.css');
@import url('components/bottom-nav.css');

@import url('components/custom-modal.css');

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Quicksand:700|Quicksand:400');

:root[data-theme="light"] {
  --text-50: #eef5f7;
  --text-100: #dcebef;
  --text-200: #b9d7df;
  --text-300: #96c3cf;
  --text-400: #73b0bf;
  --text-500: #509caf;
  --text-600: #407d8c;
  --text-700: #305d69;
  --text-800: #203e46;
  --text-900: #101f23;
  --text-950: #081011;

  --background-50: #f2f2f2;
  --background-100: #e6e6e6;
  --background-200: #cccccc;
  --background-300: #b3b3b3;
  --background-400: #999999;
  --background-500: #808080;
  --background-600: #666666;
  --background-700: #4d4d4d;
  --background-800: #333333;
  --background-900: #1a1a1a;
  --background-950: #0d0d0d;

  --primary-50: #e9fbf5;
  --primary-100: #d4f7eb;
  --primary-200: #a9efd8;
  --primary-300: #7ee7c4;
  --primary-400: #53dfb0;
  --primary-500: #28d79d;
  --primary-600: #20ac7d;
  --primary-700: #18815e;
  --primary-800: #10563f;
  --primary-900: #082b1f;
  --primary-950: #041610;

  --secondary-50: #ecf4f8;
  --secondary-100: #dae9f1;
  --secondary-200: #b5d4e3;
  --secondary-300: #8fbed6;
  --secondary-400: #6aa9c8;
  --secondary-500: #4593ba;
  --secondary-600: #377695;
  --secondary-700: #295870;
  --secondary-800: #1c3b4a;
  --secondary-900: #0e1d25;
  --secondary-950: #070f13;

  --accent-50: #eaf7fa;
  --accent-100: #d5eff6;
  --accent-200: #acdfec;
  --accent-300: #82cfe3;
  --accent-400: #59c0d9;
  --accent-500: #2fb0d0;
  --accent-600: #268da6;
  --accent-700: #1c697d;
  --accent-800: #134653;
  --accent-900: #09232a;
  --accent-950: #051215;

  --warning-50:  #fdf7e8;
  --warning-100: #fbedcf;
  --warning-200: #f7da9f;
  --warning-300: #f3c86f;
  --warning-400: #efb53f;
  --warning-500: #daa618;
  --warning-600: #b88714;
  --warning-700: #956910;
  --warning-800: #734b0c;
  --warning-900: #502d08;
  --warning-950: #281704;

  --danger-50:  #f9ebeb;
  --danger-100: #f3d6d6;
  --danger-200: #e7adad;
  --danger-300: #dc8585;
  --danger-400: #d05c5c;
  --danger-500: #c93e3e;
  --danger-600: #a43232;
  --danger-700: #7d2626;
  --danger-800: #561919;
  --danger-900: #2f0d0d;
  --danger-950: #170606;


}
:root[data-theme="dark"] {
  --text-50: #081011;
  --text-100: #101f23;
  --text-200: #203e46;
  --text-300: #305d69;
  --text-400: #407d8c;
  --text-500: #509caf;
  --text-600: #73b0bf;
  --text-700: #96c3cf;
  --text-800: #b9d7df;
  --text-900: #dcebef;
  --text-950: #eef5f7;

  --background-50: #0d0d0d;
  --background-100: #1a1a1a;
  --background-200: #333333;
  --background-300: #4d4d4d;
  --background-400: #666666;
  --background-500: #808080;
  --background-600: #999999;
  --background-700: #b3b3b3;
  --background-800: #cccccc;
  --background-900: #e6e6e6;
  --background-950: #f2f2f2;

  --primary-50: #041610;
  --primary-100: #082b1f;
  --primary-200: #10563f;
  --primary-300: #18815e;
  --primary-400: #20ac7d;
  --primary-500: #28d79d;
  --primary-600: #53dfb0;
  --primary-700: #7ee7c4;
  --primary-800: #a9efd8;
  --primary-900: #d4f7eb;
  --primary-950: #e9fbf5;

  --secondary-50: #070f13;
  --secondary-100: #0e1d25;
  --secondary-200: #1c3b4a;
  --secondary-300: #295870;
  --secondary-400: #377695;
  --secondary-500: #4593ba;
  --secondary-600: #6aa9c8;
  --secondary-700: #8fbed6;
  --secondary-800: #b5d4e3;
  --secondary-900: #dae9f1;
  --secondary-950: #ecf4f8;

  --accent-50: #051215;
  --accent-100: #09232a;
  --accent-200: #134653;
  --accent-300: #1c697d;
  --accent-400: #268da6;
  --accent-500: #2fb0d0;
  --accent-600: #59c0d9;
  --accent-700: #82cfe3;
  --accent-800: #acdfec;
  --accent-900: #d5eff6;
  --accent-950: #eaf7fa;

  --warning-950: #281704;
  --warning-900: #502d08;
  --warning-800: #734b0c;
  --warning-700: #956910;
  --warning-600: #b88714;
  --warning-500: #daa618;
  --warning-400: #efb53f;
  --warning-300: #f3c86f;
  --warning-200: #f7da9f;
  --warning-100: #fbedcf;
  --warning-50:  #fdf7e8;

  --danger-950: #170606;
  --danger-900: #2f0d0d;
  --danger-800: #561919;
  --danger-700: #7d2626;
  --danger-600: #a43232;
  --danger-500: #c93e3e;
  --danger-400: #d05c5c;
  --danger-300: #dc8585;
  --danger-200: #e7adad;
  --danger-100: #f3d6d6;
  --danger-50:  #f9ebeb;

}

*{
  transition: .5s ease;
}

/* * { margin: 0; padding: 0; box-sizing: border-box; } */
html, body {
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
}

body {
  font-family: 'Quicksand';
  font-weight: 400;

  background-color: var(--background-50);
  color: var(--text-900);

  margin: 0;
  padding: 0;
}

#shader-canvas-ANIMATION_2{
  display:block;
  position:fixed;
  width:100%;
  height:100%;
  z-index:-1;
}

.d-none{
  display: none !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'Quicksand';
  font-weight: 700;
}

html {
  font-size: 100%;
} /* 16px */

h1 {
  font-size: 4.210rem; /* 67.36px */
}

h2 {
  font-size: 3.158rem; /* 50.56px */
}

h3 {
  font-size: 2.369rem; /* 37.92px */
}

h4 {
  font-size: 1.777rem; /* 28.48px */
}

h5 {
  font-size: 1.333rem; /* 21.28px */
}

small {
  font-size: 0.750rem; /* 12px */
}


.btn-primary{
  background-color: var(--primary-500);
  color: white;
  border: none;
  outline: none;
  transition: .25s ease;
}
.btn-primary:hover{
  cursor: pointer;
  background-color: var(--primary-700);
}

.btn-secondary{
  background-color: var(--secondary-500);
  color: white;
  border: none;
  outline: none;
  transition: .25s ease;
}
.btn-secondary:hover{
  cursor: pointer;
  background-color: var(--secondary-700);
}

.btn-accent{
  background-color: var(--accent-500);
  color: white;
  border: none;
  outline: none;
  transition: .25s ease;
}
.btn-accent:hover{
  cursor: pointer;
  background-color: var(--accent-600);
}




/* -------------------------------- Clickable small text button -------------------------------- */

.text-btn{
  padding: 0;
  margin: 0 .5rem;
  border: 0;
  background: transparent;
  transition: .25s ease;
} 

.text-btn:hover{
  cursor: pointer;
}

.text-btn--shadow{
  color: var(--background-400);
}

.text-btn--shadow:hover{
  color: var(--background-300);
}

.text-btn-sm{
  font-size: .7rem;
}

/* -------------------------------- End Clickable small text button -------------------------------- */



/* -------------------------------- Invite Link -------------------------------- */
.invite-link-input {
  width: 100%;
  padding: .2rem .5rem;
  background: var(--background-200);
  color: var(--text-800);
  border-radius: 0.25rem;
  border: 1px solid var(--background-400);
}
/* -------------------------------- End Invite Link -------------------------------- */