/**
* Core
**/
body {
  font-family: 'IBM Plex Regular';
  background-image: url('../img/pattern.png'), linear-gradient(to bottom right, #0B0D13, #1A1D27);
  background-attachment: fixed;
  color: #E6E9EE; 
  /*background-position: center;
  animation: drift 60s linear infinite;*/
}

/*@keyframes drift {
  from { background-position: 0 0; }
  to   { background-position: 1000px 1000px; }
}*/

input:focus,
textarea:focus,
button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/**
* Color Classes
**/
.glow {
    color :#29F0E6;
}

.glow-soft {
    color :#9EECE7;
}

.deep {
    color: #0B0D13;
}

.deep-void {
    color: #06080C;
}

.panel {
    color: #1A1D27;
}

.accent {
    color: #37B5A0;
}

.text {
    color: #E6E9EE;
}

.metal {
    color: #3D4451;
}

.alert {
    color: #E57B2F;
}

/**
* Buttons
 **/
.btn-onyx {
    border: 0;
    background-image: linear-gradient(135deg, #37B5A0, #29F0E6);
    background-size: 200% 200%;
    background-position: left center;
    color: #06080C;
    font-family: 'IBM Plex Medium';
    transition: background-position 0.5s ease-in-out;
}

.btn-onyx:hover {
    border: 0;
    color: #06080C;
    font-family: 'IBM Plex Medium';
    background-position: right center;
}

/**
* Common Classes
**/
.logo {
    display: block;
    width: 97%;
    max-width: 300px;
    margin: 10px auto;
    animation: pulse-glow 3s ease-in-out infinite;
}

/**
* Form Classes
**/

.form-control, .form-control:focus  {
  position: relative;
  font-family: 'IBM Plex Mono';
  border: 2px solid transparent;
  border-radius: 6px;
  background-image:
    linear-gradient(#3D4451, #3D4451),  /* inner background */
    linear-gradient(to right, #29F0E6, #9EECE7);  /* gradient border */
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #E6E9EE;
  font-size: 13px;
}

.form-control::placeholder {
  color: #E6E9EE;
}

/**
* Login Page
**/
#login {
    width: 97%;
    max-width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/**
* Font Families
**/
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../font/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Regular';
    src: url('../font/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Medium';
    src: url('../font/IBMPlexSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/**
* Font Classes
**/
.regular {
    font-family: 'IBM Plex Regular';
}

.medium {
    font-family: 'IBM Plex Medium';
}

.mono {
    font-family: 'IBM Plex Mono';
}

/**
* Animations
**/
@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 6px #29F0E6);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 16px #9EECE7);
    transform: scale(1.03);
  }
}