*{
  
  scroll-behavior: smooth;
}
  
  
 
  @font-face {
    font-family:BungeeSpice-Regular ;
    src: url(./assets/font/BungeeSpice-Regular.ttf);
  }

  @font-face {
    font-family:CormorantGaramond-Bold;
    src: url(assets/fonts/CormorantGaramond-Bold.ttf);
  }

  @font-face {
    font-family:CormorantGaramond-BoldItalic;
    src: url(assets/fonts/CormorantGaramond-BoldItalic.ttf);
  }

  @font-face {
    font-family:CormorantGaramond-Italic;
    src: url(assets/fonts/CormorantGaramond-Italic.ttf);
  }

  @font-face {
    font-family:CormorantGaramond-SemiBoldItalic;
    src: url(assets/fonts/CormorantGaramond-SemiBoldItalic.ttf);
  }

  @font-face {
    font-family:Shrikhand-Regular;
    src: url(assets/fonts/Shrikhand-Regular.ttf);
  }
    @font-face {
      font-family:GermaniaOne-Regular;
      src: url(assets/fonts/GermaniaOne-Regular.ttf);
    }
  
    @font-face {
      font-family: star font;
      src: url(assets/fonts/star-font.ttf);
    }

    @font-face {
      font-family: PermanentMarker;
      src: url(assets/fonts/PermanentMarker.ttf);
    }
 
    @font-face {
      font-family: cut-font;
      src: url(assets/fonts/cut-font.ttf);
    }
   
   

    .main-div {
      box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
      width: 500px;
      margin: 0 auto;
      background-color: #b0e57c; 
    }
    
    .div1 {
      background-color: #ffcc29; 
      color: #3d3d3d; 
      text-align: center;
      border-bottom-left-radius: 200px;
      border-bottom-right-radius: 200px;
      height: 50px;
      font-family: 'star font', cursive;
      margin-top: 20px;
      width: 500px;
      margin: 0 auto;
    }
    
    .div2 {
      font-family: 'PermanentMarker', cursive;
      text-align: center;
      color: #8b4513; 
      font-size: 2em;
    }
    
    .div3 {
      font-family: 'cut-font', sans-serif;
      text-align: center;
      color: #df2c2c; 
      font-size: 2em;
    }
    
    .div4 {
      text-align: center;
      font-family: 'Patrick Hand SC', cursive;
      font-size: 2em;
      text-decoration: underline;
      color: #ff6347; 
    }

    #A{
      box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;   
      font-size: 40px;
      
  }
  td a{
    text-decoration: none;
    font-family: star font;
    color: blue;
  }
  td :hover { 
    color: red;
   }

   #B{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   
   #C{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   
   #D{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   
   #E{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;

   }

   

   #F{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #G{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #H{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #I{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #J{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #K{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #L{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #M{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #N{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #O{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #P{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #Q{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #R{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #S{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #T{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #U{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #V{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #W{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #X{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

  
   #Y{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #Z{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    text-decoration: none;
    font-size:40px;
   }

   #book-heading{
    font-family: cut-font;
    font-size: 70px;
    background-color: aqua;
    width: 500px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
   }

  
   
   #apple{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    width: 800px;
    margin: 120px auto;
    padding: 20px;
}

.card img {
    width: 200px;
}

.text {
    text-align: center;
    width: 49%;
}

.img {
    width: 49%;
    text-align: right;
}


.text,
.img {
    display: inline-block;
    vertical-align: middle;
}

.text p {
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 500;
    font-family: Shrikhand-Regular;
}


span  {
    font-size: 70px;
    font-family: cut-font;
    color: red;
}


#Banana{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}




#Car{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}


#Duck{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}


#Egg{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}


#Fish{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Grapes{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
   
}
#grapes {
  font-size: 50px;
}

#Hen{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Icecream{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}
#icecream {
  font-size: 40px;
}
#Jug{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Kite{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Lion{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Mango{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}
#mango {
  font-size: 40px;
}
#Nest{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}


#Orange{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}
#orange {
  font-size: 40px;
}
#Parrot{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}
#parrot {
  font-size: 40px;
}
#Queen{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}
#queen {
  font-size: 40px;
}
#Rose{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Sun{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Tree{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Umbrella{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Van{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Watch{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Xylophone{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Yolk{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#Zebra{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  width: 800px;
  margin: 120px auto;
  padding: 20px;
}

#button{
  height: 100px;
  width: 130px;
  
}