.flex {
	display: flex;
	gap: 1.5rem;
}

header,
section {
	width: 960px;
	margin: 0 auto;
	line-height: 1.5;
	font-family: sans-serif;
}

h1,
h2,
h3 {
	font-size: 48px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 3px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 16px;
}


header .logo,
header .description {
	width: 50%;
	float: left;
}

header .description {
	margin-top: 15px;
}

header p.tagline {
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 3px;
}

header li {
	float: left;
	margin-right: 25px;
}

/********************** Your Code Goes Here ******************/

/*all code below made by Martin Christopher Sanchez*/

:root{
	--red:#dc143b;
	--orange:#e76a4c;
	--orange-pale:#f0b37c;
	--yellow-dark:#fae7ad;
	--background:#fcf8c8;	
}

ul{
	list-style: none;
}

section.leaders > p{
	font-size: 1.15em;
}

header,
section{
	font-family: "EB Garamond", serif;
	padding:1em 22em;
	width:100%;
}

section,
section.leaders section h3:first-child,
.alt > section h3 span.title,
.alt > section h3 span.notable,
section section h4,
section.leaders section h3 + span,
section.leaders section section h4 + span,
section.bev .bev section h4 + span{
	color: var(--red);
}

section,
section.leaders section h3:first-child,
section.leaders section h3 + span,
section.leaders section section h4 + span,
section.bev .bev section h4 + span{
	background-color: var(--background);
}

header{
	background-color: var(--red);
	color: var(--background);
}

html, body, footer{
	background: var(--orange);
}

.description{
	font-size: 1.25em;
	font-weight: 100;
}

.title{
	background: white;
	letter-spacing: normal;
	padding-left: 1em;
	padding-right: 0.85em;
	border-radius: 0.33em;
}

body > section > p{
	text-align: center;
}

h1,
h2{
	font-family: 'Italianno', cursive;
	text-transform: unset;
}

h1{
	font-size: 6em;
	font-weight: bold;
	margin-bottom: -0.3em;
}
h2{
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 4em;
	letter-spacing: 0;
}
h2 span.title{
	background-color: transparent;
}

h3{
	font-size: 1.2em;
}


section.leaders h2 + p{
	padding-bottom: 1em;
}

section.leaders h3,
section.leaders h4{
	display:inline-flex;
}

section.leaders h4{
	padding-left: 3em;
}

section.leaders section p{
	margin-top: 0;
	margin-bottom: 1.5em;
	padding-left: 4em;
	padding-right: 20em;
	font-style: italic;
}

section.leaders section,
section.leaders section section
section.bev .bev section{
    padding: 0;
    overflow-x: hidden;}

/*reference : https://www.w3.org/Style/Examples/007/leaders.en.html*/
section.leaders section:not(:has(h4))::before,
section.leaders section section:before{
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "
 "· · · · · · · · · · · · · · · · · · · · "}
section.leaders section h3:first-child
{
    padding-right: 0.33em;
	border-radius: 0.33em;
}

.alt > section h3 span.title{
	background: white;
}

.alt > section h3 span.notable,
.alt > section h4 span.notable
{
	background: var(--yellow-dark);
}

.alt > section h3 span.notable{
	margin-bottom: 0.75em;
}

.alt > section h4 span.notable{
	border-radius: 0.33em;
}

section section h4{
	background: var(--orange);
	padding-left: 0.33em;
	padding-right: 0.33em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}




section.leaders section section p{
	padding-bottom: 0.75em;
}
	
section.leaders section h3 + span,
section.leaders section section h4 + span{
    float: right;
    padding-left: 0.5em;
	padding-right: 0.5em;
	text-align:left;
	font-weight: bold;
	border-radius: 0.33em;
}

section.bev .bev section h4 + span{
	float: right;
    padding-left: 0.2em;
	padding-right: 0.2em;
	text-align:left;
	font-weight: bold;
	border-radius: 0.33em;
}

section.leaders section span:not(.title,.notable):after {
	content: ".00";
}



.alt > section h3 span.notable::before,
.alt > section h4 span.notable::before{
	content:"★";
}

.alt,
.alt > section,
.alt > section section,
section.alt section h3:first-child,
section.alt section h3 + span,
section.alt section section h4 + span
{
	background-color: var(--orange);
}

.alt,
.alt > section,
.alt > section section,
section.alt section h3:first-child,
section.alt section h3 + span,
section.alt section section h4 + span,
.bev,
.bev > section,
.bev > section section,
section.bev .bev section section h4 + span,
section.bev .bev section section h4 .title
{
	color:white;
}

.bev,
.bev > section,
.bev > section section,
section.bev .bev section section h4 + span,
section.bev section h3:first-child,
section.bev section section h4,
section.bev section h3,
section.bev .bev section section h4 .title{
	background-color: var(--orange-pale);
}

.bev > section h4 + span{
	padding-left: 0.25em;
	padding-right: 0.25em;
}

section.drinks h3{
	display:flex;
}

section.drinks h4{
	text-indent:0;
	padding-left: 1em;
	display:inline-flex;
}

section.bev section section h4,
section.bev section h3{
	margin-bottom: .5em;
}

section.bev .bev section section h4 .title{
	padding-left: 0;
	padding-right: 0.1em;
}

/* GRID SOURCE ttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout*/
section.bev .flex{
	display: grid;
	grid-template-columns: 1fr 1fr; /* Two equal-width columns */
}

section.bev .flex section.drinks:last-child{
	grid-column: 1 / 3;
	padding:0 25%;
}

header > .flex{
	justify-content: flex-start;
	gap: 0;
	padding: 0;
	margin:0;
	align-items: end;
	
}

footer img{
	height: 100%;
	width: 3em;
}

ul.flex,
.logo{
	align-items: center;
	justify-content: center;
}

ul.flex{
	padding:0;
}

.logo{
	text-align: center;
}