body{ color: #40514e;
    margin: 0%;
    text-align: center;
}
.top-container{
    background-color: #e4f9f6;
    padding-left: 5px;
    /* background-image: url(https://media.giphy.com/media/uV6ZueyzR8J6pCdxtZ/giphy.gif); */
} 

.middle-container{
    margin: 100px 0;
    
}
.bottom-container{
    background-color: #66bfbf;
    padding: 50px 0 20px;
    
}
.bottom-cloud{
    position: absolute;

}
/* .top-cloud{
    align-items: center;
} */
.name{
    margin: 0%;
    font-family: 'Brush Script MT', cursive;
    /* color: rgb(241, 0, 0); */
    margin-top: 80px;
    font-size: 100px;
    color:black;
    text-align: center;
    animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
    from {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 35px red;
    }
    to {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px red, 0 0 40px red, 0 0 50px red, 0 0 60px red, 0 0 70px red;
    }
  }
  
  
#paragraph-1{
    font-family: 'algerian';
    color: rgb(72, 9, 245);
    padding-top: 30px;
    font-size: 25px;
    padding-left: 80px;
}
#profile-img{
    width: 180px;
}
.headings{
    font-size: 20px;
    color:red; }
.skill-row{
    width: 50%;
    margin: 100px auto 100px auto;
    text-align: left;
}
p{
    line-height: 1.8;
}
.html5{
    width: 25%;
    float: left;
    margin-right: 30px;
}

.css{
    width: 25%;
    float: left;
    margin-right: 30px;
    float: right;
}
.hello{
    font-size: 30px;
    color: red;
}
.horizontal-row{
    border: dotted #c6f5f5 6px;
    width: 4%;
    border-top: none;
    margin: 100px auto;
}
.intro{
    width: 30%;
    margin: auto;
}
.footer-link:hover{
  font-size: 30px;
}
a{
    margin: 20px 10px ;
}
.contact-message{
    width: 40%;
    margin: 40px auto 60px;

}
.btn {
    background: #11cdd4;
    background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
    background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
    background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
    background-image: -o-linear-gradient(top, #11cdd4, #11999e);
    background-image: linear-gradient(to bottom, #11cdd4, #11999e);
    -webkit-border-radius: 15;
    -moz-border-radius: 15;
    border-radius: 15px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    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;
  }
  .teamar {
    background: #d93434;
    background-image: -webkit-linear-gradient(top, #d93434, #2bb82f);
    background-image: -moz-linear-gradient(top, #d93434, #2bb82f);
    background-image: -ms-linear-gradient(top, #d93434, #2bb82f);
    background-image: -o-linear-gradient(top, #d93434, #2bb82f);
    background-image: linear-gradient(to bottom, #d93434, #2bb82f);
    -webkit-border-radius: 9;
    -moz-border-radius: 9;
    border-radius: 9px;
    font-family: Georgia;
    color: #f7f7f7;
    font-size: 13px;
    padding: 10px 20px 10px 20px;
    border: solid #e63b10 2px;
    text-decoration: none;
  }
  
  .teamar:hover {
    background: #ebeb11;
    background-image: -webkit-linear-gradient(top, #ebeb11, #344fd9);
    background-image: -moz-linear-gradient(top, #ebeb11, #344fd9);
    background-image: -ms-linear-gradient(top, #ebeb11, #344fd9);
    background-image: -o-linear-gradient(top, #ebeb11, #344fd9);
    background-image: linear-gradient(to bottom, #ebeb11, #344fd9);
    text-decoration: none;
  }
  @media screen and (max-width: 800px) {
    .name{
      width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
    }
  }