styles.css

/*text-align center inside the cntainer will center everything inside that does not have width set
Now if it is block element and has width set than you have to center
it using auto value in margin */
body{
    margin: 0;
    text-align: center;
    font-family: 'Acme', sans-serif;;
    
}
/*Margin affects div's outside. padding affects divs inside */
.top-contrainer{
    
    
    background-color: #E4F9F5;
    position: relative;
    padding-top: 100px;
    
    
}
.middle-container{
    margin: 100px 0;
}


h1{
    color: #66BFBF;
   margin: 3.13rem auto 0 auto;
   font-family: 'Caveat', cursive;
   font-size: 562.5%; /* 16px = 100% = 1em */
}
.blockchain{
    font-size: 2.5rem;
}

h2{
    color: #66BFBF;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
}
h3{
    color: #11999e;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.875rem;
    
}
.intro{
    width: 30%;
    margin: auto ;
}

.bottom-cloud{
    position: absolute;
    left: 250px;
    bottom: 300px;
}

.top-cloud{
    position: absolute;
    right: 300px;
    top: 40px;
    

}
p{
    line-height: 2;
}
.skill-row{
    
    margin: 150px auto 100px auto;
    width: 50%;
    text-align: left;
    
    
}
.computer-image{
    width: 25%;
    float: left;
    margin-right: 30px;

    
}

/*
.computer-image-discription{
    clear: left; /*clear is like anti float 
}
*/


.chillie-image{
    width: 25%;
    float: right;
    margin-left: 30px;
    
    
  
}
/*
.chillie-image-discription{
    clear: right;
}

*/
.get-in-touch{
    font-size: 2.5rem;
}
hr{
    border: dotted rgb(194, 149, 149) 6px;
    border-bottom: 0;
    width: 4%;
    margin: 100px auto;
}
.bottom-container{
    background-color: rgb(95, 99, 165);
    padding: 50px 0 20px;
}
.contact-message{
    width: 40%;
    margin: 40px auto 60px;
}



.btn {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 7;
    -moz-border-radius: 7;
    border-radius: 7px;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    border: solid #2f6180 2px;
    text-decoration: none;
  }
  
  .btn:hover {
    background: #30e3cb;
    background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
    background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
    background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
    background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
    background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
    text-decoration: none;
  }
  a{
      color: rgb(64, 145, 118);
      font-size: 1.3rem;
      font-family: sans-serif;
      margin: 10px 20px;
      text-decoration: none;
  }
  a:hover{
      color: white;
  }
  .copyright{
    color: white;
    font-size: 0.75rem;
    padding: 20px 0;
  }