/*
 * 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.
 *


 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
	font-family: "Roboto", sans-serif;
}
.ingredients{
	font-style:italic;
	font-size:.75rem;
}
.title{
	font-family: "Noto Sans JP", sans-serif;
	font-weight:400;
	color:#32CD32;
}
body{
	background-image:url(/assets/fake_img-e39f00b1af33cd152c4f02b6517334d1341b017e9232419e49a406ae8a2d20eb.png);
	background-size:cover;
	background-position: bottom;
	background-repeat: no-repeat;

}
.uppercase{
	text-transform: uppercase;

}
#header{

	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color:white;
	height:100vh;
}
h1{
	font-size:6rem;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    2px 2px 0 #000,   /* Adding more values for a thicker outline */
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000;
}
h3{

	font-size:2rem;
}

.table,
.table td,
.table th {
  background-color: transparent !important;
}
.table tr{
	border:1px solid transparent;
}
.table td{
	color:white;
}