/**
 * login page styles
 *
 * Copyright 2019-2021 Geoff Butler. All rights reserved. Code or files can not be disseminated, copied, modified and/or distributed under any circumstances without the express written permission of the @author. Unauthorized copying or use of this file, via any medium is strictly prohibited outside of 8bituniverse.com.
 * @framework Pogo
 * @version 2.0
 * @author Geoff Butler
 */

/*
 * font family define
 */

@font-face {
  font-family: 'Charriot-Deluxe';
  src: url('../fonts/Charriot-Deluxe.ttf.woff') format('woff'),
    url('../fonts/Charriot-Deluxe.ttf.svg#Charriot-Deluxe') format('svg'), url('../fonts/Charriot-Deluxe.ttf.eot'),
    url('../fonts/Charriot-Deluxe.ttf.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

/*
 * style wide reset
 */

* {
  padding: 0;
  margin: 0;
}

/*
 * set site to use custom font
 */

html,
body,
button,
input {
  font-family: var(--font);
}

/*
 * core styles
 */

body {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  min-width: 488px;
  overflow: auto;
  background-color: var(--background);
  color: var(--text);
}

header {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 4;
  font-size: 5em;
  text-align: center;
}

section {
  position: absolute;
  top: 60px;
  bottom: 60px;
  left: 80px;
  right: 80px;
  /*background-color: var(--background);
    color: var(--text);*/
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  font-size: 1.4em;
  line-height: 60px;
  text-indent: 20px;
}

.background {
  background: var(--background) url('../img/loader.svg') 0px 0px repeat;
  animation-name: scroller;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: normal;
}

/*
 * theme menu
 */

.theme__menu {
  position: absolute;
  right: 0;
  top: 0;
  width: 224px;
  height: 86px;
  z-index: 5;
}

.theme__menu .theme__text {
  width: auto;
  height: 28px;
  float: right;
  clear: both;
  font-size: 1.4em;
  line-height: 28px;
  text-align: center;
  white-space: nowrap;
  color: var(--text);
}

.theme__menu .theme__name {
  width: 150px;
  height: 60px;
  float: left;
  clear: left;
  font-size: 1.4em;
  line-height: 60px;
  text-align: right;
  white-space: nowrap;
  text-transform: capitalize;
  color: var(--text);
}

.theme__menu .theme {
  display: none;
  width: 60px;
  height: 60px;
  float: right;
  clear: right;
  margin: -3px 3px 0 0;
  border: 3px solid var(--text);
  box-shadow: 0 4px 6px var(--shadow);
  cursor: pointer;
  transition: background-color 0.15s linear, color 0.15s linear, fill 0.15s linear;
}

.theme__menu .theme svg {
  width: 60px;
  height: 60px;
  fill: var(--yellow);
  color: var(--yellow);
  transition: background-color 0.15s linear, color 0.15s linear, fill 0.15s linear;
}

.theme__menu .theme.dark {
  background-color: var(--themeDark);
}

.theme__menu .theme.light {
  background-color: var(--themeLight);
}

.theme__menu .theme:hover {
  background-color: var(--yellow);
}

.theme__menu .theme:hover svg {
  fill: var(--black);
  color: var(--black);
}

/*
 * login form
 */

.login__form {
  position: absolute;
  top: calc(50% - 59px);
  left: calc(50% - 200px);
  width: 400px;
  box-sizing: border-box;
  background-color: var(--form);
  color: var(--text);
  border: var(--header) 3px solid;
  border-top: none;
  box-shadow: 0 4px 6px var(--shadow);
}

.login__form .form__header {
  height: 28px;
  line-height: 28px;
  font-size: 28px;
  text-indent: 8px;
  background: var(--header) url(../img/login.svg) right center no-repeat;
  color: var(--headerText);
}

.login__form form {
  width: 100%;
}

.login__form form input,
.login__form form button {
  width: 100%;
  height: 1.3em;
  font-size: 1.4em;
  line-height: 1.4em;
  text-indent: 16px;
  text-align: left;
  background-color: var(--inputs);
  color: var(--text);
  border: none;
  transition: background-color 0.15s linear;
}

.login__form form input:hover,
.login__form form input:active,
.login__form form input:focus {
  background-color: var(--cyan);
  color: var(--black);
}

.login__form form button {
  float: left;
  width: 50%;
  cursor: pointer;
  background-color: var(--yellow);
  color: var(--black);
}

.login__form form button:hover {
  background-color: var(--green);
  color: var(--black);
}

.login__form form input[type='checkbox'] {
  position: absolute;
  width: 30px;
  opacity: 0;
  z-index: -1;
}

.login__form form label {
  float: right;
  position: relative;
  z-index: 0;
  padding-right: 29px;
  font-size: 1.4em;
  line-height: 1.4em;
  height: 1.3em;
  cursor: pointer;
}

.login__form form label:before {
  box-sizing: border-box;
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 1.3em;
  height: 1.3em;
  border: 2px solid var(--red);
  background-color: var(--red);
  z-index: -1;
}

.login__form form input[type='checkbox']:checked + label {
  padding-right: 15px;
  color: var(--black);
  z-index: 1;
}

.login__form form input[type='checkbox']:checked + label:before {
  top: 0;
  width: calc(100% + 19px);
  height: 1.3em;
  border: 2px solid var(--green);
  background-color: var(--green);
}

.login__form form label,
.login__form form label::before {
  -webkit-transition: 0.25s width ease, 0.25s color ease;
  -o-transition: 0.25s width ease, 0.25s color ease;
  transition: 0.25s width ease, 0.25s color ease;
}

.login__details {
  position: absolute;
  top: calc(50% + 90px);
  left: calc(50% - 200px);
  width: 400px;
  font-size: 1.2em;
  text-align: center;
}

.login__details span {
  font-weight: bold;
  padding-right: 6px;
}

.login__error {
  float: left;
  clear: both;
}

/*
 * scroller animation
 */

@keyframes scroller {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: 0px 46px;
  }
}

/*
 * media override styles
 */

@media only screen and (max-width: 1090px) {
  section {
    top: 30px;
    bottom: 30px;
    left: 40px;
    right: 40px;
  }

  header {
    top: 30%;
  }

  footer {
    font-size: 1.2em;
    /* text-indent: 10px; */
    text-indent: 0;
    text-align: center;
  }

  .login__form {
    left: 20%;
    width: 60%;
    top: calc(45% - 59px);
  }

  .login__form .form__header {
    height: 60px;
    line-height: 60px;
    font-size: 1.8em;
    background-size: contain;
  }

  .login__form form input,
  .login__form form button {
    height: 60px;
    line-height: 60px;
    font-size: 1.8em;
  }

  .login__form form input[type='checkbox'] {
    width: 30px;
  }

  .login__form form label {
    padding-right: 40px;
    font-size: 1.8em;
    line-height: 60px;
    height: 60px;
  }

  .login__form form label:before {
    width: 1.3em;
    height: 60px;
  }

  .login__form form input[type='checkbox']:checked + label {
    padding-right: 29px;
    float: right;
    width: 50%;
    box-sizing: border-box;
    text-align: right;
  }

  .login__form form input[type='checkbox']:checked + label:before {
    width: 100%;
    height: 60px;
  }

  .login__details {
    top: calc(50% + 160px);
    left: 20%;
    width: 60%;
    font-size: 1.6em;
  }
}

@media only screen and (max-width: 940px) {
  .login__form form input,
  .login__form form button {
    width: 100%;
  }

  .login__form form input[type='checkbox']:checked + label {
    width: 100%;
  }

  .login__form {
    top: calc(45% - 95px);
  }
}

@media only screen and (max-width: 815px) {
  section {
    top: 10px;
    bottom: 10px;
    left: 20px;
    right: 20px;
  }

  header {
    padding-top: 0px;
    font-size: 5em;
  }

  footer {
    font-size: 1em;
    text-indent: 0;
  }
}

@media only screen and (max-width: 655px) {
  header {
    padding-top: 0px;
  }

  footer {
    line-height: 1.1em;
  }
}

@media only screen and (max-width: 620px) {
  section {
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  header {
    padding-top: 0px;
    font-size: 4em;
  }

  footer {
    line-height: 1.1em;
  }
}