@font-face {
  font-family: "Consolas";
  src: url("/fonts/Monospace.ttf") format("truetype");
    }

body {
    background: black;
}

div.title {
  margin-left: 30%;
     
    flex-shrink: 0;
    color: #f51659;
    text-align: center;
    font-family: Consolas, "Courier New";
    font-style: medium;
    font-style: o;
    font-weight: 10;
    line-height: medium;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 20;
    display: flex;
    flex-direction: row;
    justify-content: left;
    text-shadow: 0px 0px  1.5px rgb(255, 255, 255);
    animation: opacity 10s reverse ;
    animation-delay: s;
    opacity: 0;;
     
}

.terminal {
  margin-left: 20%;   
    flex-shrink: 0;
    color: #f51659;
    text-align: center;
    font-family: Consolas, "Courier New" ;
    font-style: medium;
    font-weight: 1;
    line-height: medium;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 10;
    display: flex;
    flex-direction: column;
    text-shadow: 0px 0px  1.5px rgb(255, 255, 255);
}

.one {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 1s steps(60,end);
  transition: 2s;
}

.two {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 2s steps(60,end);
  transition: 2s;
}

.three {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 3s steps(60,end);
}

.four {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 4s steps(60,end);
  transition: 2s;
}

.five {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 5s steps(60,end);
  transition: 2s;
}

.six {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 6s steps(60,end);
  transition: 2s;
}

.seven {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 7s steps(60,end);
  transition: 2s;
}

.eight {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 8s steps(60,end);
}

.nine {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 9s steps(60,end);
  transition: 2s;
}

.ten {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 10s steps(60,end);
  transition: 2s;
}

.nine {
  overflow: hidden;
  white-space: nowrap;  
  animation: typing 5s steps(60,end);
  transition: 2s;
}


.load {
  animation: opacity .5s infinite;
  transition: 2s;

}  

.container {
  margin: 20px auto;
  margin-top: 10;
  width: 500px;
  text-align: center;
  border-style: solid;
  border-width: .1px;


}

.progress {
  padding: px;
  background: blackwhite;
  box-shadow: inset 0 1px 2px #f51659;
  transition: 2s;
}

.progress-bar {	
  height: 18px;
	background-color: #fa5a8a;  
  transition: 2s linear;  
  transition-property: width, background-color;
  transition: 2s;    
}

.progress-striped .progress-bar { 	
  background-color: #f51659; 
  width: 100%; 
  animation: progressAnimationStrike 10s;
}

.cl {
  margin-top: 10%;
  margin-left: 40%; 
  margin-bottom: 1%;
  display: flex;
  justify-content: center;
  width: 20%;
  height: 10%;
  font-family: Consolas, "Courier New";
  font-size: 70;
  text-transform: uppercase;
  opacity: 0;
  animation: opacity .5s infinite linear;
  animation-delay: 10s;
  background-color: #f51659;
  border: 0px solid ;
  transition-duration: 0.4s;
  transition: 2s;
}

.cl:hover {
  color: #f51659;
  background-color: black ;
  border: #f51659 solid;
  transition: 2s;
}

@keyframes progressAnimationStrike {
     from { width: 0 }
     to   { width: 100% }
}
  
 @keyframes blink{
    0%{}
    100% {
      background: white;
      color: black;
    }
  }
  
  @keyframes opacity{
    0%{
      opacity: 0%;
    }
    100% {
      opacity: 100%;
    }
  }
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }