song-prompt-webapp/application/static/styles.css

/* 1.0 - Foundational Styling */

:root {
  --primary:  #66C92D;
  --text-light: #FFFFFF;
  --text-dark: #101314;
  --background: #667E8A;
  --background-light: #E5E9EB;
  height: 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  background: linear-gradient(
    15deg, #ff97c0, #ffa964, #ffff8e, 	#00ffc8, #d26aff
  );
  background-size: 700% 550%;
  animation: gradient 7s ease-in-out infinite;
  color: var(--text-dark);
  font-family: 'Space Grotesk', sans-serif;
  background-color: var(--background-light);
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}

@keyframes gradient {
  0% {
	  background-position: 0% 79%;
  }
  50% {
	  background-position: 100% 22%;
  }
  100% {
	  background-position: 0% 79%;
  }
}

html {
  display: flex;
  justify-content: center;
}
header {
  height: 10%;
}

.prompt-button {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  margin-right: 4px;
  border: 1px solid black;
  white-space: nowrap;
  cursor: pointer;
  font-size: 14px;
  line-height: 16px;
  padding: 8px 16px 8px 12px;
  width: 300px
}

.prompt {
  padding: 5px;
}

.results-container {
  display: inline-block;
  width: 60%;
  text-align: center;
}

/* MODAL POPUP  */
.first-time-user-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  padding: 1em;
  background-color: rgba(0, 0, 0, 0.75);
  transition: 0.25s ease-out;
}
.first-time-user-popup.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.first-time-user-popup-container {
  width: 100%;
  max-width: 600px;
  margin: auto;
  transform: translateY(-1em) scale(0.95);
  background-color: white;
  transition: transform 0.25s ease-out;
  border-radius: 8px;
}

.first-time-user-popup.is-active .first-time-user-popup-container {
  transform: translateY(0) scale(1);
}

.modal-headline {
  font-size: 20px;
  line-height: normal;
  font-weight: 500;
  margin-bottom: 32px;
  text-align: center;
  color: #F7492D;
}

.modal-links {
  display: block;
}

.modal-x-out {
  float: left;
  border: none;
  background: transparent;
}

.modal-links a {
  border: 2px solid #3c228a;
  background: #F7492D;
  padding: 8px 16px;
  text-align: center;
  width: calc(50% - 8px);
  margin: 0 8px;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s;
}

.modal-links a.secondary {
  background: transparent;
  color: #3c228a;
}

.modal-links a:hover {
  border: 2px solid #13014a;
  background: #13014a;
}

.modal-links a.secondary:hover {
  border: 2px solid #13014a;
  background: #ebe8f3;
  color: #13014a;
}

.first-time-user-popup-content {
  padding: 32px 16px;
}

@media (min-width: 768px) {
  .first-time-user-popup-content {
    padding: 32px;
  }

  .modal-headline {
    font-size: 24px;
  }

  .modal-links a {
    min-height: 40px;
    line-height: 40px;
  }
}

.loading {
	url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a12" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="%23FF156D"></stop><stop offset=".3" stop-color="%23FF156D" stop-opacity=".9"></stop><stop offset=".6" stop-color="%23FF156D" stop-opacity=".6"></stop><stop offset=".8" stop-color="%23FF156D" stop-opacity=".3"></stop><stop offset="1" stop-color="%23FF156D" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(%23a12)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="%23FF156D" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>')
}