@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

* {
	font-family: 'Roboto Condensed', sans-serif;
}

html,
body {
    margin: 0px;
    height: 100%;
}

.box {
	background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/280323755.jpg"); background-size:cover; background-position: center center;
    height: 100%;
}

.content {
    width: 400px;
    height: 60vh;
    position:absolute;
    top:30vh;
    left:50%;
    margin-left:-200px;/* half width*/
    margin-top:-30vh;/* half height*/
    background-color: black;
}
.content_bottom {
    width: 400px;
    height: 40vh;
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-200px;/* half width*/
    background-color: black;
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto Condensed', sans-serif;
}

.card-item {
	margin: 15px;
	padding: 15px;
	border: solid 1px #ccc;
}

.ingredients {
	font-size: 0.9em;
	color: #666;
}