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


.Main{
display:flex;
height:100vh;
width: 100%;
 }
 
.text-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1; /* Ensure text is above images */
            background-color:black;
            color: white;
            font-size:30px;
            Font-weight:bolder;
          border: 5px solid;
            border-image: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255),rgb(0, 255, 0));
            border-image-slice: 1;
        }
#A{
    height: 100vh;
    width: 50%;
  transition: transform 0.2s ease-in-out;
}

#A:hover{
    border: 5px solid;
            border-image: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
            border-image-slice: 1;
            }

#A img{
    height: 100%;
    width: 100%;
   object-fit:fill;
}


#B{
    height: 100vh;
    width: 50%;
   transition: transform 0.2s ease-in-out;
}

#B:hover{
    border: 5px solid;
            border-image: linear-gradient(to right,rgb(0, 0, 255),rgb(0, 255, 0),rgb(255, 0, 0));
            border-image-slice: 1;
}

#B img{
    height: 100%;
    width: 100%;
   object-fit:fill;
}

fade{
    animation-name:fade;
    animation-duration:2s;
}

@keyframes fade {
    from {
        opacity:.5;
    }
    to { opacity:1; }
}
.fade1{
     animation-name:fade;
    animation-duration:2s;}

@keyframes fade1 {
    from {
        opacity:.5;
    }
    to { opacity:1; }
}


@media screen and (max-width:700px){
    .text-container{
        font-size:25px;
        Font-weight:bolder;
    }
    #A{
        height: 100%;
        width: 50vw;
      transition: transform 0.2s ease-in-out;
    }
    #A:hover{
        border: 3px solid;
                border-image: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
                border-image-slice: 1;
                }
    #B{
        height: 100%;
        width: 50vw;
       transition: transform 0.2s ease-in-out;
    }
    #B:hover{
        border: 3px solid;
                border-image: linear-gradient(to right,rgb(0, 0, 255),rgb(0, 255, 0),rgb(255, 0, 0));
                border-image-slice: 1;
    }
    
}



@media screen and (max-width:550px){
    .text-container{
        font-size:15px;
        Font-weight:bolder;
    }
    #A{
        height: 100%;
        width: 50vw;
      transition: transform 0.2s ease-in-out;
    }
    #A:hover{
        border: 2px solid;
                border-image: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
                border-image-slice: 1;
                }
    #B{
        height: 100%;
        width: 50vw;
       transition: transform 0.2s ease-in-out;
    }
    #B:hover{
        border: 2px solid;
                border-image: linear-gradient(to right,rgb(0, 0, 255),rgb(0, 255, 0),rgb(255, 0, 0));
                border-image-slice: 1;
    }
    
}