.grid {
  height: 100vh;
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-rows: 200px auto 200px;
  grid-gap: 1em;
}

header{
  grid-column: 1 / 4;
  font-size:50px;
  color:white;
  z-index: 10;
}

footer{
  grid-column: 1 / 4;
  font-size:20px;
  color:white;
  z-index: 10;
}

body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
  font-family:Helvetica, san-sans;
  background-image: url("restoule_pp_2k.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  background-color:grey;
}

nav{
  z-index: 10;
}


a, a:visited{
  color:white;
  padding:10px;
  text-decoration: none;
  z-index: 10;
}

a:hover{
  color:#E7E7E7;
  z-index: 10;
}

.grid > * {
  display: flex;
  align-items: center;
  justify-content: center;
}



:root {
  --offset: 2rem;
  --max_width: 72rem;
  --color: hsla(204, 80%, 72%, 0.25);
}

html {
  position: relative;
}

html::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100vh;
  min-height: 100vh;
  content: '';
  background-color: #585858;
  opacity:0.5;
  z-index: 5;
  pointer-events: none;
}

.bi{
padding-bottom:5px;
}