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

:root{
    --left-bg-color: rgba(87,84,236,0.7);
    --right-bg-color: rgba(43,43,43,0.8);
    --left-hover-color: rgba(87,84,236,1);
    --right-hover-color: rgba(28,122,28, 1);
    --hover-width: 75%;
    --other-width: 25%;

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

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

h1{
    color:#fff;
    font-size: 3.5rem;
    position: absolute;
    top:20%;
    left:50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.btn{
    text-decoration: none;
    color:#FFF;
    text-transform: uppercase;
    border: 2px solid #fff;
    padding: 1.5rem;
    width: 15rem;
    position:absolute;
    left:50%;
    top:40%;
    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);
}

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

.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('ps.jpg');*/
    background: url('cannabosslink.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.split {
    background-size: contain !important;
    background-position: center !important;
}

.split.right{
    right:0;
    /*background: url('xbox.jpg');*/
    background: url('naarlogo.png');
    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)
}



.left h1 {
    margin: 0;
    position: inherit !important;
    top: auto;
    left: auto;
    transform: inherit;
    white-space: inherit;
    font-size: 33px;
    text-align: center;
    padding: 50px 0 0;
    line-height: 50px;
}
.left .sltxt {
    padding: 160px 40px 40px;
    text-align: center;
}
.left .sltxt p {padding-bottom: 10px; margin: 0;color: #fff;font-size: 16px;line-height: 24px;position: relative;}
.left .btn {display: inline-block;position: inherit;top: auto;padding: 10px 30px;width: auto;font-size: 18px;}
.left .btn:hover {background: none !important;border-color: #fff !important;}

.hover-left .left h1 {
    text-align: center !important;
    width: 100% !important;
}



.right h1 {
    margin: 0;
    position: inherit !important;
    top: auto;
    left: auto;
    transform: inherit;
    white-space: inherit;
    font-size: 33px;
    text-align: center;
    padding: 50px 0 0;
    line-height: 50px;
}
.right .srtxt {
    padding: 160px 40px 40px;
    text-align: center;
}
.right .srtxt p {padding-bottom: 10px; margin: 0;color: #fff;font-size: 16px;line-height: 24px;position: relative;}
.right .btn {display: inline-block;position: inherit;top: auto;padding: 10px 30px;width: auto;font-size: 18px;}
.right .btn:hover {background: none !important;border-color: #fff !important;}

.hover-right .right h1 {
    text-align: center !important;
    width: 100% !important;
}


.split h1 {
    padding-top: 0px;
    font-size: 27px;
    width: 100%;
    line-height: normal;
}

.split.left .sltxt p, .split.right .srtxt p {
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 0;
    margin-bottom: 10px;
}
.split .webimg {
    text-align: center;
    margin: 20px 0 15px;
}

.split .webimg img {
    max-width: 500px;
    margin: auto;
    filter: brightness(0) invert(1);
}

.split.left .sltxt, .split.right .srtxt {
    padding-top: 90px !important;
    padding-bottom: 20px !important;
}










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

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

@media(max-width:767px){

.split h1 {
    font-size: 17px;
}
.split .webimg img {
    max-width: 148px;
}
.split.left .sltxt, .split.right .srtxt {
    padding-left: 10px;
    padding-right: 10px;
}

}
@media(min-width:768px) and (max-width:991px){

.split .webimg img {
    max-width: 320px;
}
.split h1 {
    font-size: 15px;
}
.split.left .sltxt, .split.right .srtxt {
    padding-top: 60px !important;
}

}