/* ================= SPLIT SECTION ================= */

.split-wrapper{
position:relative;
height:60vh;
width:100%;
overflow:hidden;
cursor:ew-resize;
}

/* ================= PANELS ================= */

.side{
position:absolute;
width:100%;
height:100%;
display:grid;
place-items:center;
overflow:hidden;
}

/* ================= TEXT ================= */

.title{

font-family:var(--font-alt);
font-size:clamp(2.5rem,6vw,6rem);
font-weight:700;

margin:0 10vw;
width:80vw;

line-height:1.1;

}

.fancy{
font-family:"Permanent Marker",cursive;
font-size:1.6em;
}

/* ================= LEFT PANEL ================= */

#left-side{
background:var(--bg-light);
width:60%;
z-index:2;
border-right:1px solid var(--border-color);
}

#left-side .title{
color:var(--text-color);
}

#left-side .fancy{
color:var(--accent);
}

/* ================= RIGHT PANEL ================= */

#right-side{
/* background:var(--bg-card); */
}

#right-side .title{
color:var(--text-muted);
}

#right-side .fancy{
color:var(--highlight-color);
}

/* ================= DIVIDER ================= */

.divider{

position:absolute;
top:0;
bottom:0;
left:60%;

width:3px;

background:var(--accent);
box-shadow:0 0 20px var(--accent);

z-index:5;
pointer-events:none;

}

/* ================= MOBILE ================= */

@media(max-width:768px){

.split-wrapper{
height:40vh;
}

.title{
font-size:2rem;
margin:0 5vw;
width:90vw;
}

}