body {   
    background-attachment: fixed;
    background-size: cover;
    background-color: #eaece9;
    font-family: 'Roboto Condensed', serif;
}

a {
   color: #d9534f;
}

.container-content {
   background-color: #0d7377
}

.container-detail {
   background-color: #32e0c4
}

.container-footer {
   background-color: #eeeeee;
}

.container-list {
   list-style: none;
   padding: 0;
}

.link {
   color: #d9534f;
   font-weight: bold;
}

/* Hello Animation */

.hello {
   font-size: 4.5rem;
   font-family: Lobster;
   letter-spacing: 4;
}

.typing-animation {
   animation: bounce;
   position: relative;
   animation-duration: 2s;
   animation-delay: -0.3s;
   color: #d9534f;
   animation-timing-function: ease;
/* 
   animation: type 3s steps(6);
   overflow: hidden;
   white-space: nowrap;
   border-right: 4px solid #d9534f;
   width: 5ch; */
}

@keyframes bounce {
   0% {transform: translate(-1000%, 0); color: #d9534f;left: 0px;}
   50% {color: #f7f7f7; left: 700px;}
   100% {transform: translate(0%, 0); color:#d9534f;left: 0px; right: 0px;}

   /* 0% {width: 0ch;
   }
   100% {
      width: 6ch;
   } */
}

/* Media Query */

@media (min-width: 768px) { 
   .primary-container {
      height: 100%
   }
}

@media (max-width: 768px) { 
   .hello {
      font-size: 2rem;
   }
   p {
      font-size: 10px;
   }
   h1 {font-size:1.5rem;}
   h2 {font-size: 1.4rem;}
   h3 {font-size: 1.3rem;}
   h4 {font-size: 1.2rem;}
   h5 {font-size: 1.1rem;}

   @keyframes bounce {
      0% {transform: translate(-1000%, 0); color: #d9534f;left: 0px;}
      50% {color: #f7f7f7; left: 200px;}
      100% {transform: translate(0%, 0); color:#d9534f;left: 0px; right: 0px;}
   }
}