.title-ks {
    text-align: center;
    font-size: 30px;
    color: #f79b00;
}

.score-main {
    font-size: 16px;
    text-align: center;
    color: rgb(117, 117, 117);
}

.btn-fb {
    margin-left: auto;
    margin-right: auto;
    border-radius: 11px;
    color: white;
    padding: 11px;
    background: rgb(24, 119, 242);
    flex-direction: row;
}

.btn-fb:hover {
    transition: all 250ms ease-out;
    box-shadow: 3px 3px 10px #d3d3d3;
}

.forgot {
    color: #7c7c7c;
    float: right
}

.forgot:hover {
    transition: all 250ms ease-out;
    color: red;
}

.btn-close {
    position: absolute;
    top: -20px;
    right: -10px;
    background-color: rgb(247, 155, 0);
    color: white;
    border-radius: 50%;
    display: flex;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.btn-close-register {
    position: absolute;
    top: -20px;
    right: -10px;
    background-color: rgb(247, 155, 0);
    color: white;
    border-radius: 50%;
    display: flex;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.btn-close:hover {
    transition: all 250ms ease-out;
    box-shadow: 3px 3px 10px #d3d3d3;
}

.btn-close-register:hover {
    transition: all 250ms ease-out;
    box-shadow: 3px 3px 10px #d3d3d3;
}

.form-login {
    display: flex;
    background: white;
    position: relative;
    flex: 4 1 0%;
    flex-direction: column;
    border-radius: 0px 20px 20px 0px;
    border: 0.3px solid #f5ac77;
}

.form-register {
    display: flex;
    background: white;
    position: relative;
    flex: 4 1 0%;
    flex-direction: column;
    border-radius: 0px 20px 20px 0px;
    border: 0.3px solid #f5ac77;
}

.hover_lg {
    background-image: linear-gradient(to right, #ffc300, #ff8601);
    color: white;
    border: none;
    padding: 12px;
    outline: none;
    border: 1px solid #f3c737;
    cursor: pointer;
    transition: all 250ms ease-out;
}

.hover_lg:focus {
    outline: none;
}

.hover_lg:hover {
    background: white;
    color: #040404;
    border: 1px solid #f3c737;
    outline: none;
    box-shadow: 6px 6px 10px rgb(159 159 159);
    
}

.animation_lg {
    animation-name: example;
    animation-duration: 650ms;
    width: 85%;
    height: auto;
}

input {
    transform: scale(1);
    transition: all 250ms ease-out;
    outline: none;
    border-radius: 20px;
    border: none;
    padding: 12px;
}

input:focus {
    outline: none;
}

.title_lg {
    border-radius: 20px 0px 0px 20px;
}

@media only screen and (max-width: 768px) {
    .reponsive {
        display: none;
    }
    .reponsive_lg {
        border-radius: 20px !important;
    }
}

@media only screen and (max-width: 430px) {
    .p_re {
        padding: 1.5rem !important;
    }
}

@keyframes example {
    0% {
        transform: scale(0.9);
        backdrop-filter: blur(10px);
    }
    50% {
        transform: scale(1.05);
        backdrop-filter: blur(4px);
    }
    100% {
        transform: scale(1);
        backdrop-filter: blur(0px);
    }
}

.btn_main {
    transition: all 100ms ease-out;
    background-color: white;
    border: none;
    outline: none;
    text-align: left;
}

.btn_main_add {
    color: rgb(255, 255, 255);
    background-color: rgb(46, 158, 224);
    border: none;
    outline: none;
}

.btn_main_add:focus {
    outline: none;
}

.btn_main:hover {
    background-color: rgb(131, 210, 255);
}

.btn_main:focus {
    color: rgb(255, 255, 255);
    background-color: rgb(46, 158, 224);
    outline: none;
}

.animation_bar {
    animation-name: animation_bar;
    animation-duration: 400ms;
    background-color: white;
    border-radius: 20px;
    display: flex;
    animation-timing-function: ease-out;
    flex-direction: column;
}

.input_html {
    outline: none;
}

.input_html:focus {
    outline: none;
}

@keyframes animation_bar {}

.radius_main {
    border-radius: 20px;
}

@keyframes animation_bar_main {}

.radius_main {
    border-radius: 20px;
}

.animation_bar_main {
    animation-timing-function: ease-out;
    animation-name: animation_bar_main;
    animation-duration: 600ms;
}

.content::-webkit-scrollbar {
    display: none;
}

.out_menu {
    animation-name: out_menu;
    animation-duration: 400ms;
    transform: translate(-50px);
}

@keyframes out_menu {
    from {
        transform: translate(0px);
    }
    to {
        transform: translate(-200px);
    }
}

@keyframes in_menu {
    from {
        transform: translate(-200px);
    }
    to {
        transform: translate(0px);
    }
}

.in_menu {
    animation-name: in_menu;
    animation-duration: 400ms;
}