/*
    *{ border: 1px solid red; }
*/

.page
{
  height: 100vh;
  margin: 0 auto;
  max-width: 100%;
  color: black;
  font-family: "Ariel", sans-serif;
}

.head
{
  display: flex;
  height: 35%;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.main
{
  display: flex;
  height: 65%;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

#logo
{
  display: block;
  width: 45%;
  height: 20%;
  margin-left: auto;
  margin-right: auto;
}

#gap
{
  margin-top: 5px;
}

input:invalid
{
  border-color: #900;
  background-color: #FDD;
}

input:valid
{
  border-color: green;
  background-color: PaleGreen;
}

input:focus:invalid
{
  outline: none;
}

.error
{
  width  : 100%;
  padding: 0;

  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;

  box-sizing: border-box;
}

.error.active
{
  padding: 0.3em;
}

#errordiv
{
  width: 90%;
  margin: auto;
}

#login
{
  margin-bottom: 5px;
}

.centered_text
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

#margin_zero
{
  margin: 0;
  display: inline;
}

#countdown
{
  display: inline;
}

#codeError
{
  display: none;
  margin-bottom: 10px;
}

#logintext
{
  margin-top: 5px;
  margin-bottom: 5px;
}

a
{
  color: black;
  text-decoration: underline;
}

a:hover
{
  color: black;
}

.video_wrap
{
  width: 90%;
  height: 70%;
  margin-left: auto;
  margin-right: auto;
}

#policy
{

}

/* Media Query for Desktops */

@media only screen and (min-width: 768px)
{
  html
  {
    /*overflow: hidden;*/
  }

  #logo
  {
    max-width: 10%;
  }

  .main
  {
    height: 50%;
  }

  .foot
  {
    height: 15%;
  }

  #login
  {
    margin-top: 20px;
  }

  #errordiv
  {
    width: 50%;
  }

  #logintext
  {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .video_wrap
  {
    width: 35%;
    height: 50%;
  }

  #antibot_error
  {
    width: 30%;
    margin: auto;
  }

}

/* Media Query for iPads */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
{
  #logo
  {
    max-width: 20%;
  }

  #logintext
  {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .video_wrap
  {
    width: 90%;
    height: 50%;
  }

  #antibot_error
  {
    width: 50%;
    margin: auto;
  }

}
