@import url('https://fonts.googleapis.com/css?family=Abel|Arimo|Assistant|Lato|Montserrat|Noto+Sans|Open+Sans|Open+Sans+Condensed:300|Oxygen|Quicksand|Raleway|Roboto+Condensed|Roboto+Mono');


.about-section {
    background-color: rgb(255, 232, 236);
    padding-top: 180px;
    padding-bottom: 160px;

}

.about-title {
    font-family: 'Abel', sans-serif;
    text-align: center;
    color: gray;
    font-weight: 500;
    font-size: 22px;
}

.window {

    border-radius: 7px 7px 3px 3px;
    background: #222;
    color: #fff;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    width: 70%;
    font-family: 'Roboto Mono', monospace;  
}

.window::before {
    content: ' ';
    display: block;
    height: 48px;
    background: rgb(224, 221, 221);
}

.window::after {
    content: '. . .';
    position: absolute;
    left: 12px;
    right: 0;
    top: -3px;
    font-family: 'Roboto Mono', monospace;  
    font-size: 75px;
    color: #fff;
    line-height: 0;
    letter-spacing: -12px;
}
  
.terminal {
    margin: 20px;
    font-family: 'Roboto Mono', monospace;  
    font-size: 16px;
    color: #d8d7d7;
}

.terminal .log {
    white-space: nowrap;
    overflow: hidden;
    color: #868585;
          /* These are technically the same, but use both */
          overflow-wrap: break-word;
          word-wrap: break-word;
    
          -ms-word-break: break-all;
          /* This is the dangerous one in WebKit, as it breaks things wherever */
          word-break: break-all;
    
          /* Adds a hyphen where the word breaks, if supported (No Blink) */
          -ms-hyphens: auto;
          -moz-hyphens: auto;
          -webkit-hyphens: auto;
          hyphens: auto;
    
}

.terminal .command {
    width: 0%;
    white-space: nowrap;
    overflow: hidden;
    animation: write-command 5s both;
}

.terminal .command::before {
    content: 'jennywng:/$ ';
    color: #e7e7e7;
}

.terminal a {
  color: palevioletred;
}

.termina a:hover {
  color: peachpuff;
}
  

@keyframes write-command {
    0% {
      width: 0%;
    }
    
    
    100% {
      width: 100%;
    }
  }
  
@keyframes write-log {
    0% {
      height: 0;
    }
    
    16% {
      height: 0;
    }
    
    17% {
      height: 18px;
    }
    
    33% {
      height: 18px;
    }
    
    34% {
      height: 37px;
    }
    
    51% {
      height: 37px;
    }
    
    52% {
      height: 55px;
    }
    
    69% {
      height: 55px;
    }
    
    70% {
      height: 74px;
    }
    
    87% {
      height: 74px;
    }
    
    88% {
      height: 92px;
    }
    
    88% {
      height: 92px;
    }
    
    99% {
      height: 92px;
    }
    
    100% {
      height: 110px;
    }
  }