@font-face{
  font-family: "Hui";
  src: url("../fonts/HuiFont29.ttf");
}

html{
  font-size:62.5%;
  font-family:"Hui";
}

* {
  box-sizing: border-box;
}

body{
  width:100%;
  height:100dvh;
  font-size:2.4rem;
  background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("bbs_bg.JPG");
  background-attachment: fixed;
  background-position: center; /* こうするとスマホでも真ん中に来る */
  color: black;
  margin:0;
}

main{
  display:grid;
  grid-template-rows:1fr 66px;
  max-width:800px;
  height:100%;
  margin:0 auto;
}

h1{
  font-size:5rem;
  text-align:center;
  font-weight:normal;
  margin:10px 0;
  background-color:rgba(215,235,255,0.5);
}

p{
  margin:0;
}

#contents{
  display:grid;
  grid-template-rows:auto 1fr; /* autoを使うことで */
  overflow:auto;
}

#header{
  background-color:rgba(40, 60, 80, 0.9);
  padding:1rem;
}

/* form関連 */
#form{
  margin:1rem 0;
  background-color:rgba(215,235,255,0.5);
  padding:5px;
}

#name-input{
  margin:0 0 1rem 0;
}

#comment-input{
  width:100%;
  position:relative;
}

#comment-area{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  margin:0 0 1.2rem 0;
}

.input{
  font-family:"Hui";
  font-size:2.4rem;
  line-height:2.9rem;
}

/* bbs関連 */
#bbs{
  margin:0;
  padding:0 10px;
  overflow:scroll;
  overflow-x: hidden;
  display:flex;
  align-items:center;
  flex-direction:column;
  background-color:rgba(200,200,200,0.3);
}

.visitor{
  margin:0 0 1.5rem 0;
}

.access{
  width:100%;
  margin:10px 0;
  padding:5px 10px;
  background:linear-gradient(to right, rgba(225,240,255,1), rgba(225,240,255,0.3));
  line-height:2.9rem;
}

#update-button{
  background-color:white;
  color:black;
  font-size:2.9rem;
  font-family:"Hui";
  font-style:italic;
  margin:10px 0;
}

#footer{
  border-top: 1px solid white;
  font-size:3.6rem;
  background-color:rgba(0,0,0,0.8);
  /* 水平・垂直方向の中央揃え */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:"Hui";
  font-style:italic;
}

#link-back{
  color:white;
  text-decoration:none;
}