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

:root {
    font-size: 100%;
    --left-surface: oklch(97.02% 0 0);
    --left-onSurface:oklch(17.76% 0 0);
    --left-hover: oklch(17.76% 0 0);
    --right-surface: oklch(17.76% 0 0);
    --right-onSurface: oklch(97.02% 0 0);
    --right-hover: oklch(97.02% 0 0);
    --hover-width:70%;
    --other-width:30%;
    --speed: 1000ms;
}

* {
    box-sizing: border-box;
}

body {
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

h1 {
    font-family: 'Diphylleia', serif;
    font-size: 4rem;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    backdrop-filter: blur(3px);
}

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

.split.left {
    left: 0;
    /*background-color: rgba(211, 228, 228, 0.81);*/
}

.split.left h1 {
    color: white; 
}

    .split.left .btn {
        color: white;
        border-color: white;
    }

/*.split.left::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiIG9wYWNpdHk9IjEiPjxkZWZzPjxmaWx0ZXIgaWQ9Im5ubm9pc2UtZmlsdGVyIiB4PSItMjAlIiB5PSItMjAlIiB3aWR0aD0iMTQwJSIgaGVpZ2h0PSIxNDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHByaW1pdGl2ZVVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJsaW5lYXJSR0IiPgoJPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMTAyIiBudW1PY3RhdmVzPSI0IiBzZWVkPSIxNSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiByZXN1bHQ9InR1cmJ1bGVuY2UiPjwvZmVUdXJidWxlbmNlPgoJPGZlU3BlY3VsYXJMaWdodGluZyBzdXJmYWNlU2NhbGU9IjE1IiBzcGVjdWxhckNvbnN0YW50PSIwLjc1IiBzcGVjdWxhckV4cG9uZW50PSIyMCIgbGlnaHRpbmctY29sb3I9IiNkOGI3YjciIHg9IjAlIiB5PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgaW49InR1cmJ1bGVuY2UiIHJlc3VsdD0ic3BlY3VsYXJMaWdodGluZyI+CiAgICAJCTxmZURpc3RhbnRMaWdodCBhemltdXRoPSIzIiBlbGV2YXRpb249IjEwMCI+PC9mZURpc3RhbnRMaWdodD4KICAJPC9mZVNwZWN1bGFyTGlnaHRpbmc+CiAgCjwvZmlsdGVyPjwvZGVmcz48cmVjdCB3aWR0aD0iNzAwIiBoZWlnaHQ9IjcwMCIgZmlsbD0idHJhbnNwYXJlbnQiPjwvcmVjdD48cmVjdCB3aWR0aD0iNzAwIiBoZWlnaHQ9IjcwMCIgZmlsbD0iI2Q4YjdiNyIgZmlsdGVyPSJ1cmwoI25ubm9pc2UtZmlsdGVyKSI+PC9yZWN0Pjwvc3ZnPg==");
}*/

.split.right {
    right: 0;
    /*background-color: rgba(6, 14, 10, 0.753);*/
}

.split.right h1 {
    color: var(--right-onSurface);
}
.split.right .btn {
    color: var(--right-onSurface);
    border-color: var(--right-onSurface);
}

/*.split.right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiIG9wYWNpdHk9IjAuNyI+PGRlZnM+PGZpbHRlciBpZD0ibm5ub2lzZS1maWx0ZXIiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNDAlIiBoZWlnaHQ9IjE0MCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgcHJpbWl0aXZlVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9ImxpbmVhclJHQiI+Cgk8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4xMDIiIG51bU9jdGF2ZXM9IjQiIHNlZWQ9IjE1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlc3VsdD0idHVyYnVsZW5jZSI+PC9mZVR1cmJ1bGVuY2U+Cgk8ZmVTcGVjdWxhckxpZ2h0aW5nIHN1cmZhY2VTY2FsZT0iMTUiIHNwZWN1bGFyQ29uc3RhbnQ9IjAuNzUiIHNwZWN1bGFyRXhwb25lbnQ9IjIwIiBsaWdodGluZy1jb2xvcj0iIzIyMjIyMiIgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBpbj0idHVyYnVsZW5jZSIgcmVzdWx0PSJzcGVjdWxhckxpZ2h0aW5nIj4KICAgIAkJPGZlRGlzdGFudExpZ2h0IGF6aW11dGg9IjMiIGVsZXZhdGlvbj0iMTAwIj48L2ZlRGlzdGFudExpZ2h0PgogIAk8L2ZlU3BlY3VsYXJMaWdodGluZz4KICAKPC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9yZWN0PjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSIjMjIyMjIyIiBmaWx0ZXI9InVybCgjbm5ub2lzZS1maWx0ZXIpIj48L3JlY3Q+PC9zdmc+");
}*/

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

.btn {
    font-family: 'Roboto', sans-serif;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    text-decoration: none;
    border-style:solid;
    border-width: .2rem;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    width: 15rem;
    padding: 1.5rem;
}

.split.left .btn:hover {
    background-color: #fff;
    border-color: #fff;
    color: rgba(6, 14, 10, 0.753);
}

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

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

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

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

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

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

    .btn {
        border-radius: .6rem;
        border-width: .17rem;
        font-size: .8rem;
        padding: .7rem;
        width: 7.5rem;
    }
}

@media screen and (min-width: 591px) and (max-width: 740px) {

    h1 {
        font-size: 2.5rem;
        top: 27%;
    }

    .btn {
        border-radius: .7rem;
        font-size: .9rem;
        padding: .8rem;
        width: 9rem;
    }
}

@media screen and (min-width: 741px) and (max-width: 1000px) {
    h1 {
        font-size: 3rem;
        top: 25%;
    }

    .btn {
        padding: 1.2rem;
        width: 11rem;
    }

}

.g-recaptcha {
    transform: scale(0.9);
    transform-origin: 0 0;
}