@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');

:root{
    --left-bg-color: rgb(250, 186, 198,0.7);
    --right-bg-color: rgba(253, 220, 249, 0.5);
    --left-hover-color: #916914;
    --right-hover-color: #916914;
    --hover-width: 75%;
    --other-width: 25%;

}
*{
    box-sizing: border-box;
}

body{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    height: 100vh;
    overflow:hidden;
}

h1{
    color:rgb(39, 87, 167);
    -webkit-text-stroke: 1px rgb(255, 255, 255);
    font-size: 3.5rem;
    position: absolute;
    top:35%;
    left:50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

h3{
    color:rgb(53, 105, 196);
    -webkit-text-stroke: 1px rgb(255, 255, 255);
    font-size: 1.5rem;
    position: absolute;
    top:40%;
    left:50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.btn{
    text-decoration: none;
    color:#916914;
    text-transform: uppercase;
    border: 2px solid #916914;
    padding: 1rem;
    width: 8 rem;
    position:absolute;
    left:50%;
    top:55%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn1{
    text-decoration: none;
    color:#916914;
    text-transform: uppercase;
    border: 2px solid #916914;
    padding: 1rem;
    width: 8 rem;
    position:absolute;
    left:50%;
    top:55%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

p{
    text-decoration: none;
    color:#725e51;
    position:absolute;
    left:50%;
    top:90%;
    transform: translateX(-50%);
    text-align: center;
}

.img1{
    text-decoration: none;
    color:#FFF;
    text-transform: uppercase;
    padding: 0.5rem;
    width: 25rem;
    position:absolute;
    left:50%;
    top:25%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.split.right .btn1:hover{
    background-color: var(--right-hover-color);
    border-color:  var(--right-hover-color);
    color:#FFF;
}

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

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

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

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

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


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

.split.left, .split.left::before, .split.right, .split.right::before{
    transition: all 1s 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;
        top: 30%;
    }

    h3{
        font-size: .5rem;
        top: 30%;
    }

    .btn{
        padding:1rem;
        width:10rem;
    }
}