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

@layer base {
  body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 100%;
    min-height: 100vh;
    @apply bg-white text-vjschool-dark;
  }

  a {
    @apply text-vjschool-main hover:text-vjschool-lochmara;
  }
}

@layer utilities {
  .container {
    @apply w-full lg:max-w-[80rem] mx-auto px-6;
  }

  .btn {
    @apply bg-vjschool-main hover:bg-vjschool-malibu text-white hover:text-white font-bold py-2 px-4 rounded cursor-pointer; 
  }

  .btn-disabled {
    @apply cursor-not-allowed bg-gray-400 hover:bg-gray-200;
  }

  .btn-white {
    @apply bg-white hover:bg-gray-100 text-vjschool-dark/70 hover:text-vjschool-main/50 font-normal border;
  }

  .required::after {
    content: '必須';
    @apply ml-2 text-red-500 text-xs font-normal;
  }

  .optional::after {
    content: '任意';
    @apply ml-2 text-indigo-500 text-xs font-normal;
  }
}
/*
 * 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.
 *


 */


/* #camera {
	width: 320px; height: 240px; 
	margin: 5px; padding: 0px;
	position: relative;
	background-color: silver;
} */

#camera video {
	width: 100%;
	height: 100%; 
	position: absolute;
	top: 0px; left: 0px;
}

#camera canvas {
	width: 100%;
	height: 100%; 
	position: absolute;
	top: 0px; left: 0px;
}