* {
    box-sizing: border-box;
  }
body{
margin: 0;
padding: 0;
background-image: url("image4.jpg");
background-size: cover;
}

/* milkway start*/  
/* .milky-way
{
    background: #000 url(https://cdn.spacetelescope.org/archives/images/screen/heic0602a.jpg) no-repeat center center /cover;
    width: 700px;
    height: 700px;
    margin: 100px auto auto;
    border-radius: 50%;
    box-shadow: inset 0 0 40px #000, inset 0 0 40px #000;
    transform: rotateX(-50deg);
    animation: animate 60s linear infinite;
}

@keyframes animate {
    0%{
        transform: rotateX(40deg) rotate(0deg);
    }
    100%{
        transform: rotateX(40deg) rotate(360deg);
    }
}

@media screen and (max-width: 540px) {
    .milky-way {
        background: #000 url(https://cdn.spacetelescope.org/archives/images/screen/heic0602a.jpg) no-repeat center center /cover;
        width: 100vw;
        height: 60vh;
        margin: 170px auto auto;
        border-radius: 66%;
        box-shadow: inset 0 0 40px #000, inset 0 0 40px #000;
        transform: rotateX(-50deg);
        animation: animate 60s linear infinite;
        position: relative;
    }
} */
/* milkway end */


#left-arrow, #right-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 30px;
    width: 30px;
    z-index: 2;
}

#left-arrow,
#right-arrow {
  position: absolute;
  top: calc(50% + 16%);
  transform: translateY(-50%);
  height: 30px;
  width: 30px;
  cursor: pointer;
}

#left-arrow {
  left: calc(20px + 10%);
}

#right-arrow {
  right: calc(20px + 10%);
}

.image-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: center;
    height: 100vh;
}
#arjuna-image {
    z-index: 2;
    position: absolute;
    top: calc(50% + 26%);
    left: calc(50% - 20%);
    transform: translateY(-50%);
}

#krishna-image {
    z-index: 2;
    position: absolute;
    top: calc(50% + 19%);
    left: calc(50% - 2%);
    transform: translateY(-50%);
}

@media screen and (max-width: 540px) {
    #arjuna-image,
    #krishna-image {
        z-index: 4; /* Adjust the z-index to make sure images are above the milky-way */
        position: absolute;
        top: calc(50% + 34%); /* Adjust the top position as needed */
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #arjuna-image {
        width: 25%; /* Increase the width by 15% */
        top: 68%; /* Adjust the top position */
        left: 25%; /* Adjust the left position */
    }

    #krishna-image {
        width: 26%; /* Increase the width by 15% */
        top: 65%; /* Adjust the top position */
        left: 70%; /* Adjust the left position */
    }

    #left-arrow,
    #right-arrow {
        top: calc(50% + 16%); /* Adjust the top position for smaller screens */
        transform: translateY(-50%);
        height: 30px;
        width: 30px;
        cursor: pointer;
    }

    #left-arrow {
        left: 5%; /* Move the left arrow more left */
    }

    #right-arrow {
        right: 5%; /* Move the right arrow more right */
    }
}


@media screen and (max-width: 450px) {
    #arjuna-image,
    #krishna-image {
        top: calc(50% + 40%); /* Adjust the top position for smaller screens */
        width: 30%; /* Increase the size of arjuna and krishna by 5% */
    }

    #krishna-image {
        top: 67%; /* Move the krishna image top by 15% */
        left: 70%; /* Move the krishna image right by 15% */
    }

    #arjuna-image {
        top: 72%; /* Move the krishna image top by 15% */
        left: 27%; /* Move the krishna image right by 15% */
    }

    #left-arrow,
    #right-arrow {
        top: calc(50% + 14%); /* Adjust the top position for smaller screens */
        transform: translateY(-50%);
        height: 30px;
        width: 30px;
        cursor: pointer;
    }

    #left-arrow {
        left: 5%; /* Move the left arrow more left */
    }

    #right-arrow {
        right: 5%; /* Move the right arrow more right */
    }
}

@media only screen and (min-width : 541px) and (max-width: 767px) {
    #arjuna-image,
    #krishna-image {
        top: calc(30% + 50%); /* Adjust the top position for smaller screens */
        width: 23%; /* Increase the size of arjuna and krishna by 5% */
    }

    #krishna-image {
        top: 70%; /* Move the krishna image top by 15% */
        left: 55%; /* Move the krishna image right by 15% */
    }

    #arjuna-image {
        top: 75%; /* Move the krishna image top by 15% */
        left: 22%; /* Move the krishna image right by 15% */
    }

    #left-arrow,
    #right-arrow {
        top: calc(50% + 25%); /* Adjust the top position for smaller screens */
        transform: translateY(-50%);
        height: 30px;
        width: 30px;
        cursor: pointer;
    }

    #left-arrow {
        top:70%;
        left: 5%; /* Move the left arrow more left */
    }

    #right-arrow {
        top:70%;
        right: 5%; /* Move the right arrow more right */
    }
}


/* speech bubble for arjun --> by Anupam aka Rygeen*/  
.pos-arjuna{
    margin-left: 2.5rem;
    margin-top:7rem;
}
.bubble1 {
    --r: 25px; /* the radius */
    --t: 40px; /* the size of the tail */
     
    max-width: 300px;
    max-height: 200px;
    padding: calc(2*var(--r)/3);
    -webkit-mask: 
      radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
        var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
      conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
        calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
      radial-gradient(50% 50%,#000 98%,#0000 101%) 
        0 0/var(--r) var(--r) space padding-box;
    background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
    color: #ffffff;
    font-weight: 500;
    
  }
  .right {
    --_d: 100%;
    border-right: var(--t) solid #0000;
    margin-left: var(--t);
    place-self: end;
  }
  
/* for krishna bubble */

.pos-krishna{
    margin-left: 46rem;
    margin-top: -11rem;
}
.bubble2 {    
      
      
      scrollbar-color: blue orange;
      scrollbar-width: thin;
      scroll-margin-top: 0;
      
      margin-bottom: 8rem;
      overflow-wrap: break-word;
      overflow-y: scroll;
      
      
    --r: 25px; /* the radius */
    --t: 40px; /* the size of the tail */
    
    max-width: 400px;
    max-height: 170px;
    padding: calc(2*var(--r)/3);
    -webkit-mask: 
      radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
        var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
      conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
        calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
      radial-gradient(50% 50%,#000 98%,#0000 101%) 
        0 0/var(--r) var(--r) space padding-box;
    background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
    color: #fff;
    font-weight: 500;
  }
  
.bubble2::-webkit-scrollbar-thumb {
    background-color: transparent;
}
.bubble2::-webkit-scrollbar {
    display: none;
}

  .left {
    --_d: 0%;
    border-left: var(--t) solid #0000;
    margin-right: var(--t);
    place-self: start;
  }
  
 /*krishna bubble end here*/

 @media screen and (max-width: 540px) {  /* for smartphone*/
    .pos-arjuna{
        margin-left: 0;
        margin-top:17rem;
    }
    
    .bubble1 {
        overflow-wrap: break-word;
          overflow-y: auto;
     --r: 20px; /* the radius */
    --t: 10px; /* the size of the tail */
    
    max-width: 150px;
    max-height: 100px;
    padding: calc(2*var(--r)/3);
    -webkit-mask: 
      radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
        var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
      conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
        calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
      radial-gradient(50% 50%,#000 98%,#0000 101%) 
        0 0/var(--r) var(--r) space padding-box;
    background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
    color: #ffffff;
    font-weight: 200;
    }
    .pos-krishna{
        margin-left: 16rem;
        margin-top: -11rem;
    }
    .bubble2 {    
          margin-bottom: 8rem;
          overflow-wrap: break-word;
          overflow-y: auto;
        --r: 25px; /* the radius */
        --t: 10px; /* the size of the tail */
        
        max-width: 260px;
        max-height: 100px;
        padding: calc(2*var(--r)/3);
        -webkit-mask: 
          radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
            var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
          conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
            calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
          radial-gradient(50% 50%,#000 98%,#0000 101%) 
            0 0/var(--r) var(--r) space padding-box;
        background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
        color: #ffffff;
        font-weight: 100;
      }
      
    
    .bubble2::-webkit-scrollbar {
        display: none;
    }
    
}


@media screen and (min-width: 541px) and (max-width: 767px) {  /*for tablets screen*/
    .pos-arjuna{
        margin-left: 0;
        margin-top:17rem;
    }
    
    .bubble1 {
        overflow-wrap: break-word;
          overflow-y: auto;
     --r: 20px; /* the radius */
    --t: 10px; /* the size of the tail */
    
    max-width: 150px;
    max-height: 100px;
    padding: calc(2*var(--r)/3);
    -webkit-mask: 
      radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
        var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
      conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
        calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
      radial-gradient(50% 50%,#000 98%,#0000 101%) 
        0 0/var(--r) var(--r) space padding-box;
    background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
    color: #ffffff;
    font-weight: 200;
    }
    .pos-krishna{
        margin-left: 20rem;
        margin-top: -11rem;
    }
    .bubble2 {    
          margin-bottom: 8rem;
          overflow-wrap: break-word;
          overflow-y: auto;
        --r: 25px; /* the radius */
        --t: 10px; /* the size of the tail */
        
        max-width: 300px;
        max-height: 100px;
        padding: calc(2*var(--r)/3);
        -webkit-mask: 
          radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
            var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
          conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
            calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
          radial-gradient(50% 50%,#000 98%,#0000 101%) 
            0 0/var(--r) var(--r) space padding-box;
        background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
        color: #ffffff;
        font-weight: 100;
      }
      
    
    .bubble2::-webkit-scrollbar {
        display: none;
    }
}
@media screen and (min-width: 768px) and (max-width: 950px) {  /*for bigger tablets*/
    .pos-arjuna{
        margin-left: 5rem;
        margin-top:7rem;
    }
    
    .bubble1 {
        overflow-wrap: break-word;
          overflow-y: auto;
     --r: 20px; /* the radius */
    --t: 10px; /* the size of the tail */
    
    max-width: 200px;
    max-height: 100px;
    padding: calc(2*var(--r)/3);
    -webkit-mask: 
      radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
        var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
      conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
        calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
      radial-gradient(50% 50%,#000 98%,#0000 101%) 
        0 0/var(--r) var(--r) space padding-box;
    background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
    color: #ffffff;
    font-weight: 300;
    }
    .pos-krishna{
        margin-left: 36rem;
        margin-top: -11rem;
    }
    .bubble2 {    
          margin-bottom: 8rem;
          overflow-wrap: break-word;
          overflow-y: auto;
        --r: 25px; /* the radius */
        --t: 20px; /* the size of the tail */
        
        max-width: 260px;
        max-height: 150px;
        padding: calc(2*var(--r)/3);
        -webkit-mask: 
          radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
            var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
          conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
            calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
          radial-gradient(50% 50%,#000 98%,#0000 101%) 
            0 0/var(--r) var(--r) space padding-box;
        background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
        color: #ffffff;
        font-weight: 300;
      }
      
    
    .bubble2::-webkit-scrollbar {
        display: none;
    }
}
/* @media screen and (max-width: 320px){
    #arjuna-conversation {
        transform: scale(0.7);
        left: -8%;
        bottom: 22rem;
    }
    #krishna-conversation {
        transform: scale(0.9);
        left: 12%;
        bottom:37rem
    }
} */
@media screen and (min-width:1440px) and (max-width: 1900px) {  /*for desktop screen*/
    .pos-arjuna{
        margin-left: 10rem;
        margin-top:18rem;
    }
    
    .bubble1 {
          /* margin-bottom: 8rem; */
        overflow-wrap: break-word;
          overflow-y: scroll;
     --r: 20px; /* the radius */
    --t: 10px; /* the size of the tail */
    
    max-width: 300px;
    max-height: 100px;
    padding: calc(2*var(--r)/3);
    -webkit-mask: 
      radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
        var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
      conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
        calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
      radial-gradient(50% 50%,#000 98%,#0000 101%) 
        0 0/var(--r) var(--r) space padding-box;
    background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
    color: #ffffff;
    font-weight: 500;
    }
    .bubble1::-webkit-scrollbar {
        display: none;
    }
    .pos-krishna{
        margin-left: 62rem;
        margin-top: -20rem;
    }
    .bubble2 {    
          margin-bottom: 8rem;
          overflow-wrap: break-word;
          overflow-y: scroll;
        --r: 25px; /* the radius */
        --t: 20px; /* the size of the tail */
        
        max-width: 480px;
        /* max-height: 230px; */
        padding: calc(2*var(--r)/3);
        -webkit-mask: 
          radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
            var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
          conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
            calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
          radial-gradient(50% 50%,#000 98%,#0000 101%) 
            0 0/var(--r) var(--r) space padding-box;
        background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
        color: #ffffff;
        font-weight: 500;
      }
      
    
    .bubble2::-webkit-scrollbar {
        /* display: none; */
    }
}


#play,
#pause {
	float: left;
	width: 40px;
    position: absolute;
    bottom: 2%;
    left: 1%;
    z-index: 99;
}
#play:hover,
#pause:hover {
	cursor: pointer;
}
#pause {
	display: none;
}