@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body{  
  background: rgba(36, 36, 36);
}


img {
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

p.hello {
  border-right: solid 0.25rem rgba(0,255,0,.75);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  font-size: 2rem;
  color: rgba(255,255,255,.70);
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 375px;
}
.container {
  text-align: center;
  font-family: 'Source Code Pro', monospace;
  color: rgba(255,255,255,.70);
  margin-bottom: 50px;
}

/* Animation */
p.hello {
  animation: animated-text 2.5s steps(40,end) 1s 1 normal both,
             animated-cursor 450ms steps(40,end) infinite;
}

/* text animation*/ 

@keyframes animated-text{
  from{width: 0;}
  to{width: 90%;}
}

/* cursor animations */

@keyframes animated-cursor{
  from{border-right-color: rgba(0,255,0,.75);}
  to{border-right-color: transparent;}
}

/* fade in boxes */

body{
  margin-bottom: 10rem;
}
.card {
  background: linear-gradient(to right, rgba(64, 63, 63, 0.75), rgba(64, 63, 63, 2));
  margin-top: 10rem; 
}
.right {
  margin-right: 0%;
  margin-left: 80%;
  
}
.left{
  margin-left: 0%;
}
[class*="card"] {
  width: 100%;
  height: 150px;
  margin-left: 0%;
  margin-right: 0%;
  border-radius: 60px;  
}
@media only screen and (min-width: 320px){
  
  p.hello {font-size: 1rem;}
  .txt {font-size: 1rem;
        padding-top: 50px;}

}

@media only screen and (min-width: 420px){
  .card {height: 150px;}
  .card {width: 100%;}
  .right {margin-left: 0%;
          border-radius: 60px;}
  .left {margin-left: 0%;
         border-radius: 60px;}
  .txt {font-size: 1rem;
        padding-top: 50px;
  }
}  

/* For tablet */
@media only screen and (min-width: 760px){
  .card {height: 160px;}
  .card {width: 50%;}
  .right {margin-left: 50%;
          border-top-left-radius: 150px ;
          border-bottom-left-radius: 150px ;}
  .left {margin-left: 0%;
         border-top-right-radius: 150px ;
         border-bottom-right-radius: 150px ;}
  p.hello {font-size: 1.3rem;}
  .txt {font-size: 0.9rem;
        padding-top: 50px;
        padding-left: 5px;
  }
} 

/* For small lap*/
@media only screen and (min-width: 1000px){
  .card {height: 200px;}
  .card {width: 40%;}
  .right {margin-left: 60%;
         border-top-left-radius: 150px ;
         border-bottom-left-radius: 150px ;}
  .left {margin-left: 0%;
         border-top-right-radius: 150px ;
         border-bottom-right-radius: 150px ;}
  p.hello {font-size: 1.8rem;}
  .hello {width: 768px;}
  img {height: 15rem; width: 15rem;}
  .txt {font-size: 1.3rem;
        padding-top: 65px;} 
}

/*For Pc */
@media only screen and (min-width: 1440px){
  .card {height: 230px;}
  .card {width: 40%;}
  .right {margin-left: 60%;
         border-top-left-radius: 150px ;
         border-bottom-left-radius: 150px ;}
  .left {margin-left: 0%;
         border-top-right-radius: 150px ;
         border-bottom-right-radius: 150px ;}
  p.hello {font-size: 2rem;}
  .hello {width: 768px;}
  img {height: 20rem; width: 20rem;}
  .txt {font-size: 1.5rem;
        padding-top: 80px;}
} 
@media only screen and (min-width: 2400px){
  .card {height: 350px;}
  .card {width: 40%;}
  .right {margin-left: 60%;
         border-top-left-radius: 150px ;
         border-bottom-left-radius: 150px ;}
  .left {margin-left: 0%;
         border-top-right-radius: 150px ;
         border-bottom-right-radius: 150px ;}
  p.hello {font-size: 3rem;}
  .hello {width: 768px;}
  img {height: 30rem;width: 30rem;}
  .txt {font-size: 2.5rem;
        padding-top: 110px;}
}