@tailwind base;

h1 {
  @apply text-2xl pb-3 text-indigo-900;
}
h2 {
  @apply text-xl;
}
h3 {
  @apply text-lg;
}

@tailwind components;
@tailwind utilities;

@layer components {
  @keyframes blink {
    50% {
      opacity: 0;
    }
  }
  input {
    @apply font-mono;
  }
  .btn {
    @apply font-bold py-2 px-4 rounded-lg;
  }
  .btn-primary {
    @apply border-2 bg-white/50 border-indigo-200 border-solid shadow-sm 
  }
  .btn-primary:hover {
    @apply bg-gradient-to-br from-indigo-200/50 via-indigo-100/50 to-indigo-200/50 shadow-lg;
  }
  /* should be part of tailwind; why is it not found? */
  .pre-wrap {
    /* white-space: pre-wrap; */
    /* word-wrap: break-word; */
    font-family: 'Courier New', Courier, monospace;
  }
  .card p {
    @apply pb-5;
  }
  .riddle a, .answer-form a {
    @apply text-blue-500 underline;
  }
  ol {
    @apply pl-7 list-decimal;
  }
  /* .btn-primary.disabled {
    @apply bg-amber-300 cursor-not-allowed hidden;
  } */
  .btn-primary:focus {
    @apply outline-indigo-700 border-solid border-2;
  }
  .solved-comment {
    display:none;
  }
  .riddle.solved .solved-comment {
    display:inline;
  }
  .alert {
    @apply bg-indigo-100 border-indigo-400 text-indigo-700;
  }
  .success {
    @apply bg-emerald-100 border-emerald-400 text-emerald-700;
  }
  .card {
    @apply pb-3 px-3 mb-5 bg-white/50 rounded-xl shadow-lg space-y-2
  }
  .card h1 {
    @apply bg-white rounded-t-lg -mx-5 mb-3 pt-3 px-5 shadow-md;
  }
  #key-list li {
    @apply pre-wrap mb-3 mr-1 flex ;
  }
  #key-list li span {
    @apply py-1 w-3/12  text-right block
  }
  #key-list li div {
    @apply bg-emerald-500 text-white p-1 grow text-center
  }
  .key.aquired {
    @apply text-emerald-500
  }
  .key.missing {
    @apply text-amber-600
  }
  .random-pattern {
    /* from hero patterns */
    background-color: #DDDDDD;
    /* @apply bg-gray-500; */
    background-image: url(/assets/circle-bg-e22a017ac99070765a85a054f260ec1aa7306a39b964d51f44b314dba8919479.jpg);
    background-position: center;
    background-size: 500px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E"); */
  }
  input::placeholder {
    color: silver;
  }
  footer a {
    @apply text-indigo-900; 
  }
  footer a:hover {
    @apply text-indigo-400; 
  }
  r-interrupt {
    @apply hidden border-2 border-red-600 bg-black text-emerald-500 p-1 font-extralight -mx-5 my-2;
  }
  r-interrupt.matrix {
    @apply filter blur hue-rotate-180 translate-x-1
  }
  r-interrupt.typing::after {
    content: '█';
    @apply animate-[blink_0.5s_infinite];
  }
  footer .btn {
    @apply btn-primary bg-blue-300/50 text-center text-xl animate-pulse
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */