body{
    display: grid;
    font-family: "DotGothic16";
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
    grid-gap: 10px;
    padding: 20px;
      max-width: 1000px;
      margin: 0 auto;
      color: rgb(122, 108, 150);
      background-image:url("../photos/background.jpg")
  }

  header {
  grid-area: header;
  background: rgba(183, 137, 189, 0.692);
  padding: 10px;
  /*display: flex;         /* 横並びにする！ */
  /*align-items: center;   /* 上下の位置を中央に揃える */
  }
  
  nav {
  grid-area: nav;
  background:  rgba(213, 181, 218, 0.692) ;
  padding: 10px;
  }
  
  main {
  grid-area: main;
  display: grid;
  grid-template-areas:
    "section"
    "article";
  gap: 10px;
  }
  
  section {
  grid-area: section;
  background:  rgba(183, 137, 189, 0.692);
  padding: 10px;
  }
  
  article {
  grid-area: article;
  background: rgba(183, 137, 189, 0.692);
  padding: 10px;
  }
  
  aside {
  grid-area: aside;
  background: rgba(183, 137, 189, 0.692);
  padding: 10px;
  }
  
  footer {
  grid-area: footer;
  background: #00000021;
  padding: 10px;
  }

p{
	color:white 
}

a{
    color:rgb(179, 0, 255)
}

h1 {
  color: white;
  border-bottom: dashed 2px white;
}

.color{
	color:rgb(255, 255, 255)
}

.site-header {
  display: flex;         /* 横並びにする！ */
  align-items: center;   /* 上下の位置を中央に揃える */
  padding: 10px;         /* 余白 */
  background-color: #f5f5f5; /* 背景色 */
}

.logo {
  width: 50px;            /* ロゴのサイズ（自由に変更OK） */
  height: auto;
  margin-right: 10px;     /* ロゴとタイトルの間のスペース */
}

.site-title {        
  margin: 5px;              /* h1の余白をなくす */
}

.titlezemi {
 font-size: 10px;
}

.rightstyle {
  text-align: right ;
}

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

header h1 a {
  text-decoration: none;
  color: #ffffff;
}