/* @import url('https://fonts.googleapis.com/css2?family=Bytesized&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Bytesized&family=Doto:wght,ROND@100..900,100&family=Nabla&family=Pixelify+Sans:wght@400..700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply flex justify-center w-1/12 bg-blue-400 rounded-lg hover:bg-blue-600 text-white cursor-pointer;
  }

  .pop-over-item3 {
    @apply shadow-2xl shadow-black flex flex-row text-center z-0 fixed bottom-10 right-3.5 h-8 lg:h-10 lg:w-72 mb-24 bg-white rounded-full border-[2.5px] lg:border-[3.5px] mr-12;
  }

  .pop-over-item2 {
    @apply shadow-2xl shadow-black flex flex-row text-center z-0 fixed bottom-10 right-3.5 h-8 lg:h-10 lg:w-72 mb-12 bg-white rounded-full border-[2.5px] lg:border-[3.5px] mr-12;
  }

  .pop-over-home {
    @apply shadow-2xl shadow-black flex flex-row text-center z-0 fixed bottom-10 right-3.5 h-8 lg:h-10 lg:w-72 bg-white rounded-full border-[2.5px] lg:border-[3.5px] mr-12;
  }
  
  .nav-button-base {
    @apply z-0 fixed bottom-10 right-3.5 h-8 w-8 lg:h-10 lg:w-10 bg-white rounded-full border-[2.5px] lg:border-[3.5px] shadow-xl shadow-gray-400;
  }
  
  .text-pop-over {
    @apply mt-1 mx-auto text-xs lg:text-base font-bold text-pretty;
  }

  .menu-item-base {
    @apply flex mx-auto mt-2 justify-center w-full my-12;
  }

  .menu-item {
    @apply rounded-lg transition-colors duration-200;
  }

  .glow-button {
    @apply before:blur-[30px] before:opacity-80 before:-z-10 before:absolute before:inset-[5px] before:bg-gradient-to-r ;
  }

  .default-bg {
    @apply rounded-lg p-8 bg-[#202744] shadow-sm shadow-black w-5/6 mt-6 mx-auto border border-gray-700;
  }

  .admin-nav-buttons {
    @apply lg:px-4 px-2 py-2 rounded-md text-white hover:bg-indigo-300 transition duration-150 ease-in-out
  }
}
/*
 * 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.
 *


 */