body{
  display:grid;
  grid-template-columns:300px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  gap:1rem;
  font-family:"Noto Serif JP", serif;
  background:url("./images/bg.gif");
  color:rgb(229,228,226);
  font-size:x-large;
}
a{
    color: cyan;
}
.cardGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1rem;
  margin-right:1rem;
}
.card{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align: center;
  height:300px;
  border:1px solid red;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--bg) center 30% / cover no-repeat;
  opacity:0.4;
  z-index:-1;
}
.card h3{
  position:relative;
  z-index:1;
}
.card a{
  /* color:rgb(229,228,226); */
  color:cyan;
  text-decoration: none;
}
.header{ grid-area:header; margin-left:1rem; }
.sidebar{ grid-area:sidebar; margin-left:1rem; }
.main{ grid-area:main; display:flex; flex-direction:column; gap:1rem; }
.occImg{
    grid-area: occImg;
    background: rgba(255, 255, 255, 0.9);
    margin-left:auto;
    margin-right: auto;
}