/* VARIABLES
   =================================================================== */
:root {
  --font-size-xs: .75rem;
  --font-size-s: .875rem;
  --font-size-m: 1rem;
  --color-brand-blue: #021656;
  --color-brand-cyan: #22b8cf;
  --color-brand-violet: #7048e8;
  --color-brand-violet-dark: #5f3dc4;
  --color-gray-0: #f8f9fa;
  --color-gray-2: #e9ecef;
  --color-gray-4: #ced4da;
  --color-gray-5: #adb5bd;
  --color-gray-7: #495057;
  --color-gray-8: #343a40;
  --color-gray-9: #212529;
  --color-util-danger: #fa5252;
  --border-radius-default: 8px;
  --border-radius-s: 4px;
  --transition-default: all ease-in-out 200ms;
  --box-shadow-s: 0 12px 6px -12px rgba(0, 0, 0, .15);
  --box-shadow-m: 0 16px 12px -12px rgba(0, 0, 0, .15);
  --box-shadow-l: 0 16px 24px -12px rgba(0, 0, 0, .2);
  --box-shadow-button: 0 12px 6px -12px rgba(235, 100, 45, 1);
  --box-shadow-danger: 0 12px 6px -12px rgba(250, 82, 82, .5);
}

/* ANIMATIONS
   =================================================================== */
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fade-in-up {
  from {
    transform: translateY(48px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-up {
  from {
    transform: translateY(48px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes fade-out-down {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(48px);
    opacity: 0;
  }
}
@keyframes fade-out-down {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(48px);
    opacity: 0;
  }
}
@-webkit-keyframes shake {
  0%, to {
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  0%, to {
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}
/* ELEMENTS
 ===================================================================== */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline-color: var(--color-brand-violet);
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

html,
body {
  height: 100%;
  -moz-transform: scale(1.1);
  zoom:110%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#333,#000);
  font-size: var(--font-size-m);
  line-height: 1.5;
  font-family: "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.roosterbody {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#333,#000);
  font-size: var(--font-size-m);
  line-height: 1.5;
  font-family: "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* BACKGROUND
   =================================================================== */
.c-background {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--color-brand-violet);
  opacity: 0;
  -webkit-animation-name: fade-in;
          animation-name: fade-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 750ms;
          animation-duration: 750ms;
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}

.c-background__shape {
  fill: var(--color-brand-cyan);
}

/* LOGIN
   =================================================================== */
.c-login {
  opacity: 0;
  
  -webkit-animation-name: fade-in-up;
          animation-name: fade-in-up;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
}

.c-login__container {
  width: 320px;
  max-width: 100%;
  padding: 24px 24px 16px 24px;
  border-radius: var(--border-radius-default);
  background-color: white;
  box-shadow: var(--box-shadow-l);
}

.c-rooster__container {
  width: 500px;
  max-width: 100%;
  padding: 24px 24px 16px 24px;
  border-radius: var(--border-radius-default);
  background-color: white;
  box-shadow: var(--box-shadow-l);
}

.c-login__container.has-error {
  -webkit-animation-name: shake;
          animation-name: shake;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 750ms;
          animation-duration: 750ms;
}

/* LINKS
   =================================================================== */
.c-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.c-links__item {
  display: block;
  padding: 4px 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-7);
  text-decoration: none;
}

.c-links__item:hover,
.c-links__item:focus,
.c-links__item:active {
  text-decoration: underline;
}

/* FORM
   =================================================================== */
.c-form {
  display: grid;
  grid-gap: 16px;
  
}

.f-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  padding: 0;
}

.f-label {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0 6px;
  margin-left: 6px;
  font-size: var(--font-size-s);
  font-weight: 700;
  transition: var(--transition-default);
  transform: translateY(-50%);
  background-color: white;
  color: var(--color-gray-8);
}

.f-text {
  width: 100%;
  border: none;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--color-gray-2);
  border-radius: var(--border-radius-s);
  order: -1;
  font-size: var(--font-size-m);
  box-shadow: none;
  transition: var(--transition-default);
  background-color: transparent;
  color: var(--color-gray-9);
  -webkit-appearance: none;
  -moz-appearance: none;
}

.f-text:hover,
.f-text:focus {
  outline: none;
  border-color: var(--color-gray-5);
}

.f-text:focus {
  box-shadow: var(--box-shadow-s);
}

.f-text:focus + .f-label,
.f-text.is-filled + .f-label {
  font-size: var(--font-size-s);
  top: 0;
}

.f-text.has-error {
  border-color: var(--color-util-danger);
}

.f-submitted .c-background {
  -webkit-animation-name: fade-out;
          animation-name: fade-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 750ms;
          animation-duration: 750ms;
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
  opacity: 1;
}

.f-submitted .c-login {
  -webkit-animation-name: fade-out-down;
          animation-name: fade-out-down;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 750ms;
          animation-duration: 750ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  opacity: 1;
}

/* BUTTON
   =================================================================== */
.c-button {
  font-size: var(--font-size-m);
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--border-radius-s);
  padding: 12px;
  background-color: var(--color-brand-violet);
  color: white;
  transition: var(--transition-default);
  cursor: pointer;
}

.c-button:hover,
.c-button:focus,
.c-button:active {
  background-color: var(--color-brand-violet-dark);
}

.c-button:focus,
.c-button:active {
  box-shadow: var(--box-shadow-button);
  outline: none;
}

/* REVEAL
   =================================================================== */
.c-reveal {
  position: absolute;
  right: 12px;
  border: none;
  background-color: white;
  cursor: pointer;
}

.c-reveal > .c-icon--eye {
  fill: var(--color-gray-5);
}

.c-reveal:focus {
  outline: none;
  fill: var(--color-gray-4);
}

.c-reveal:hover > .c-icon--eye,
.c-reveal:focus > .c-icon--eye {
  fill: var(--color-gray-7);
}

.f-text[type=text] ~ .c-reveal > .c-icon--eye {
  fill: var(--color-brand-violet-dark);
}

/* ICONS
   =================================================================== */
.c-icon {
  display: block;
  width: 24px;
  height: 24px;
  transition: var(--transition-default);
}

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 4px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 25%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}