.indie-flower-regular {
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-style: normal;
  }
  
  
  body {
    cursor: cell;
    font-family: "Indie Flower", cursive;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    scroll-behavior:smooth;
    background: linear-gradient(180deg, #ffb4a2 0%, #b5838d 50%, #6d6875 200%);
    height: 100%;
}
.home { text-shadow: 3px 3px 14px rgba(20, 40, 100, 1); background: transparent; color: rgb(255, 255, 255); text-align: center; padding: 50px;  ; margin-top: 30px; position: relative; overflow: hidden; font-size: x-large;}
  .section.home{  padding: 40px; margin-top: 30px; text-align: center; }
  .about{  background: transparent; color: #ffffff; text-align: center; padding: 50px; position: relative; overflow: hidden; font-size: large;}
  .about{ text-shadow: 3px 3px 14px rgba(20, 40, 100, 1); background: transparent; color: #ffffff; text-align: center; padding: 50px; position: relative; overflow: hidden;}
  .services{ text-shadow: 3px 3px 14px rgba(20, 40, 100, 1); background: transparent; color: #ffffff; text-align: center; padding: 50px; position: relative; overflow: hidden;}
  .services a { cursor: grabbing; display: block; margin: 10px; color: #000000; text-decoration: none; }
  .quote {  color: white; padding: 30px; font-style: italic; }
  
  .contactme{ text-shadow: 3px 3px 14px rgba(20, 40, 100, 1); color: white; text-align: center; padding: 20px; }
  .contactme input, .contactme button /* From Uiverse.io by anniekoop */ 
  
  .input,button {

    cursor: grabbing;
    font-family: "Indie Flower";
    max-width: 650px;
    padding: 0.875rem;
    padding-right: 0.875rem;
    width: 100vw;
    font-size: 1rem;
    border: 1.5px solid #000;
    border-radius: 0.5rem;
    box-shadow: 2.5px 3px 0 #000;
    outline: none;
    transition: ease 0.25s;
    padding-bottom: 30px;
    padding-right: 0.85rem;
    margin-right: 1cm;
    width: 80%;
  }
  .inputtext{
    height: 3cm;
    cursor: grabbing;
    font-family: "SF Pro";
    max-width: 190px;
    width: 80%;
    padding: 0.875rem;
    font-size: 1rem;
    border: 1.5px solid #000;
    border-radius: 0.5rem;
    box-shadow: 2.5px 3px 0 #000;
    outline: none;
    transition: ease 0.25s;
  }
  
  .input:focus,button:focus,.inputtext:focus {
    box-shadow: 5.5px 7px 0 black;
  }
  
  nav {
    
    background: #6d6875da;
    padding: 30px;
    position: relative; 
    width: 100%; 
    top: 0; 
    z-index: 1; 
    display: flex; 
    align-items: center; 
    justify-content:space-evenly
}

nav .logo {
    width: 80px; 
    height: auto; 
    margin-right: 20px; /
}

nav a {
    text-decoration: none;
    padding: 20px 20px; 
    height: auto;
    cursor:grab; 
    border: none; 
    font-size: 15px; 
    color: #fff; 
    border-radius: 7px; 
    letter-spacing: 2px; 
    font-weight: 500; /* Font weight */
    transition: box-shadow 0.5s; /* Transition effect for box-shadow */
    background: #6d6875; /* Background color */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); /* Updated to use rgba for transparency */
}

nav a:hover {
    background: #8b8491; /* Example hover effect */
}
nav a:hover {
    box-shadow: 
        0 0 5px #b5838d,
        0 0 25px #ffcdb2ff,
        0 0 50px #b5838d,
        0 0 100px #6d6875ff; /* Glow effect on hover */
}
.services-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.service {
  background: rgba(86, 6, 26, 0.412);
  padding: 20px;
  border-radius: 10px;
  width: 250px;
  
  -webkit-box-shadow: 4.5px 9.5px 19.5px -3px rgba(28, 23, 23, 0.83);
-moz-box-shadow: 4.5px 9.5px 19.5px -3px rgba(28, 23, 23, 0.83);
box-shadow: 4.5px 9.5px 19.5px -3px rgba(28, 23, 23, 0.83);
}
.service a{ color: #ffb4a2; }
.service a:hover{
  transition: box-shadow 0.5s; 
  background-color: #ffffff21; border-radius: 10px; 
  -webkit-box-shadow: -4px -0.5px 20.5px 9px #ffb4a2;
-moz-box-shadow: -4px -0.5px 20.5px 9px #ffb4a2;
box-shadow: -4px -0.5px 20.5px 9px #ffb4a2;
cursor: grabbing;
transform: translateY(-2.5px);}
.service h3 {
  color: #ffbac8;
}

  
  .quote{
    border-radius: 0px 54px; border: 3px solid #57061a69;
    font-size: large;
    box-shadow: 12px 10px 19px 0px #000000, 5px 5px 10px 1px #000000;
  }
  .footers {
    background: #6d6875;
    padding: 30px; 
    text-align: center; 
    color: #ffffff; 
    position: relative; 
    width: 100%;
    top: 0; 
}

.footers a {
    text-decoration: none; /* No underline on links */
    margin: 0px; /* Margin around each link */
    background: #6d6875da; /* Semi-transparent background for links */
    padding: 20px ; /* Padding inside the links for better appearance */
    color: #fff; /* Text color for links */
    position: relative; /* Positioning relative to its normal position if needed */
    
  }

.footers a:hover {
    background: #ffb4a2ff; 
    background-color: #ffffff21; border-radius: 10px; 
  -webkit-box-shadow: -4px -0.5px 20.5px 9px #ffb4a2;
-moz-box-shadow: -4px -0.5px 20.5px 9px #ffb4a2;
box-shadow: -4px -0.5px 20.5px 9px #ffb4a2;
}
  body{
    /* CSS HEX */
--apricot: #ffcdb2ff;
--melon: #ffb4a2ff;
--salmon-pink: rgb(229, 152, 155);
--old-rose: #b5838d;
--dim-gray: #6d6875ff;

/* CSS HSL */
--apricot: #ffcdb3;
--melon: hsla(12, 100%, 82%, 1);
--salmon-pink: hsla(358, 60%, 75%, 1);
--old-rose: #b4838d;
--dim-gray: #6c6774;
}