h1 {
margin: 0;
margin-bottom: 1rem;

}

p {
margin: 0;
margin-bottom: 1rem;
}

body {
background-image: url('images/girly bg.jpg');
background-attachment: fixed;
background-repeat: repeat;
overflow: auto;
}
#name{
font-family:'cherry_bomb_oneregular';
  font-size: 3em;
  -webkit-text-stroke: 1px #f5d0e9;
  color: black;
  margin-top: 60px;
  margin-left: 10px;
  }
#hov a {
background-color: #fae1f2;
border-top: 1px solid #000 ;
border-left: 1px solid #000 ;
border-right: 1px solid #000 ;
border-bottom-style: hidden;
border-radius: 5px 5px 0px 0px;
padding: 1px 10px;
color: #000;
font-family: lovely;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin: 2px 2px;
}
@font-face {
font-family:'cherry_bomb_oneregular';
src: url(fonts/webfontkit-20250916-210741/cherrybombone-regular-demo.html;)
}
@font-face {
    font-family: 'ALBA';
    src: url(https://dl.dropbox.com/s/0l4qryezh7ac9ls/ALBA____.TTF);
    
    
}
.header{
  border-width: 1px;
  border-style: solid;
  border-color: white;
  background-image: url('images/banner or header 1.jpg');
  background-repeat: repeat;
  border-radius: 10px;
  width: 1000px;
  position: auto;
   float: center;
  left: 1px;
  height: 170px;
  box-shadow: 0 0 6px 6px #ffe3f0;
  z-index: 5;
}
.first-box{
border-width: 7px;
border-style: solid;
border-image: url("https://i.imgur.com/2jXrMdE.png") 11 fill round;    
  margin: auto;
  width: 1000px;
  height: 170px;
  position: auto;
   margin-right: 400px;
  padding: 5px;
  z-index: 4;
  }
/*
Source - https://stackoverflow.com/a
Posted by Lety, modified by community. See post 'Timeline' for change history
Retrieved 2025-12-07, License - CC BY-SA 4.0
*/

#container {
  border-width: none;
border-style: none;
border-color: #f57dc5;  
width:1010px;
  height:70px; 
  margin: auto;
  margin-right: 400px;
  position:auto; 
  float: center;
}

.photobanner {
  position:auto; 
  animation: bannermove 10s linear infinite;
  float: center;
}

.photobanner img {    
  margin: 0 0.5em;
  width: 100%;
  height:100%;
  object-fit: contain; /* Prevents squishing and ensures the whole GIF is visible */
  /* Or use: object-fit: cover; to make it fill the container (may crop) */
}

@keyframes bannermove {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-50%, 0);
  }
}

.main-box{
  border-width: 7px;
border-style: solid;
border-image: url("https://i.imgur.com/2jXrMdE.png") 11 fill round;    
  margin: auto;
  width: 1000px;
  height: 1000px;
  position: center;
  margin-right: 400px;
   margin-bottom: 400px;
  padding: 5px;
  z-index: 4;
}