body{
  background-color: rgb(219,193,143);
  
}
nav{
  display: flex;
  height: 50px;
  /* background-color: brown; */
  background-color: rgb(219,193,143);
  /* color:black; */
  width:400px;
  margin-left: 1400px;
  justify-content: space-around;
  align-items: center;
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 15px;
 
}

nav a{
 
  color:black;
  font-size: 20px;
  border-style: solid;
  border-radius: 15px;
  border-width: 4px;
  border-color: black;
  padding: 10px;
  text-decoration: none;
}

.A{
  margin-top: 50px;
  margin-left: 50px;
  background-image: url(images/goodwitch3.png);
  border-radius: 15px;
  background-size: cover;
  height: 300px;
  width: 300px;
  background-color: aqua;
  
}

.AA{
  margin-top: 50px;
  margin-left: 50px;
  background-image: url(images/witchbadmj2.png);
  
  height: 300px;
  width: 300px;
  border-radius: 15px;
  background-size: cover;
  background-color: aqua;
  border-radius: 15px;
  
}

.B{
  margin-left: 100px;
  height: 300px;
  width: 800px;
  /* background-color:yellow; */
}

.C{
  margin-left: 100px;
  margin-top:100px;
  height: 300px;
  width: 300px;
  background-size: cover;
  background-image: url(images/kids\ at\ computer.png);
  background-color: bisque;
  border-width: 2px;
  border-color: black;
  border-style: solid;
}

section{
  display: flex;

}


.grid {
  margin-top:200px;
  /* padding-left: 300px; */

 width: 700px;
  /* margin-left: 50px; */
  display: grid;
  grid-template-columns: repeat(10, 4rem);
  /* gap: -5rem; */
  /* list-style-type: none; */
  border-radius: 0.5rem;
  height: 240px;
  justify-content: space-between;
  /* background-image: url(images/library-gc5664cd87_1280.jpg); */

}


.cell {
  height:60px;
  width: 60px;
  color: white;
  font-size: 40px;
  text-align: center;
  background-color: purple;
 list-style-type: none;
 border-radius: 15px;
 border-color: black;
 border-style: solid;
 border-width: 2px;
}

.answer {
  padding-top: 5px;
  display: inline-block;
  height:60px;
  width: 60px;
  color: black;
  font-size: 40px;
  text-align: center;
  background-color: greenyellow;
 list-style-type: none;
 border-radius: 15px;
 border-color: black;
 border-style: solid;
 border-width: 2px;
}




.divans{
  margin-top:20px;
  margin-left:400px;
  height: 100px;
  width:2500px;
  /* background-color: coral; */
}

.library{

  height: 500px;
  background-color: aqua;
  background-image: url(images/library-gc5664cd87_1280.jpg);
}

#H1, #H2, #H3 , #H4{
  
  visibility: hidden;
}
/* 
#iclicked{

  margin-left: 150px;
  font-size: 40px;
  height: 60px;
  width: 380px;
  border: solid;
  border-width: 2px;
  border-color: black;
  background-color: aqua;
  
} */

.logo{
  margin-left: 580px;
  height: 100px;
  width: 700px;
  background-size: cover;
  background-image: url(images/98\ CENT\ LESSON.jpg);
}

.spellbtn{
  padding: 20px;
  height:60px;
  width: 120px;
  color: white;
  font-size: 40px;
  text-align: center;
  background-color: purple;
 list-style-type: none;
 border-radius: 15px;
 border-color: black;
 border-style: solid;
 border-width: 2px;
}


.startbtn{
  /* margin-left: 100px; */
  padding: 20px;
  height:60px;
  width: 120px;
  color: white;
  font-size: 40px;
  text-align: center;
  background-color:green;
 list-style-type: none;
 border-radius: 15px;
 border-color: black;
 border-style: solid;
 border-width: 2px;
}


.tryAgainbtn{
  margin-top: 100px;
  margin-left: 50px;
  padding: 40px;
  padding-bottom: 80px;
  height:60px;
  width: 620px;
  color: black;
  font-size: 80px;
  text-align: center;
  background-color:yellow;
 list-style-type: none;
 border-radius: 15px;
 border-color: black;
 border-style: solid;
 border-width: 2px;
}

#excellent{
  margin-top: 200px;
  margin-left: 50px;
  padding: 40px;
  padding-bottom: 80px;
  height:60px;
  width: 700px;
  color: black;
  font-size: 80px;
  text-align: center;
  background-color:gold;
 list-style-type: none;
 border-radius: 15px;
 border-color: black;
 border-style: solid;
 border-width: 2px;
}

.ans{
  margin-top: 30px;
  margin-left: 200px;
  display: flex;
  align-items: center;
  gap:5px
}