html, body {
  margin: 0px;
  padding: 0px;
  background-color: #F6E9FF;
  color: #73429C;
  font-family: Verdana;
}

a:link {
  color: #AF65E9;
}

a:visited {
  color: #73429C;
}

a:hover {
  color: #8B00FF;
}

a:active {
  color: #C786FF;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

h3 {
  text-align: center;
}

.pvid{
  position: relative
}

.pvidimg img {
  position: absolute;
  top: 505px;
  left: 1310px;
  display: block;
  z-index: 10;
}

.pvidtext {
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-word;
  position: absolute;
  top: 525px;
  left: 1540px;
}

.comp{
  position: relative
}

.compimg img {
  position: absolute;
  width: 600px;
  height: auto;
  top: 55px;
  left: 75px;
  rotate: 10deg; 
}

.rinimg img {
  position: absolute;
  width: 200px;
  height: auto;
  top: 755px;
  left: 1260px;
  rotate: -20deg;
  z-index: 9;
}

.dummy{
  position: relative
}

.dummyimg img {
  position: absolute;
  width: 350px;
  height: auto;
  top: 150px;
  left: 775px;
  display: block;
  transform-origin: center center; 
  animation: spin 0.75s linear infinite;
  animation-play-state: paused;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.dummyimg:hover {
  animation-play-state: running;
}

.flower{
  position: relative
}

.flowertext {
  position: absolute;
  top: 550px;
  left: 150px;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.flowerimg img {
  position: absolute;
  width: 250px;
  height: auto;
  top: 550px;
  left: -85px;
  display: block;
  transition: transform 0.4s ease; 
}

.flowerimg:hover img {
  transform: translateX(70px);
}

.flower:hover .flowertext {
  opacity: 1;
  visibility: visible;
}

.puppy{
  position: relative
}

.puppyimg {
  position: absolute;
  width: 350px;
  height: auto;
  top: 650px;
  left: 275px;
  display: block;
  transition: transform .2s;
}

.puppyimg:hover {
  transform: scale(1.5);
}

.wave{
  position: relative
}

.waveimg {
  position: absolute;
  width: 250px;
  height: auto;
  top: 720px;
  left: 1465px;
  rotate: 50deg;
}

.smug{
  position: relative
}

.smugimg img {
  position: absolute;
  width: 400px;
  height: auto;
  top: 700px;
  left: 800px;
  display: block;
}

.realmecon {
    position: absolute;
    top: 100px;
    right: 350px;
    width: 400px;
}

#realme {
    width: 100%;
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

#realmetext {
    margin-top: 20px;
    text-align: start;
}

.gridcon {
    width: 700px;
    margin-left: 200px;
}

.gridhead {
    text-align: center;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    gap: 25px 50px;
    margin-top: 10px;
}

.grid img {
    width: 200px;
    height: 300px;
    border: 5px solid #AF65E9;
    box-sizing: border-box;
}