style.css

@tailwind base;

@tailwind components;

@tailwind utilities;

body {
  @apply bg-gray-100;
  @apply text-gray-800;
  overflow-x: hidden;
}

body.popup-open {
  overflow-y: hidden;
}

a { 
  @apply text-primary;
}

a:hover {
  cursor: pointer;
  @apply text-primary-dark;
}

.cta > a {
  @apply text-white;
}

.cta:hover > a {
  @apply text-white;
}

.editor blockquote {
  @apply border-l-4;
  @apply border-gray-800;
  @apply pl-10;
  @apply pr-4;
  @apply py-8;
  @apply bg-gray-100;
  @apply italic;
  @apply text-gray-800;
  @apply text-xl;
}

.editor ul {
  @apply list-disc;
  @apply pl-8;
}

.editor ol {
  @apply list-decimal;
  @apply pl-8;
}

.editor h1,
.editor h2,
.editor h3 {
  @apply font-bold;
  @apply mb-4;
}

.editor h1 {
  @apply text-5xl;
}

.editor h2 {
  @apply text-3xl;
}

.editor h3 {
  @apply text-xl;
}

.progress-bar {
  top: 0.5em;
  z-index: 2;
}

.progress-bar .progress {
  background: rgb(198,246,213);
  background: linear-gradient(90deg, rgba(198,246,213,1) 0%, rgba(47,133,90,1) 100%);
  transition: width 0.8s;
}

.words-written {
  transition: opacity 0.6s;
}

.words-written:hover {
  @apply opacity-100;
}

.blocktype-option:hover {
  @apply pl-6;
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
  @apply bg-primary !important;
}

.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
  @apply bg-pink-100 !important;
}

.DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
  @apply bg-pink-100 !important;
  @apply text-secondary;
}

.DayPicker-Day {
  @apply rounded !important;
}

.DayPicker-Day:focus {
  outline: none;
}

.DayPicker-Day--entry:not(.DayPicker-Day--outside) {
  @apply bg-green-200;
  @apply text-green-900;
  font-weight: 700;
}

.DayPicker-Day--today,
.DayPicker-Day--entry.DayPicker-Day--today {
  @apply text-primary !important;
}

.popup {
  background-color: rgba(0, 0, 0, 0.3);
  cursor: default;
  z-index: 2;
}

.icon-spin {
  animation: icon-spin 2s infinite linear;
}

@-webkit-keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}