html, body{
    font-family: Montserrat, sans-serif;
    background: #d8d8d6;
    background-image: url(./images/background\ \(1\)-min\ 2.png);
    background-repeat: no-repeat;
    background-position: cover;
    background-size: cover;
    overflow-x: hidden !important;
    width: auto !important;
    
   
    font-family: 'Poppins', sans-serif;
   
}

html::-webkit-scrollbar{
    width: 2vw;
}

html::-webkit-scrollbar-thumb{
    background-color: #cd7359;
}

html::-webkit-scrollbar-track{
    background-color: #d8d8d6;
}
  
  .container{
    user-select: none;
    margin: 40px auto;
   
    background: #f0f0f2;
    color: #000;
    border-radius: 5px;
    width: 400px;
    text-align: center;
    box-shadow: 0 10px 20px -10px rgba(0,0,0,.75);
  }

  .container-weather{
    user-select: none;
    margin: 40px auto;
   
    background: #f0f0f2;
    color: #000;
    border-radius: 5px;
    width: 400px;
    text-align: center;
    box-shadow: 0 10px 20px -10px rgba(0,0,0,.75);
  }

.cover-photo{
    background: url(./images/wooden-bridge-koh-nangyuan-island-surat-thani-thailand.jpg);
    background-position: 80%;
    background-size: cover;
    height: 250px;
    width: 100%;
    border-radius: 5px 5px 0 0; 
}

.cloud{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(./images/cloud.png);
    animation: animate 100s linear;
}

@keyframes animate{
    0%{
        background-position: 0px;
    }
    100%{
        background-position: -5400px;
    }
}

.profile{
    position: relative;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    margin: -63px 0 0 -255px;
    border: 10px solid #f0f0f2;
    /*
    padding: 7px;
    background: #3d7d7c; */
}

.backphoto img{
    position: relative;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    margin: 183px 0 0 -255px;
    border: 10px solid #f0f0f2;
}
.profile-name-one{
    font-size: 25px;
    font-weight: bold;
    margin: -47px 0 0 120px;
    color: #02899c;
}

.profile-name{
    font-size: 25px;
    font-weight: bold;
    margin: -5px 0 0 120px;
    color: #5a6868;
}

.profile-name-two{
    font-size: 16px;
  
    margin: 1rem;
    color: #231e39;
}

.profile-name-three{
    font-size: 16px;
    margin: -5px 0 0 120px;
    
    color: #231e39;
}

.followme{
    font-size: 1rem;
    font-style: italic;
    color: #5a6868;
    padding: .2rem;
}

.font{
    width: 100%;
    text-align: center;
    color: #ddb247;
    transform: translate(13%, -30%);
    top: 50%;
    left: 50%;
    font-weight: 800;
    margin-top: -1.2rem;
}

.font span {
    font-size: 5.5rem;
    text-shadow: -0.08em 0.03em 0.12em rgba(0, 0, 0, 0.7);
}
.font span:not(:first-child) {
    margin-left: -0.18em;
}

p span{
    color: #02899c;
    font-style: italic;
}
.about{
    margin-top: 35px;
    line-height: 21px;
    margin: 1.5rem;
}
  button{
    margin: 14px 0 10px 0;
    cursor: pointer;
}
  .msg-btn, .follow-btn{
    background: #cd7359;
    border: 1px solid #cd7359;
    padding: 10px 25px;
    color: #fff;
    border-radius: 3px;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
}
  .follow-btn{
    margin-left: 10px;
    background: transparent;
    color: #02899c;
}
  .msg-btn:hover{
    color: #ddb247;
    background: #03bfbc;
    transition: .5s;
    border: 1px solid #03bfbc;
  }
.button-bottom{
    margin-top: -4rem;
}
.backdrop img{
    width: 16rem;
    height: 16rem;
    margin-top: -1rem;
}


 @-webkit-keyframes text-shadow-drop-center {
    0% {
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
      text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
    }
  }
  @keyframes text-shadow-drop-center {
    0% {
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
      text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
    }
  }


  ul.social{
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  ul.social li{
    list-style-type: none;
    display: inline-block;
    background-color: rgb(221, 178, 70);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: relative;
    
   
  }
  ul.social li a{
    display: block;
    text-align: center;
    font-size: 1.5rem;
    padding: 8px 0;
    color: #fff;
    text-shadow: 0 0 1px #bbb;
    transition: .5s;
  }
  ul.social li a:hover{
    transform: scale(1.3) rotate(-10deg);
    color: #02899c;
    
  }

  .social-two{
      margin: .8rem;
  }


h1{
    color: #02899c;
    font-size: 1.5rem;
}

hr{
    width: 40%;
    border: 2px solid #cd7359;
   margin-bottom: 1rem;
}

.form-contact{
  margin-top: 2rem;
}

.paypal{
    background-color: #1e477a;
    border: 1px solid #1e477a;
}



.cashapp{
    background-color: #118c4f;
    border: 10px solid #118c4f !important;
    margin: 10px 0 10px 0 !important;
    padding: 0 40% 0 38%;
    font-size: 1rem;
    cursor: pointer;
  
  
}
.paypal-button-container{
  cursor: pointer;
}

.qrcode img{
    width: 10rem;
}

a{
    text-decoration: none;
    color: #f0f0f2;
}

figure{
  border: 1px #02899c solid;
  padding: 4px;
}

figcaption{
  color: #231e39;
  font-style: italic;
  padding: 2px;
  text-align: center;
}

.qrcode-paragraph{
  margin: 1rem;
}

.qrcode-link{
  margin: 0 6rem;
}

.packaging-tips{
  padding: 1rem 6rem;
}





@media only screen and (max-width: 450px) {
    .container{
        user-select: none;
        margin: 40px auto;
       
        background: #f0f0f2;
        color: #000;
        border-radius: 5px;
        width: 380px;
        text-align: center;
        box-shadow: 0 10px 20px -10px rgba(0,0,0,.75);
      }

      .profile{
        height: 120px;
        width: 120px;
        margin: -63px 0 0 -220px;
    }

    .font span {
    font-size: 5.2rem;
    text-shadow: -0.08em 0.03em 0.12em rgba(0, 0, 0, 0.7);
}

.backphoto img{
    position: relative;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    margin: 163px 0 0 -230px;
    border: 10px solid #f0f0f2;
}

.profile-name-one{
    font-size: 23px;
    font-weight: bold;
    margin: -47px 0 0 120px;
    color: #02899c;
}

.profile-name{
    font-size: 23px;
    font-weight: bold;
    margin: -5px 0 0 120px;
    color: #5a6868;
}

.profile-name-two{
    font-size: 14px;
  
    margin: 1rem;
    color: #231e39;
}

.profile-name-three{
    font-size: 14px;
    margin: -5px 0 0 120px;
    
    color: #231e39;
}

.cashapp{
   
    padding: 0 148px 0 148px;
    font-size: 1rem;
    cursor: pointer;
  
}
}

@media only screen and (max-width: 400px) {
    .container{
        user-select: none;
        margin: 40px auto;
       
        background: #f0f0f2;
        color: #000;
        border-radius: 5px;
        width: 340px;
        text-align: center;
        box-shadow: 0 10px 20px -10px rgba(0,0,0,.75);
      }

      .profile{
        height: 120px;
        width: 120px;
        margin: -73px 0 0 -220px;
    }

    .font span {
    font-size: 4.7rem;
    text-shadow: -0.08em 0.03em 0.12em rgba(0, 0, 0, 0.7);
}

.backphoto img{
    position: relative;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    margin: 163px 0 0 -185px;
    border: 10px solid #f0f0f2;
}

.profile-name-one{
    font-size: 20px;
    font-weight: bold;
    margin: -43px 0 0 120px;
    color: #02899c;
}

.profile-name{
    font-size: 20px;
    font-weight: bold;
    margin: -5px 0 0 120px;
    color: #5a6868;
}

.profile-name-two{
    font-size: 13px;
  
    margin: 1rem;
    color: #231e39;
}

.profile-name-three{
    font-size: 13px;
    margin: -5px 0 0 120px;
    
    color: #231e39;
}
}

@media only screen and (max-width: 360px) {
    .container{
        user-select: none;
        margin: 40px auto;
       
        background: #f0f0f2;
        color: #02899c;
        border-radius: 5px;
        width: 330px;
        text-align: center;
        box-shadow: 0 10px 20px -10px rgba(0,0,0,.75);
      }

      .profile{
        height: 120px;
        width: 120px;
        margin: -73px 0 0 -185px;
    }
    .font span {
    font-size: 4.2rem;
    text-shadow: -0.08em 0.03em 0.12em rgba(0, 0, 0, 0.7);
}

.backphoto img{
    position: relative;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    margin: 163px 0 0 -185px;
    border: 10px solid #f0f0f2;
}

    .profile{
        height: 120px;
        width: 120px;
        margin: -63px 0 0 -185px;
    }

.profile-name-one{
    font-size: 18px;
    font-weight: bold;
    margin: -40px 0 0 120px;
    color: #02899c;
}

.profile-name{
    font-size: 18px;
    font-weight: bold;
    margin: -5px 0 0 120px;
    color: #5a6868;
}

.profile-name-two{
    font-size: 11px;
  
    margin: 1rem;
    color: #231e39;
}

.profile-name-three{
    font-size: 11px;
    margin: -5px 0 0 120px;
    
    color: #231e39;
}

}