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-color:rgb(106, 79, 123); */
  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-columns: 2fr 1fr;
grid-template-areas:
  "section aside"
  "article aside";
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: rgba(183, 137, 189, 0.692);
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) ;
  border-bottom: dashed 2px white;
}

.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;
}