body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;

  background-color: #cce6dd;
  background-image: url(img/j-lee-GV8TZtW4SYA-unsplash-cut.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  background-position: right bottom;
  color: #000000;
  font-size: 0.3cm;
  font-family: "Zen Kurenaido", "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: 0.05em;
}

a:link {
  color: #e60050;
}

a:visited {
  color: #e6b55c;
}

a:hover {
  color: #5c8ce6;
}

a:active {
  color: #c0c0c0;
}

.sitename {
  position: fixed;
  margin: 0;
  left: -0.2cm;
  top: -1.2cm;
  font-size: 3.6cm;
  font-family: "Zen Kurenaido", serif;
  filter: alpha(opacity=60);
  -moz-opacity: 0.60;
  opacity: 0.60;
  font-weight: normal;
  transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
}

h2 {
  font-family: "Zen Kurenaido", serif;
}

h3 {
  font-family: "Zen Kurenaido", serif;
}

.index > ul > li {
margin-left: 0.2cm;
}

ul {
  margin: 0;
  padding: 0 0.8cm 0 0.2cm;
}

ul > li {
  list-style-type: circle;
}

ul > li > ul {
  padding: 0;
}

ul > li > ul > li {  
  list-style-type: none;
  margin-left: 0.4cm;
}

.card {
  border-style: none;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  filter: alpha(opacity=70);
  -moz-opacity: 0.70;
  opacity: 0.70;
  background-color: #ffffff;
  padding: 0.4cm 0 0.6cm 0.6cm;
  box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.4);
}

.index{
  width: 430px;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 360px);
  grid-template-areas: 
    "about main link"
    "about main link"
    "about main link"
    "about main mysite"
    "new main mysite";
  width: max-content;
  margin: 0 auto;
}

.about { grid-area: about; }

.new { grid-area: new; }

.link { grid-area: link; }

.main { grid-area: main; }

.mysite { grid-area: mysite; }

@media screen and (max-width: 800px) {
  body {
    font-size: 0.24cm;
  }

  .card {
    margin: 0 auto;
    width: 340px;
  }

  .grid {
    grid-template-columns: 340px;
    grid-template-rows: auto;
    grid-template-areas:
      "about"
      "new"
      "main"
      "link"
      "mysite";
  }
}

.about {
  grid-area: about;
}

.new {
  grid-area: new;
}

.main {
  grid-area: main;
}

.link {
  grid-area: link;
}

.mysite {
  grid-area: mysite;
}