/***
* CSS for the terminal I made for the welcome page
*/

.pf-terminal{
  min-width:400px;
  width: 50%;
  height: 80%;
  color: rgba(255, 255, 255, 0.67);
  margin: auto;
  position: relative;
  top: 10%;
  z-index: 2;
  -moz-animation-name: pf-terminal--visible;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-out;
  -moz-animation-duration: 1.5s;
  -webkit-animation-name: pf-terminal--visible;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 1.5s;
  animation-name: pf-terminal--visible;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 1.5s;
}
  .pf-terminal .pf-terminal-header{
    width: 100%;
    height:39px;
    /*min-height: 39px; */   
    line-height: 45px;
    background-color: #383838;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .pf-terminal .pf-terminal-header .btn{
    display: inline-block;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    margin-left: 5px;
  }
  .pf-terminal .pf-terminal-header .btn-list{
    margin-left: 4px;
  }
  .pf-terminal .pf-terminal-header .btn--orange{
    background-color: orange;
  }
  .pf-terminal .pf-terminal-header .btn--green{
    background-color: green;
  }
  .pf-terminal .pf-terminal-header .btn--red{
    background-color: red;
  }

  .pf-terminal .pf-terminal-body{    
    padding-top: 1%;
    background-color: rgba(78, 78, 78, 0.97);
    width: 100%;
    height:90%;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    overflow-y:hidden;
    overflow-x:hidden;
  }

.pf-terminal .pf-terminal-line{
  width:98%;
  padding-left: 1%;
  padding-right: 1%;
}
.pf-terminal .pf-terminal-line div{
  display: inline-block;
  padding:4px 0 0 4px;
}

  .pf-terminal .pf-terminal-line .pf-terminal-line--title{    
    font-weight: 700; 
  }

/**
* Smaller display version
*/

@media (max-width: 738px){
.pf-terminal{
  width: 80%;
  min-width: 80%;
  height: 80%;
}

.pf-terminal .pf-terminal-header .btn{
    display: inline-block;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    margin-top: 3.3%;
  }

}


@-moz-keyframes pf-terminal--visible {
    0% {
        -moz-transform: translateY(+100%);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes pf-terminal--visible {
    0% {
        -webkit-transform: translateY(+100%);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes pf-terminal--visible {
    0% {
        transform: translateY(+100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* typed.js CSS Cursor */
.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}