lion.css

:root{
  --blue: #1e90ff;
  --yellow:rgb(255, 196, 0);
  --orange:rgb(255, 60, 0);
  --byellow:rgb(255, 230, 0);
  --borange:rgb(255, 145, 0);
  --greyish:rgb(218, 133, 100);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.ship {
  position: absolute;
  width: 150px;
  height: 58px;
  bottom: 50px;
  left: 50px;
  background-image: url("./assets/ship.png");
  background-size: cover;

}


.audio{
  width: 40px;
  height: 40px;
  position: absolute;
  top:20px;
  left:20px;
  background-color: #6e12d8;
  display: flex;
  align-items: center;
  justify-content:center;
}


.home{
  width: 40px;
  height: 40px;
  left:80px;
}
.block{
  border-radius: 5px;
}

.trans{
  box-shadow:none;
  display: none;
}

body {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.container {
  width: 60vw;
  height: 100vh;
  background-image: url("./assets/space.webp");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
}

.leftCol,.rightCol{
  position:absolute;
  top:0;
  left:0;
  width:20vw;
  height:100vh;
  border-right:4px solid #1e90ff;
  background-image: url("assets/rain2.gif");
  background-size: cover;

}

.rightCol{
  left:80vw;
  border-left: 4px solid #1e90ff;
  border-right: none;
}

.ball {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(97, 97, 97);
  box-shadow:0 0 10px  rgb(255,255,255);
}

.lion {
  width:35vw;
  min-width: 600px;
  height: 30vw;
  min-height: 600px;
    display: grid;
    gap:5px;
    grid-template-columns: repeat(1fr,20);
    grid-template-rows: repeat(1fr,20);
    margin-left:auto;
    margin-right:auto;
}

.rightCol {
  left: 80vw;
  border-left: 4px solid #1e90ff;
  border-right: none;
  display: flex;
  justify-content: center;

}
.rightCol > h1 {
  color:blue;
  font-family: "Luckiest guy", cursive;
  margin-top: 20px;
  text-shadow: 0 0 5px blue;
}

.score {
  /* color:#000; */
  color: blue;
  font-family: "Luckiest guy", cursive;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
}


#a{
  grid-column: 5/8;
  grid-row: 5/6;
  background-color: var(--yellow);
  box-shadow:0 0 20px var(--yellow);
}
/*  */
#b{
  grid-column: 5/9;
  grid-row: 6/7;
  box-shadow:0 0 20px var(--yellow);
  background-color: var(--yellow);
}
/*  */
#c{
  grid-column: 3/6;
  grid-row: 7/8;
  background-color:var(--yellow);
  box-shadow:0 0 20px var(--yellow);

}

#d{
  grid-column: 6/10;
  grid-row: 7/8;
  background-color: var(--orange);
  box-shadow:0 0 20px var(--orange);
}
/*  */
#e{
  grid-column: 3/4;
  grid-row: 8/9;
  background-color: var(--byellow);
    box-shadow:0 0 20px var(--byellow);

}
#f{
  grid-column: 4/5;
  grid-row: 8/9;
  background-color: rgb(231, 231, 231);
  box-shadow:0 0 20px rgb(255, 255, 255);

}
#g{
  grid-column: 5/7;
  grid-row: 8/9;
  background-color: var(--orange);
  box-shadow:0 0 20px var(--orange);
}
#h{
  grid-column: 7/10;
  grid-row: 8/9;
  background-color: var(--byellow);
    box-shadow:0 0 20px var(--byellow)

}
#i{
  grid-column: 10/17;
  grid-row: 8/9;
  background-color: var(--borange);
  box-shadow:0 0 20px var(--borange);
}
/*  */
#j{
  grid-column: 2/5;
  grid-row: 9/10;
  background-color: var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
#k{
  grid-column: 5/9;
  grid-row: 9/10;
  background-color: var(--byellow);
    box-shadow:0 0 20px var(--byellow);
}
#l{
  grid-column: 9/18;
  grid-row: 9/10;
  background-color: var(--borange);
  box-shadow:0 0 20px var(--borange);
}
/*  */
#m{
  grid-column: 2/5;
  grid-row: 10/11;
  background-color: var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
#n{
  grid-column: 5/9;
  grid-row: 10/11;
  background-color: var(--byellow);
    box-shadow:0 0 20px var(--byellow);
}
#o{
  grid-column: 9/18;
  grid-row: 10/11;
  background-color: var(--borange);
  box-shadow:0 0 20px var(--borange);
}
/*  */
#p{
  grid-column: 5/9;
  grid-row: 11/12;
  background-color: var(--byellow);
    box-shadow:0 0 20px var(--byellow);
}
#q{
  grid-column: 9/18;
  grid-row: 11/12;
  background-color: var(--borange);
  box-shadow:0 0 20px var(--borange);
}
/*  */
#r{
  grid-column: 5/9;
  grid-row: 12/13;
  background-color: var(--byellow);
    box-shadow:0 0 20px var(--byellow);
}
#s{
  grid-column: 9/10;
  grid-row: 12/13;
  background-color:  var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
#t{
  grid-column: 13/15;
  grid-row: 12/13;
  background-color:  var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
#u{
  grid-column: 16/18;
  grid-row: 12/13;
  background-color:  var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
/*  */
#v{
  grid-column: 4/6;
  grid-row: 13/14;
  background-color:  var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
#w{
  grid-column: 8/10;
  grid-row: 13/16;
  background-color:  var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
#x{
  grid-column: 12/15;
  grid-row: 13/14;
  background-color:  var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
#y{
  grid-column: 16/18;
  grid-row: 13/16;
  background-color:  var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
#z{
  grid-column: 7/8;
  grid-row: 15/16;
  background-color:  var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
#a1{
  grid-column: 15/16;
  grid-row: 15/16;
  background-color:  var(--greyish);
  box-shadow:0 0 20px var(--greyish);
}
/*  */
#az{
  grid-column: 19/20;
  grid-row: 19/20;
  background-color:  rgba(255, 255, 255, 0);
}