* {
  margin: 0;
  padding: 0;
}

::selection {
  background:#ff02a29c;
  color:#fff;
}

.login--wrapper {
  background-color: #0b0a0a;
  min-height: 100vh;
  padding-top: 6%;
}

.content-wrapper {
width: 60%;
min-height: 60vh;
margin: 0 auto;

}

#first-title-text{
color:#c20ba9;
  font-family: monospace;
  font-size: 1.4rem;
  font-weight: 800;
  animation: blinker 2s linear 3;
  text-shadow: 2px 0 8px #b60073;
}

.logo--wrapper {
  min-height: 18vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* animation:fadeInDown 3s linear 1; */
  /* animation: blinker 1s linear 3; */
}

.first-title {
  min-height: 5vh;
}

#login-logo {
  display: none;
}

.login--notification {
color:#c20ba9;
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 800;
  text-shadow: 2px 0 8px #b60073;
  animation: fadeInDown 1s linear 1;
}

@keyframes fadeInDown {
from {
  opacity: 0;
  transform: translate3d(0, -20%, 0)
}
to {
  opacity: 1;
  transform: none
}
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}


.square {
  background: #0b0a0a;
  display: block;
  width: 50%;
  height: 200px;
  margin: 0 auto;
 position: relative;
 z-index: 0;
 overflow: hidden;

 border: none !important;
  padding: 0 !important;
  color: #c20ba9;
  border-radius: 6px;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  box-shadow: 0 4px 50px 0 rgb(0 0 0 / 7%);
  transition: .3s all linear;
}


#login--box {
opacity: 0;
transition:all .8s;
margin-top:7%;
}

.login--details {
  font-size:1.1rem;
  font-family: monospace;
  font-weight: 800;
  color:#c20ba9;
  display: flex;
  flex-direction: row;
  text-shadow: 2px 0px 8px #b60073;
}

.square .login--details{
  position: absolute;
  z-index: 1;
  height: calc( 100% - 8px );
  width: calc( 100% - 8px );
  top: 5px;
  left: 5px;
  border-radius: 8px;
  color: #c20ba9;
  background: #0b0a0a;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: center;
}

.square:after {
content: "";
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: transparent;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(90deg, rgba(255,255,255,0)    0%, rgb(172, 30, 129) 50%, rgba(255,255,255,0) 100%);
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
}

@-webkit-keyframes rotate {
100% {
    transform: rotate(360deg);
}
}

@keyframes rotate {
100% {
    transform: rotate(360deg);
}
}



.css-typing h4 {
border-right: .15em solid #fff;
font-family: monospace;
font-size: 1em;
white-space: nowrap;
overflow: hidden;
}
.css-typing h4:nth-child(1) {
width: 6.6em;
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
font-size:1em;
}

.css-typing h4:nth-child(2) {
width: 6.4em;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
font-size:1em;
}


.bellow--notification {
text-align: center;
margin-top:6%;
/* animation: blinker 2s linear 3; */
}

.login-success {
  color:#c20ba9;
font-family: monospace;
font-size: 1.1rem;
font-weight: 800;
text-shadow: 2px 0 8px #b60073;
text-align: center;
margin-top:6%;
}

#loginSucc {
opacity: 0;
color:#c20ba9;
font-family: monospace;
font-size: 1.1rem;
font-weight: 800;
text-shadow: 2px 0 8px #b60073;
transition: all .5s ease-in-out;
}
@keyframes type {
0% {
  width: 0;
}
99.9% {
  border-right: .15em solid #fff;
}
100% {
  border: none;
}
}

@-webkit-keyframes type {
0% {
  width: 0;
}
99.9% {
  border-right: .15em solid #fff;
}
100% {
  border: none;
}
}

@keyframes type2 {
0% {
  width: 0;
}
1% {
  opacity: 1;
}
99.9% {
  border-right: .15em solid #fff;
}
100% {
  opacity: 1;
  border: none;
}
}

@-webkit-keyframes type2 {
0% {
  width: 0;
}
1% {
  opacity: 1;
}
99.9% {
  border-right: .15em solid #fff;
}
100% {
  opacity: 1;
  border: none;
}
}



@keyframes blink {
50% {
  border-color: transparent;
}
}
@-webkit-keyframes blink {
50% {
  border-color: tranparent;
}
}








@keyframes blink {
50% {
  border-color: transparent;
}
}
@-webkit-keyframes blink {
50% {
  border-color: tranparent;
}
}

@media screen and (max-width:500px){
.content-wrapper {
  width:90%;
  min-height: 90vh;
}
.content-wrapper {
  text-align: center;
}
.square {
  width: 100%;
}
#login--box {
  margin-top: 27%;
}

.logo--wrapper {
  min-height: 9vh;
}

.login--wrapper {
padding-top: 24%;
}

.css-typing h4:nth-child(1) {
  width: 7.3em;
}
.css-typing h4:nth-child(2) {
  width:7.1em;
}



.login-success,
.bellow--notification  {

  margin-top:20%;
}


}