#page{
    height: 250vh;
    width: 100%;
    position: relative;
    /* background-color: #004658; */
    margin-top: 8vh;
}
.card1{
    cursor: pointer;
}
#box1{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 10%;
    top: 32%;
    border-top-left-radius:100px;
}

#box1 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}
#box1 img:hover{
    scale: 1.2;
}
#box2{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 40%;
    top: 4%;
    border-top-right-radius: 10%;
    border-bottom-left-radius: 10%;
}
#box2 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}
#box2 img:hover{
    scale: 1.2;
}
#box3{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    right: 10%;
    top: 3%;
    border-bottom-right-radius:40%;
}

#box3 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box3 img:hover{
    scale: 1.2;
}

 


#box4{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    right: 21%;
    top:18%;
    border-radius:10%;
    border-top-right-radius: 30%;
}

#box4 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box4 img:hover{
    scale: 1.2;
}
#box5{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 18%;
    top:18%;
    border-top-left-radius: 50%;
}

#box5 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box5 img:hover{
    scale: 1.2;
}



#box6{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 20%;
    top:47%;
    border-top-left-radius: 22%;
    border-top-right-radius:10% ;
}

#box6 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box6 img:hover{
    scale: 1.2;
}



#box7{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 10%;
    top:5%;
    border-radius: 30%;
    border-top-left-radius: 11%;
}

#box7 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box7 img:hover{
    scale: 1.2;
}
 



#box8{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    right: 10%;
    top:32%;
    border-top-right-radius: 88%;
    border-bottom-left-radius: 8%;
}

#box8 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box8 img:hover{
    scale: 1.2;
}



#box9{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    right: 18%;
    top:52%;
    border-top-right-radius: 8%;
    border-bottom-left-radius: 38%;
}

#box9 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box9 img:hover{
    scale: 1.2;
}




#box10{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 16%;
    top:74%;
    border-radius: 10%;
    border-bottom-right-radius: 180px;
}

#box10 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box10 img:hover{
    scale: 1.2;
}



#box11{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 60%;
    top:83%;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 50%;
}

#box11 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box11 img:hover{
    scale: 1.2;
}



#box12{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 38.5%;
    top:25%;
    border-radius:81% 67% 68% 92% / 23% 23% 17% 30%;
}

#box12 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box12 img:hover{
    scale: 1.2;
}





#box13{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 43%;
    bottom:44%;
    border-radius: 25% 75% 50% 25% / 13% 10% 25% 25%;
}

#box13 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box13 img:hover{
    scale: 1.2;
}



#box14{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    left: 38%; 
    bottom:25%;
    /* border-top-left-radius: 80%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%; */
}

#box14 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box14 img:hover{
    scale: 1.2;
}






#box15{
    position: absolute;
    height: 40vh;
    width: 20vw;
    overflow: hidden;
    right:15%;
    bottom: 16%;
    border-radius: 25% 25% 25% 75% / 75% 25% 25% 25%;
}

#box15 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s ;
}

#box15 img:hover{
    scale: 1.2;
}



#box16{
  position: absolute;
  height: 40vh;
  width: 20vw;
  overflow: hidden;
  right:40%;
  bottom: 11%;
  border-radius: 100% 67% 68% 0% / 57% 45% 17% 30%; 
}

#box16 img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: 1s ;
}

#box16 img:hover{
  scale: 1.2;
}


#box17{
  position: absolute;
  height: 40vh;
  width: 20vw;
  overflow: hidden;
  right:72%;
  bottom: 25%;
  border-radius: 0% 67% 68% 0% / 100% 45% 9% 30%; 
}

#box17 img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: 1s ;
}

#box17 img:hover{
  scale: 1.2;
}



#box18{
  position: absolute;
  height: 40vh;
  width: 20vw;
  overflow: hidden;
  right:50%;
  bottom: 0%;
  border-radius:  64% 36% 25% 75% / 0% 25% 25% 25%;
}

#box18 img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: 1s ;
}

#box18 img:hover{
  scale: 1.2;
}


.card1::before{
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background-image: linear-gradient(#39FF14, transparent);
  border-radius: 50%;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 1s, top 0s, left 0s;
 
  box-shadow: 0 0 10px 0px #39FF14,
              0 0 20px 5px #39FF14,
              0 0 40px 15px #39FF14,
              0 0 60px 5px #39FF14,
              0 0 80px 5px #39FF14,
              0 0 100px 5px #39FF14;
              
}
.card1:hover::before{
  opacity: 1;
}
.card1:hover::after{
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 18px;
}


@media screen and (max-width:550px) {
  #page{
    height: auto;
    width: 100%;
    position: relative;
    /* background-color: red; */
    padding: 2vmax;
    display: flex;
    flex-direction: column;
}
.card1{
  margin-top: 2vmax;
  border: 1px solid green !important;
}

#box1{
    position: static;
    height: 40vh;
    width: 100%;
    overflow: hidden;
    /* left: 10%; */
    /* top: 32%; */
    border-top-left-radius:100px;
}

#box2{
  position: static;
  height: 40vh;
    width: 100%;
    overflow: hidden;
    /* left: 40%; */
    /* top: 4%; */
    border-top-right-radius: 10%;
    border-bottom-left-radius: 10%;
}

#box3{
  position: static;
    height: 40vh;
   width:100%;
    overflow: hidden;
    /* right: 10%; */
    /* top: 3%; */
    border-bottom-right-radius:40%;
}

#box4{
  position: static;
    height: 40vh;
   width:100%;
    overflow: hidden;
    /* right: 21%; */
    /* top:18%; */
    border-radius:10%;
    border-top-right-radius: 30%;
}

#box5{
  position: static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* left: 18%; */
    /* top:18%; */
    border-top-left-radius: 50%;
}

#box6{
  position: static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* left: 20%; */
    /* top:47%; */
    border-top-left-radius: 22%;
    border-top-right-radius:10% ;
}

#box7{
    position:static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* left: 10%; */
    /* top:5%; */
    border-radius: 30%;
    border-top-left-radius: 11%;
}

#box8{
    position:static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* right: 10%; */
    /* top:32%; */
    border-top-right-radius: 88%;
    border-bottom-left-radius: 8%;
}

#box9{
    position:static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* right: 18%; */
    /* top:52%; */
    border-top-right-radius: 8%;
    border-bottom-left-radius: 38%;
}

#box10{
    position:static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* left: 16%; */
    /* top:74%; */
    border-radius: 10%;
    border-bottom-right-radius: 180px;
}

#box11{
    position:static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* left: 60%; */
    /* top:83%; */
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 50%;
}

#box12{
    position:static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* left: 38.5%; */
    /* top:25%; */
    border-radius:81% 67% 68% 92% / 23% 23% 17% 30%;
}

#box13{
    position:static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* left: 43%; */
    /* bottom:44%; */
    border-radius: 25% 75% 50% 25% / 13% 10% 25% 25%;
}

#box14{
    position:static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* left: 38%;  */
    /* bottom:25%; */
    /* border-top-left-radius: 80%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%; */
}

#box15{
    position:static;
    height:40vh;
   width:100%;
    overflow: hidden;
    /* right:15%; */
    /* bottom: 16%; */
    border-radius: 25% 25% 25% 75% / 75% 25% 25% 25%;
}

#box16{
  position:static;
  height:40vh;
 width:100%;
  overflow: hidden;
  /* right:40%; */
  /* bottom: 11%; */
  border-radius: 100% 67% 68% 0% / 57% 45% 17% 30%; 
}

#box17{
  position:static;
  height:40vh;
 width:100%;
  overflow: hidden;
  /* right:72%; */
  /* bottom: 25%; */
  border-radius: 0% 67% 68% 0% / 100% 45% 9% 30%; 
}

#box18{
  position:static;
  height:40vh;
 width:100%;
  overflow: hidden;
  /* right:50%; */
  /* bottom: 0%; */
  border-radius:  64% 36% 25% 75% / 0% 25% 25% 25%;
}

}

 @media only screen and (min-width: 551px) and (max-width: 750px) {

  #page{
    height: auto;
    width: 100%;
    position: relative;
    /* background-color: red; */
    padding: 2vmax;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.card1{
  margin-top: 2vmax;
}

#box1{
    position: static;
    height: 40vh;
    width: 48%;
    overflow: hidden;
    /* left: 10%; */
    /* top: 32%; */
    border-top-left-radius:100px;
}

#box2{
  position: static;
  height: 40vh;
    width: 48%;
    overflow: hidden;
    /* left: 40%; */
    /* top: 4%; */
    border-top-right-radius: 10%;
    border-bottom-left-radius: 10%;
}

#box3{
  position: static;
    height: 40vh;
   width:48%;
    overflow: hidden;
    /* right: 10%; */
    /* top: 3%; */
    border-bottom-right-radius:40%;
}

#box4{
  position: static;
    height: 40vh;
   width:48%;
    overflow: hidden;
    /* right: 21%; */
    /* top:18%; */
    border-radius:10%;
    border-top-right-radius: 30%;
}

#box5{
  position: static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* left: 18%; */
    /* top:18%; */
    border-top-left-radius: 50%;
}

#box6{
  position: static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* left: 20%; */
    /* top:47%; */
    border-top-left-radius: 22%;
    border-top-right-radius:10% ;
}

#box7{
    position:static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* left: 10%; */
    /* top:5%; */
    border-radius: 30%;
    border-top-left-radius: 11%;
}

#box8{
    position:static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* right: 10%; */
    /* top:32%; */
    border-top-right-radius: 88%;
    border-bottom-left-radius: 8%;
}

#box9{
    position:static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* right: 18%; */
    /* top:52%; */
    border-top-right-radius: 8%;
    border-bottom-left-radius: 38%;
}

#box10{
    position:static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* left: 16%; */
    /* top:74%; */
    border-radius: 10%;
    border-bottom-right-radius: 180px;
}

#box11{
    position:static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* left: 60%; */
    /* top:83%; */
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 50%;
}

#box12{
    position:static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* left: 38.5%; */
    /* top:25%; */
    border-radius:81% 67% 68% 92% / 23% 23% 17% 30%;
}

#box13{
    position:static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* left: 43%; */
    /* bottom:44%; */
    border-radius: 25% 75% 50% 25% / 13% 10% 25% 25%;
}

#box14{
    position:static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* left: 38%;  */
    /* bottom:25%; */
    /* border-top-left-radius: 80%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%; */
}

#box15{
    position:static;
    height:40vh;
   width:48%;
    overflow: hidden;
    /* right:15%; */
    /* bottom: 16%; */
    border-radius: 25% 25% 25% 75% / 75% 25% 25% 25%;
}

#box16{
  position:static;
  height:40vh;
 width:48%;
  overflow: hidden;
  /* right:40%; */
  /* bottom: 11%; */
  border-radius: 100% 67% 68% 0% / 57% 45% 17% 30%; 
}

#box17{
  position:static;
  height:40vh;
 width:48%;
  overflow: hidden;
  /* right:72%; */
  /* bottom: 25%; */
  border-radius: 0% 67% 68% 0% / 100% 45% 9% 30%; 
}

#box18{
  position:static;
  height:40vh;
 width:48%;
  overflow: hidden;
  /* right:50%; */
  /* bottom: 0%; */
  border-radius:  64% 36% 25% 75% / 0% 25% 25% 25%;
}
}