html {
  font-size:calc(100% * 0.625);
}

* {
  box-sizing: border-box;
}

body{
  margin:0;
  width:100%;
  background-image: url(./login.JPG);
  background-attachment: fixed;
  background-position: center; /* こうするとスマホでも真ん中に来る */
  display:grid;
  grid-template-rows: auto 6.6rem;
}

main{
  width:100%;
  max-width:80rem;
  height:calc(100dvh - 6.6rem);
  background-color:rgba(0,64,64,0.5);
  color:white;
  margin:0 auto;
  font-size:1.8rem;
}

form{
  font-size:1.8rem;
  display:flex;
  flex-direction:column;
}

input{
  width:80%;
  height:3.6rem;
  font-size:1.8rem;
  display:block;
  margin:1rem auto;
}

#login-button{
  border-radius:0.8rem;
  font-size:2.5rem;
  width:auto;
  height:auto;
  padding:1rem 1rem;
  background:linear-gradient(to right bottom, white, skyblue, teal);
}

h1{
  margin:1rem;
  text-align:center;
}

p{
  margin:0.5rem 2rem;
}

#footer{
  font-style:italic;
  border-top: 1px solid white;

  width:100%;
  height:6.6rem;
  left:0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer > a{
  display:block;
  color:white;
  font-size:2.6rem;
  text-decoration: none;
  margin:0 1.2rem;
}