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

body {
  /* background-color: black; */
  background-color: rgb(46, 50, 68);
  color: white;
  background-image: url("bg.png");
  font-family: Inter, sans-serif;
  background-size: cover;
}

button:active{

  transform:scale(.9)
}

* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

#notes-list li {
  -webkit-user-select: text !important;
  user-select: text !important;
}

* {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
							  supported by Chrome, Edge, Opera and Firefox */
}

@media screen and (max-width: 768px) {
  /* Phones			 */
  nav {
    position: fixed;
    width: 100%;
    bottom: 0 !important;
  }

  nav .tabg {
    margin: 0px !important;
    margin-right: -3px !important;
    border-radius: 0px !important;
    border: none !important;
  }
}

@media screen and (min-width: 768px) {
  nav {
    position: fixed;
    width: 100%;
    top: 0;
  }
}

.app {
  animation: fadeIn 0.25s ease-in-out;
}

#notes-list {
  /* background-color: rgba(255, 255, 255, 0.128);
			padding: 8px; */

  /* max-height: 40vh;
			overflow: auto;
			overflow-x: hidden; */
}

#notes-list li {
  /* padding: 8px 16px;
			border: rgba(255, 255, 255, 0.279) solid 1px;
			border-radius: 4px;
			margin-bottom: 4px; */

  width: 100%;
  background-color: rgba(200, 166, 255, 0.09);
  border: solid 2px rgb(255, 255, 255);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.5px);
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 1em;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 1em;
  display: block;

  text-align: left;

  outline: none;
  border: none;

  margin-bottom: 8px;
  margin-right: 8px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    /* transform: translateY(16px) rotate(45deg); */
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

::placeholder {
  color: rgba(255, 255, 255, 0.581) !important;
  opacity: 1;
  /* Firefox */
}

::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: rgba(255, 255, 255, 0.581) !important;
}

.tabg div {
  margin-bottom: 4px;
}
.tabg {
  background-color: rgba(200, 166, 255, 0.09);
  border: solid 1px rgba(187, 167, 255, 0.28);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.5px);
  /* backdrop-filter: blur(12.5px) saturate(110%) brightness(100%); */
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 1em;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 1em;
  border-radius: 1em;
  display: inline-block;

  vertical-align: middle;

  /* margin-right: 1em; */
  margin-right: 8px;
  cursor: pointer;
}

* {
  transition: 0.25s;
}

.inputg {
  background-color: rgba(200, 166, 255, 0.09);
  border: solid 2px rgb(255, 255, 255);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.5px);
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 1em;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 1em;
  display: inline-block;
  outline: none;
  border: none;
}

/* Thin scrollbar track */
::-webkit-scrollbar {
  width: 8px;
  /* Adjust the width to your liking */
}

/* Scrollbar track */
::-webkit-scrollbar-track {
  background-color: transparent;
  /* Transparent background */
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.245);
  /* White scrollbar thumb */
  border: 2px solid transparent;
  /* Transparent border */
  border-radius: 4px;
  /* Rounded corners */
}

/* On hover, change the thumb color */
::-webkit-scrollbar-thumb:hover {
  background-color: #ffffff61;
  /* Change the color on hover */
}

.gradblack {
  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000000ad 100%); */
  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.22) 29.17%, rgba(0, 0, 0, 0.65) 66.67%, #000 100%); */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 29.17%,
    rgba(0, 0, 0, 0.423) 66.67%,
    #00000091 100%
  );
}

input::-ms-input-placeholder {
  text-align: left;
  color: white;
}

input::placeholder {
  text-align: left;
  color: white;
}

.flyout {
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  /* animation: fadeNotification 3s forwards; */
  /* 3s is the total duration of the animation */
}

@keyframes fadeNotification {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  15% {
    opacity: 1;
    transform: translateY(0);
  }

  90% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

.tabg:hover {
  background-color: rgba(255, 255, 255, 0.186);
}

::-moz-selection {
  /* Code for Firefox */
  color: rgba(255, 255, 255, 0.881) (255, 255, 255);
  background: rgba(255, 255, 255, 0.18);
}

::selection {
  color: rgba(255, 255, 255, 0.881) (255, 255, 255);
  background: rgba(255, 255, 255, 0.18);
}

/* h1 {
			text-align: center;
			font-size: 48px;
			margin-top: 100px;
			font-family: 'Poppins', sans-serif;
		}

		form {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 50px;
		}

		label {
			font-size: 24px;
			margin-bottom: 10px;
			font-family: 'Poppins', sans-serif;

		}

		button {
			background-color: white;
			color: black;
			font-size: 20px;
			padding: 5px 5px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			margin: 10px;
			font-family: 'Poppins', sans-serif;

		}

		#inspiration {
			margin-top: 100px;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-family: 'Poppins', sans-serif;
		}

		#inspiration h2 {
			font-size: 36px;
			margin-bottom: 50px;
			font-family: 'Poppins', sans-serif;
		}

		#player {
			width: 800px;
			height: 450px;

}

		.main-button {
			text-decoration: none;
			color: white;
			font-size: 1.5em;
			font-family: 'Poppins', sans-serif;
		}

		header {
			background-color: black;
			height: 60px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
		}

		header a {
			color: white;
			font-size: 24px;
			text-decoration: none;
			padding: 10px 20px;
			border-radius: 5px;
		}

		.main-button {
			background-color: white;
			color: black;
		}

		.secondary-button {
			background-color: transparent;
			border: 1px solid white;
			margin-left: 10px;
		}

		.question-label {
			font-family: 'Poppins', sans-serif;
			font-size: 24px;
			color: rgb(255, 255, 255);

			margin-left: 50px;
			margin-bottom: 10px;

		} */