body{
    margin:0;
    text-align: center;
    font-family: 'Merriweather', serif;
    color: #40514E;
}
/* div{
    background-color: #E4F9F5;
} */
h1{
    font-size: 5em;
    margin: 50px auto 50px auto;
    font-family: 'Sacramento', cursive;
    color: #66BFBF;
    line-height: 0.6;
}
h2{
    font-size: 2.5rem;
    font-family: 'Montserrat', sans-serif;
    color: #66BFBF;
    font-weight: normal;
}
.no-margin{
    margin-bottom: 0px;
}
h3{
    font-family: 'Montserrat', sans-serif;
    color: #66BFBF;
    font-weight:bold;
}
p{
    line-height: 2;
}
hr{
    border: dotted #b9dfdf 6px;
    border-bottom: none;
    width: 4%;
    margin: 100px auto;
}
.top-container{
    background-color: #E4F9F5;
    position: relative;
    padding-top: 80px;
}
.web{
    text-decoration: underline;
}
.cloud{
    position: absolute;
    width: 10em;
}
.bottom-cloud{
   left: 220px;
   bottom: 290px;
}
.top-cloud{
    right: 250px;
    top: 40px;
 }
 .skill-row{
     width: 50%;
     margin: 80px auto 80px auto;
     text-align: left;
     line-height: 2;
 }
 .profile-img{
    width: 14em;
     margin-top: 40px;
 }
 .qr-img{
    width: 14em;
     /* margin-top: 40px; */
 }
 .tools-img{
    width: 9%;
    margin: 15px;
}
.tools-row{
    width: 48%;
    margin: 70px auto 70px auto;
    display: flow-root;
}
 .skill-img{
    width: 12em;
    float: left;
    margin-right: 7px;
}
.exp-img{
    width: 12em;
}
.anchor-exp-img{
    margin-right: 90px;
}
.exp-image-row{
    width: 100%;
    margin: 60px;
}
.intro{
    width: 30%;
    margin: auto;
}
.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: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    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;
  }
  .bottom-container{
    background-color: #66BFBF;
    padding: 50px 0 20px;
  }
  .middle-container{
      margin: 50px 0;
  }
  .footer-links{
    color: #11999E;
    font-family: 'Montserrat', sans-serif;
    margin: 10px 20px;
  }
  .footer-links:hover{
    color: #eaf6f6;
}
.site-links{
    color: #66BFBF;
}
  a{
    color: inherit;
    text-decoration: none;
  }
  .copyright{
    color: #eaf6f6;
    font-size: 0.75rem;
    font-family: 'Montserrat', sans-serif;
    padding: 20px 0;
  }

  .image-container{
      margin-left: 150px;
  }

  .image {
    position: relative;
    width: 100px;
    float: left;
}

.image__img {
    display: block;
    width: 70%;
}

.image__overlay {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 18vh;
    font-family: 'Quicksand', sans-serif;
    /* background: rgba(0, 0, 0, 0.6);
    color: #ffffff; */
    background: rgb(255 255 255 / 30%);
    color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}

.image__overlay--blur {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(3px)
}

.image__overlay--primary {
    background: #009578;
}

.image__overlay > * {
    transform: translateY(20px);
    transition: transform 0.25s;
    -webkit-transform: translateY(20px);
    -webkit-transition: transform 0.25s;
    -webkit-transition: -webkit-transform 0.25s;
}

.image__overlay:hover {
    opacity: 1;
}

.image__overlay:hover > * {
    transform: translateY(0);
}

.image__title {
    font-size: 1.3em;
    font-weight: bold;
}

.image__description {
    font-size: 1.25em;
    margin-top: 0.25em;
}

.box{
    /* box-shadow: 0 0 20px 2px rgba(0,0,0,0.1); */
    /* transition: 0.3s; */
}
.box:hover{
    transform: scale(1.3);
    z-index: 2;
}
.skill-img1{
    width: 12em;
    /* float: right; */
    margin: 15px;
}
.img-container{
    
    width: 13em;
    float: right;
 
    position: relative;

    margin-left: 25px;
}
/* .img-container img{
    width: 50%;
    height: 100%;
} */
.top-image{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0; 
    transition: all 0.2s ease-in;
    width: 17em;
    height: 100%;
}
.top-image:hover{
    opacity: 1; 
    transform: scale(1.3);
    z-index: 2;
}
.mountain-img {
    width: 36em;
  }
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .mountain-img {
        width: 23em;
    }
    .image{
        left: 45px;
    }
    .image__overlay{
        min-height: 13vh;
    }
    .bottom-cloud{
        bottom: 170px;
        left: 265px;
    }
    .margin-bottom{
        margin-bottom: 60px;
    }
    .skill-row {
        text-align: center;
    }
    .exp-image-row{
        margin: 0px;
        padding-top: 60px;
    }
    .cloud{
        width: 7em;
    }
    .no-margin {
    margin-bottom: 30px;
}   
.top-container{
    padding-top: 130px;
}
}