@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root{
    --left-bg-color:rgba(186, 103, 255,0.7); 
    --right-bg-color:rgba(48, 42, 42,0.7); 
    --left-hover-color:rgba(186, 103, 255,1); 
    --right-hover-color:rgb(53, 116, 53);
    --hover-width:75%; 
    --other-width:25%; 
    --speed:1000ms;
}

*{
    box-sizing: border-box;
}
body{  
    font-family: "Roboto",sans-serif;
    margin:0;  
    overflow:hidden;
    height:100vh;
}  
h1{ 
    font-size: 4rem;
    position:absolute; 
    left:50%; 
    top:15%; 
    color:#fff; 
    white-space: nowrap;
    transform:translateX(-50%);
}

.btn{ 
   position:absolute; 
   left:50%; 
   top:40%;  
   color:#fff;
   font-size: 1rem; 
   display: flex; 
   align-items: center; 
   justify-content: center; 
   border:0.2rem solid white;
   text-decoration:none; 
   text-transform: uppercase;    
   width:15rem; 
   transform:translateX(-50%); 
   padding:0.7rem;
}


.container{
    position:relative; 
    width: 100%; 
    height:100%;
    background: #333;

} 
.split{
    position:absolute; 
    width:50%; 
    height:100%;  
    overflow: hidden;
} 

.split.left{ 
    left:0; 
    background:url('ps.jpg') ;
     
    background-repeat: no-repeat; 
    background-size: cover;
} 

.split.left .btn:hover{
    background-color: var(--left-hover-color); 
    color:white; 
    border-color:var(--left-hover-color);  ;
}

.split.left::before{
    content: ''; 
    position:absolute; 
    width:100%; 
    height:100%; 
    background-color: var(--left-bg-color);
}

.split.right{
   right:0; 
   background:url('xbox.jpg'); 
   background-repeat: no-repeat; 
   background-size:cover;
} 

.split.right .btn:hover{
    background-color: var(--right-hover-color); 
    color:white; 
    border-color: var(--right-hover-color); 
}

.split.right::before{
    content:'';
    position: absolute; 
    width:100%; 
    height:100%; 
    background-color:var(--right-bg-color);
} 

.split.left,.split.right,.split.left::before,.split.right::before{
    transition:all var(--speed) ease-in-out;
}

.hover-left .left{
    width:var(--hover-width); 
} 
.hover-left .right{
    width:var(--other-width);
} 
.hover-right .left{
    width:var(--other-width);
} 
.hover-right .right{
    width:var(--hover-width); 
}

@media (max-width:800px){
    h1{
        font-size: 2rem;
    }
}