body,html
{
background-color: antiquewhite;
font-family: "Copperplate", Courier, monospace;
font-size: 20px;
cursor: url('pinkNature.png'), auto;
}


.bgimg
{
  background-color: antiquewhite;
  background-image: url("sisterPixel.png");
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  padding-top: 500px;
  padding-bottom: 300px;
}

button
{
  color:#EC78B8;
  background-color:#000000;
  font-size: 20px;
  font-family: 'Courier New', Courier, monospace;
  border: none;
  border-radius: 12px;
}

.topdiv
{
  background-color:  #EC78B8;
  padding-bottom: 20px;
  margin-left: -10px;
  margin-right: -10px;
  margin-top:-10px;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 20px;
  text-align: center;
  font-size: 20px;
  word-spacing: 10px;
}
a
{
color:#000000;
text-decoration: none;
}
a:hover
{
color: pink;
text-decoration: none;
}
hr
{
  width: 60%;
  color:#000000;
}
a.webdev:hover{
  color:black;
}

a.webdev{
  color:pink;
}


.items {
  min-height: 300px;
  position: relative;
  overflow: hidden;
}

.item {
  box-sizing: border-box;
  padding: none;
  position: absolute;
  width: 0%;
  background: #efefef;
  text-align: center;
  border-radius: 4px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: slide-item 4s infinite;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  opacity: 0;
}

.item:nth-child(2) { animation-delay: 1s; }
.item:nth-child(3) { animation-delay: 2s; }

@keyframes slide-item {
    0% { left: 150%; opacity: 1; }
   36% { left:  40%; opacity: 1; }
   72% { left: -50%; opacity: 1; }
  100% { left: -50%; }
}

.services-container
{
  column-count:3;
  text-align: center;
  color: pink;
  background-color: #EC78B8;
  width: 100%;
  border-radius: 0.375rem;
}
.category-heading
{
  color: pink;
  padding: none;
}

.services
{
  column-width: 500;
 
}


table, td, th {
  border: none;
  border-radius: 1rem;
  font-size: 20px;
  padding: 3px;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 25px;
}

th{
  font-size: 25px;
  color: pink;
}

.column-one-color {
  background-color: #EC78B8;
 
}

.column-two-color {
  background-color: plum;
 
}

.column-three-color {
  background-color: lightcoral;
 
}

#myBtn {
  display: none;  /*Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #000000; /* Set a background color */
  color: #EC78B8; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

@media screen and (max-width: 500px){
  .topdiv {
    display: flex; /* Turn the div into a flex container */
    flex-direction: column; /* Stack children vertically */
    height: auto; /* Let the height be determined by the content */
    padding: 10px 0; /* Add top and bottom padding for spacing */
  } 
  
  .topmenu{
    font-size: 20px; /* Use a readable font size */
    text-align: center; /* Center the text for a clean look */
    padding: 10px 0; /* Add vertical padding between links */
  }
  h1{
    font-size: 16px;
  }
  .bgimg{
    background-size: contain; 
  }

.item:nth-child(2) { animation-delay: 1s; }
.item:nth-child(3) { animation-delay: 2s; }

@keyframes slide-item {
    0% { left: 200%; opacity: 1; }
   36% { left:  40%; opacity: 1; }
   72% { left: -50%; opacity: 1; }
  100% { left: -50%; }
}

}