body {
    background-color: lightgray;
    font-family: "Merriweather", serif;
    margin: 0;
    text-align: center;
}

h1 {
    font-size: 5.625rem;
    color: #d59663;
    width: 20%;
    margin: 50px auto 0 auto;
    font-family: "Caveat", cursive;
}

h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 2.5rem;
    color: #d59663;
    font-weight: normal;
}

h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.5em;
    color: #884c94;
    ;
}

a {
    color: #d59663;
    ;
}

hr {
    border-top: dotted 10px #884c94;
    border-bottom: none;
    border-left: none;
    border-right: none;
    width: 5%;
    margin: 100px auto;
}

.profile {
    padding-top: 100px;
}

.about-me {
    width: 30%;
    margin: 50px auto;
    line-height: 2;


}



.skill-row {
    width: 50%;
    margin: 100px auto;
    text-align: left;
    line-height: 2;
}

.topcontainer {
    background-color: #884c94;
    position: relative;
    padding-top: 100px;

}

.middlecontainer {
    background-color: lightgray;
    padding-top: 100px;
}

.bottomcontainer {
    background-color: #884c94;
    padding: 75px;
    color: #547795;
    font-weight: 200;
}


/* ---Contact Me section--- */

.letschat {
    width: 30%;
    margin: 40px auto 60px;
    line-height: 2;
}

.contact-me {
    background-color: lightgray;
    padding: 0px 100px 100px 100px;
}

.btn {
    background: #884c94;
    background-image: -webkit-radial-gradient(circle, rgba(136,76,148,1) 20%, rgba(213,150,99,1) 100%);
    background-image: -moz-radial-gradient(circle, rgba(136,76,148,1) 20%, rgba(213,150,99,1) 100%);
    background-image: -ms-radial-gradient(circle, rgba(136,76,148,1) 20%, rgba(213,150,99,1) 100%);
    background-image: -o-radial-gradient(circle, rgba(136,76,148,1) 20%, rgba(213,150,99,1) 100%);
    background-image: radial-gradient(circle, rgba(136,76,148,1) 20%, rgba(213,150,99,1) 100%);
    -webkit-border-radius: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    color: white;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    border: solid #884c94 2px;
    text-decoration: none;
}

.btn:hover {
    background: #8cb8a2;
    background-image: -webkit-linear-gradient(180deg, rgba(136,76,148,1) 68%, rgba(213,150,99,1) 100%);
    background-image: -moz-linear-gradient(180deg, rgba(136,76,148,1) 68%, rgba(213,150,99,1) 100%);
    background-image: -ms-linear-gradient(180deg, rgba(136,76,148,1) 68%, rgba(213,150,99,1) 100%);
    background-image: -o-linear-gradient(180deg, rgba(136,76,148,1) 68%, rgba(213,150,99,1) 100%);
    background-image: linear-gradient(180deg, rgba(136,76,148,1) 68%, rgba(213,150,99,1) 100%);
    text-decoration: none;
}

/* end of contact me section */


.copyright {
    color: white;
    font-size: 80%;
    padding-top: 50px;
}

.footer-link {
    margin: 20px;
    font-size: 1.5rem;
    font-family: "Montserrat", sans-serif;
    text-decoration: none;
}

.footer-link:hover {
    color: white;
}

.dev {
    text-decoration: underline;
}

.top-spider {
    position: absolute;
    right: 300px;
    top: 50px;
}


.halloween-skull {
    float: left;
    margin-right: 30px;

}

.cauldron {
    float: right;
    margin-left: 30px;
}



/* CSS colour pallete 

--purple: #884c94
--orange: #d59663