@font-face {
  font-family: 'Genty';
  src: url('/font/GentyDemo-Regular.otf') format('opentype'),
       url('/font/GentyDemo-Regular.ttf') format('truetype');
}
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');

*{
  --primary-color: #085858;
  --secondary-color: #303030;
  --black: #000000;
  --latte-color: #8b1f0a;
  --Subheading-font: 'Arvo', serif;
  --Subheading-font: 'Roboto Condensed', sans-serif;
  --Subheading-font2: 'Roboto Mono', monospace;
  --Head-Text: 'Open Sans', sans-serif;
  --Qoutes: 'Libre Baskerville', serif;
  --type-writer: 'Space Mono', monospace;

  /* -------------------------------------------- */
  --sample-color1: #107a8a;
  --sample-color2: #2cb977;
  --sample-color3: #83e85a;
  --sample-color4: #3b5441;

}


/* LOGIN PAGE */

.navbar {
  display: flex;
  position: fixed;
  width: 100%;
  z-index: 1;
}

.navbar-nav, li{
 display: flex;
}


.login-bg {
  background: linear-gradient(to right, #f8f1f1, #e0d9d9, #e0d9d9) !important;
  /*border-radius: 200px;*/
  box-shadow: 6px 7px 5px 0px #939596;
}



.fw-normal {
  letter-spacing: 3px;
  text-align: center;
  font-weight: bold;
  font-family: 'Gabarito', Roboto Slab;
  font-size: 30px;
  text-decoration: none;
  color: white;
}

.form-label {
  font-size: 0.900rem;
}

.login-font-color {
  color: var(--black);
}

.message {
  text-align: center;
  margin-top: auto;
  margin: 15px 0 0;
  font-size: 15px;
}

.img-fluid{
    border-radius: 0 1rem 1rem 0;
    height: 100%;
}

.form-label {
  font-family: var(--Subheading-font2)
  
}

/* .container {
  max-width: 100%;
  height: 100%;
  background-image: url('/storage/images/Logo/peakpx.jpg');
  background-size: cover;
  background-position: center;
  background-color: #ffffff;
  height: 850px;
} */
                                      
.container {
  max-width: 100%;
  /* height: 100%; */
  height: 850px;
  /* background: linear-gradient(-45deg , #183030, #085858, #559e9e, rgb(247, 247, 247)); */
  /* animation: animate 10s ease infinite; */
  /* background-size: 400% 400%; */
}

@keyframes animate {
  0%{
    background-position: 0 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0 50%;
  }
}

.groupl {
  display: flex;
  line-height: 30px;
  align-items: center;
  position: relative;
  max-width: 100%;
  /* margin-bottom: 10%; */
}

.inputl {
  width: 100%;
  height: 40px;
  line-height: 30px;
  padding: 0 5rem;
  padding-left: 3rem;
  border: 2px solid transparent;
  border-radius: 10px;
  outline: none;
  background-color: #f8fafc;
  color: #0d0c22;
  /* transition: .5s ease; */
  transition: 0.35s;
  border-color: #304747be;
}

.inputl::placeholder {
  color: #94a3b8;
}

.inputl:focus, input:hover {
  outline: none;
  border-color: #085858;
  background-color: #fff;
  /* box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3); */
  box-shadow: 3px 3px 5px rgba(0,0,0,1),
1px 1px 10px rgb(255, 255, 255),
inset 1px 1px 5px rgba(0,0,0,1),
inset -1px -1px 5px rgb(255, 255, 255);
/* transform: scale(1.05); */
}

.iconl {
  position: absolute;
  left: 1rem;
  fill: none;
  width: 1rem;
  height: 1rem;
}




.card {
  /* margin-top: 1rem; */
  color: var(--seconday-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2%;
  background: linear-gradient(-45deg, 
    rgba(128, 148, 148, 0.8),
    rgba(66, 133, 133, 0.8),
    rgba(85, 158, 158, 0.8),
    rgba(140, 231, 231, 0.8)
  );
  background-size: 400% 400%;
  backdrop-filter: blur(2px);
  /* border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(0, 0, 0, 0.5); */
  box-shadow: 10px 10px 30px solid rgba(0, 0, 0, 0.5);
  animation: slideInLeft 1s ease-in, morphing 10s infinite, animate 5s ease infinite;
  box-shadow: 15px 16px 16px -5px rgba(0,0,0,0.75);
  -webkit-box-shadow: 15px 16px 16px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: 15px 16px 16px -5px rgba(0,0,0,0.75);
  height: 80%;
}


.card-body {
  align-items: center;
}

/* Footer */
.text-center{
  color: var(--seconday-color);
  background-color: var(--seconday-color);
  background: rgba(255 255 255 / 0.2);
  backdrop-filter: blur(50px);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 20px 20px 50px solid rgba(0, 0, 0, 0.5);
}

.text-center i{
  color: #000000;
}

.text-center a {
  color: #000000;
}

/* TypeJS */
.typescript{
  height: 50px;
}

.typeJsText {
  text-align: center;
  font-family: 'Genty';
  font-size: 48px;
  display: inline-block;
  padding: 0;
  border-right: 1px solid #414141;
  height: 70px;
  text-shadow: 5px 5px 4px #303030;
  /* text-shadow: 5px 5px 4px #adadad;
  background: linear-gradient(219deg, 
  #093f3f 19%, 
    transparent 19%,transparent 20%, 
    #093f3f 20%,  #093f3f  39%,
    transparent 39%,transparent 40%, 
    #093f3f 40%,#000000 59% ,
    transparent 59%,transparent 60%, 
    #000000 60%, #1d1d1d 79%,
    transparent 79%, transparent 80%, 
    #000000 80%);
    background-clip: text;
  -webkit-background-clip: text;
  color: transparent; */
}

/* @keyframes slideInLeft {
  from {
    transform: translateX(300px);
  }
  to {
    transform: translateX(0);
  }
} */


.button_login{
  display: flex;
  justify-content:center;
}

#particles .pg-canvas {
  display: block;
  position: absolute;
}
/* ---------------------------------------------------------------- */

@keyframes slideInLeft {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* @keyframes morphing {
  0% {
    border-radius: 27% 73% 33% 67% / 38% 25% 75% 62%;
    box-shadow: 10px 10px 30px solid rgba(0, 0, 0, 0.5);
  }
  25% { 
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    box-shadow: 10px 10px 30px solid rgba(0, 0, 0, 0.5);
  }
  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    box-shadow: 10px 10px 30px solid rgba(0, 0, 0, 0.5);
  }
  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    box-shadow: 10px 10px 30px solid rgba(0, 0, 0, 0.5);
  }
} */