@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
        @keyframes example {
            from {width:0;height:0;}
            to {width:27rem;height:1;}
        }
        @font-face {
            font-family: 'Polea Extra Bold DEMO';
            src: url('./fonts/PoleaExtraBoldDEMO.eot');
            src: url('./fonts/PoleaExtraBoldDEMO.eot?#iefix') format('embedded-opentype'),
                url('./fonts/PoleaExtraBoldDEMO.woff2') format('woff2'),
                url('./fonts/PoleaExtraBoldDEMO.woff') format('woff'),
                url('./fonts/PoleaExtraBoldDEMO.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
            font-display: swap;
        }

        .log_in_container[data-register="true"]{
            left: 50%;
            top: 45%;
            transform: translate(-50%,-55%);
            /* transform: translateY(-2.1rem); */
            .section.form{
                
                .column.repassword{
                    display: block;
                }
                .formLabelSmall.h{
                    margin-bottom: .5rem;
                }
                .column.hide{
                    /* margin-bottom: .5rem; */
                    display: block;
                }
            }
            .neumorph_top{
            height: 60%;
            
            }
            .neumorph_bottom{
                height: 40%;
            }
            #registerBtn{
            display: none;
            }
            #registerBtnSub{
               display: block;
            }
            #login_btn{
                display: none;
            }
            
        }
        .log_in_container{
            width: 27rem;
            /* height: 40rem; */
            position: absolute;
            left: 50%;
            top: 45%;
            transform: translate(-50%,-50%);
            background-color: #ecf0f3;
            border-radius: .5rem;
            border: 1pt solid #1E90FF;
            font-family: 'Josefin Sans', sans-serif;
            /* box-shadow: .2rem .2rem .6rem #031641, -.2rem -.2rem .6rem #0E48DE; */
            /* overflow: hidden; */
            padding-top: 2rem;
            padding-bottom: 3rem;
            transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
            /* animation-name: example;
            transform-origin:center center;
            transform-style: preserve-3d;
            animation-duration: 1s;
            animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0); */
        }
        .log_in_container .hidden{
            display: none;
        }
        .section.logo{
                width: 100%;
                height: 45%;
                /* border: 1pt solid red; */
                display: flex;
                flex-direction: column;
                gap: 1rem;
                justify-content: center;
                align-items: center;
                .title{
                    color: #1E90FF;
                    font-weight: 900;
                    font-size: 2.5rem;
                    letter-spacing: 1px;
                    text-align: center;
                    font-family: "Fuzzy Bubbles", sans-serif;
                    font-weight: 400;
                    font-style: normal;
                }
            }
            .section.form{
                /* border: 1pt solid green; */
                width: 100%;
                height: 55%;
                justify-content: space-evenly;
                    .column{
                    width: 92%;
                    /* border: 1pt solid yellowgreen; */
                    display: flex;
                    gap: .5rem;
                    flex-direction: column;
                    /* justify-content: center;
                    align-items: center; */
                }
                .column.hide{
                    display: none;
                }
            }
            #loginForm{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                /* border: 1pt solid purple; */
            }
            
            .formLabelSmall{
                color: #1E90FF;
                font-size: 1.2rem;
                font-weight: bold;
            }
        .section{
                display: flex;
                flex-direction: column;
                align-items: center;
                .column.repassword{
                    display: none;
                }
                .column.btns{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    button{
                        display: block;
                        padding: 0;
                        border: none;
                        outline: none;
                        box-sizing: border-box;
                        width: 75%;
                    }
                }
            }
        .formLabelSmall, .formTextInput, .formButtonF {
            display: block;
            width: 100%;
            padding: 0;
            border: none;
            outline: none;
            box-sizing: border-box;
        }
        .formLabelSmall option {
        color: gray;
        }
        .formLabelSmall option {
        margin-bottom: 4px;
        }
        .formLabelSmall:nth-of-type(2) {
        margin-top: 12px;
        }
        .formTextInput::placeholder {
        color: #7CB9E8;
        }
        .formTextInput {
        background: #ecf0f3;
        padding: 10px;
        padding-left: 20px;
        height: 50px;
        font-size: 1.2rem;
        border-radius: 50px;
        box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
        margin-bottom: .5rem;
        }
        .formButton {
        color: white;
        margin-top: 20px;
        background: #1E90FF;
        height: 40px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 900;
        box-shadow: 4px 4px 4px #bfc0c1, -4px -4px 4px white;
        transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
        font-size: 1.2rem;
        }
        .formButton:hover {
        box-shadow: none;
        }
        #registerBtn{
            display: block;
            color: white;
            background: #1DB954;
            font-weight: 900;
            font-size: 1.2rem;
        }
        #registerBtnSub{
            display: none;
            color: white;
            background: #1DB954;
            font-weight: 900;
            font-size: 1.2rem;
        }
        .neumorph_cover{
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #ecf0f3;
            border-radius: .5rem;
            border: 1pt solid #1E90FF;
            z-index: -1;
        }
        .neumorph_top,.neumorph_bottom{
            width: 100%;
            position: absolute;
            left: 0;
            z-index: -2;
            border-radius: .5rem;
            border: 1pt solid #1E90FF;
            transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
        }
        .neumorph_top{
            height: 55%;
           top: 0;
           /* background-color: red; */
           box-shadow: .2rem .2rem .6rem #031641, -.2rem -.2rem .6rem #0E48DE;
        }
        .neumorph_bottom{
            height: 45%;
            bottom: 0;
            /* background-color: green; */
            box-shadow: .3rem .3rem .7rem #a7a7a7, -.3rem -.3rem .7rem #e1e1e1;
        }
        .formTextInput:focus {
            color: #FF5733;
        }
        #repassword, #email{
            position: relative;
        }
        #repassword #error-message, #email #email-error-message{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(0,-15%);
            z-index: 99;
            background-color: #ecf0f3;
            border-radius: .5rem;
            border: 1pt solid #1E90FF;
            padding: 1rem;
            display: none;
            color: red;
            font-size: .8rem;
            box-shadow:  3px 3px 3px #aaadaf,
             -3px -3px 3px #ffffff;
        }

        .loader_container{
            position: absolute;
            left: 50%;
            top: 45%;
            transform: translate(-50%,-50%);
            /* background-color: #ecf0f3; */
            background: transparent;
            /* border-radius: .5rem;
            border: 1pt solid #1E90FF; */
            padding: 5rem;
        }


        .loader_container .hidden{
            display: none;

        }
        #login_container_error{
            padding: 1rem;
            position: absolute;
            right: 0;
            top: 50%;
            background-color: #ecf0f3;
            border-radius: .5rem;
            border: 1pt solid red;
            transform: translate(100%,-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            z-index: -1;
            animation-name: error_reveal;
            transform-origin: left;
            animation-duration: 1s;
            box-shadow: inset 3px 3px 6px #a8a8a8,
            inset -3px -3px 6px #ffffff;
        }
        #login_container_error.hidden{
            display: none !important;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        #login_error_message{
            color: red;
            font-size: 1rem;
        }
        @keyframes error_reveal {
            0% {
                right: 0;
                top: 50%;
                transform: translate(0%,-50%);
            }
            100% {
                right: 0;
                top: 50%;
                transform: translate(100%,-50%);
            }
        }

        /* Fallback for browsers without CSS nesting support */
        .log_in_container[data-register="true"]{
            left: 50%;
            top: 45%;
            transform: translate(-50%,-55%);
        }
        .log_in_container[data-register="true"] .section.form .column.repassword{
            display: block;
        }
        .log_in_container[data-register="true"] .section.form .formLabelSmall.h{
            margin-bottom: .5rem;
        }
        .log_in_container[data-register="true"] .section.form .column.hide{
            display: block;
        }
        .log_in_container[data-register="true"] .neumorph_top{
            height: 60%;
        }
        .log_in_container[data-register="true"] .neumorph_bottom{
            height: 40%;
        }
        .log_in_container[data-register="true"] #registerBtn{
            display: none;
        }
        .log_in_container[data-register="true"] #registerBtnSub{
            display: block;
        }
        .log_in_container[data-register="true"] #login_btn{
            display: none;
        }



        .pl {
        display: block;
        width: 9.375em;
        height: 9.375em;
        }

        .pl__arrows,
        .pl__ring-rotate,
        .pl__ring-stroke,
        .pl__tick {
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        }

        .pl__arrows {
        animation-name: arrows42;
        transform: rotate(45deg);
        transform-origin: 16px 52px;
        }

        .pl__ring-rotate,
        .pl__ring-stroke {
        transform-origin: 80px 80px;
        }

        .pl__ring-rotate {
        animation-name: ringRotate42;
        }

        .pl__ring-stroke {
        animation-name: ringStroke42;
        transform: rotate(-45deg);
        }

        .pl__tick {
        animation-name: tick42;
        }

        .pl__tick:nth-child(2) {
        animation-delay: -1.75s;
        }

        .pl__tick:nth-child(3) {
        animation-delay: -1.5s;
        }

        .pl__tick:nth-child(4) {
        animation-delay: -1.25s;
        }

        .pl__tick:nth-child(5) {
        animation-delay: -1s;
        }

        .pl__tick:nth-child(6) {
        animation-delay: -0.75s;
        }

        .pl__tick:nth-child(7) {
        animation-delay: -0.5s;
        }

        .pl__tick:nth-child(8) {
        animation-delay: -0.25s;
        }

        /* Animations */
        @keyframes arrows42 {
        from {
            transform: rotate(45deg);
        }

        to {
            transform: rotate(405deg);
        }
        }

        @keyframes ringRotate42 {
        from {
            transform: rotate(0);
        }

        to {
            transform: rotate(720deg);
        }
        }

        @keyframes ringStroke42 {
        from,
            to {
            stroke-dashoffset: 452;
            transform: rotate(-45deg);
        }

        50% {
            stroke-dashoffset: 169.5;
            transform: rotate(-180deg);
        }
        }

        @keyframes tick42 {
        from,
            3%,
            47%,
            to {
            stroke-dashoffset: -12;
        }

        14%,
            36% {
            stroke-dashoffset: 0;
        }
        }