html, body{
  margin:0;
  padding:0;
  z-index:-1 !important;
}

*{
  z-index:10;
  font-family: arial,sans-serif;
}

#home{
  overflow:hidden;
  /*background-image:url("https://source.unsplash.com/random");*/
  background-image:url("https://images.unsplash.com/photo-1599629395786-bb1970a6a02e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  background-repeat:no-repeat;
  background-size:cover;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  z-index:0 !important;
}


#home::before{
  content:"";
  position:absolute;
  pointer-events:none;
  height:100%;
  width:100%;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 100%);
  z-index:1 !important;
}

#logo{
  display:block;
  padding:10px;
  background-color:white;
  cursor:pointer;
}

#buttons{
  height:200px;
}

#buttons a{
  text-decoration:none;
  display:block;
  text-align:center;
  margin-top:10px;
  padding:30px;
  padding-top:5px;
  padding-bottom:5px;
  border-radius:0.3em;
  border:2px solid;
}

form{
  margin-bottom:0px;
}

#signup{
  background-color:white;
  color:#333;
}

#signin{
  background-color:rgb(100,255,150);
  border-color:white !important;
  color:#333;
}

#signinform, #signupform{
  flex-direction:column;
  display:none;
  height:190px;
  padding-top:10px;
}

#signinform input, #signupform input{
  text-decoration:none;
  text-align:center;
  margin-bottom:10px;
  padding:30px;
  padding-top:5px;
  padding-bottom:5px;
  border-radius:0.3em;
  border:2px solid;
  direction: ltr;
}

#signinform #signinsubmit, #signupform #signupsubmit{
  text-decoration:none;
  text-align:center;
  margin-bottom:10px;
  padding:30px;
  padding-top:5px;
  padding-bottom:5px;
  border-radius:0.3em;
  border:2px solid;
  background-color:rgb(100,255,150);
  border-color:white !important;
  color:#333;
}

#signinform a, #signupform a{
  color:#bbbbbb;
  text-align:center;
}

#pleaserotate{
  position:fixed;
  display:none;
  width:100%;
  height:100%;
  background-color:white;
  top:0px;
  left:0px;
  z-index:999;
  flex-direction:column;
  justify-content:center;
}

span.error{
  color:red;
  background-color:white;
  padding:10px;
  border-radius:0.3em;
  text-align:center;
}

span.success{
  color:green;
  background-color:white;
  padding:10px;
  border-radius:0.3em;
  text-align:center;
}


@media only screen and (pointer:none), (pointer:coarse) and (max-width: 1000px){
  *{
    font-size:1.2em;
  }
}


@media (pointer:none), (pointer:coarse) and (orientation:landscape) and (min-aspect-ratio: 13/9) {
  #pleaserotate{
    display:flex;
  }
  #pleaserotate h1{
    text-align:center;
  }
}

.signout{
  text-decoration:none;
  display:block;
  text-align:center;
  margin-top:10px;
  padding:30px;
  padding-top:5px;
  padding-bottom:5px;
  border-radius:0.3em;
  border:2px solid;
  color:red;
  background-color:white;
}



.home{
  text-decoration:none;
  display:block;
  text-align:center;
  margin-top:10px;
  padding:30px;
  padding-top:5px;
  padding-bottom:5px;
  border-radius:0.3em;
  border:2px solid;
  color:grey;
  background-color:white;
}