:root{
    --color-white: #ffffff;
    --color-light: #f0eff5;
    --color-lighter: #bbbbbd;
    --color-gray-light: #86848c;
    --color-gray-dark: #56555e;
    --color-dark: #27282f;
    --color-primary: rgb(71, 7, 234);
    --color-success: rgb(34, 202, 75);
    --color-danger: rgb(255, 67, 54);
    --color-warning: rgb(234, 181, 7);
    --color-purple: rgb(160, 99, 245);

    --color-primary-light: rgba(71, 7, 234, 0.2);
    --color-success-light: rgba(34, 202, 75, 0.2);
    --color-danger-light: rgba(255, 67, 54, 0.2);
    --color-purple-light: rgba(160, 99, 245, 0.2);
    --color-warning-light: rgb(234, 181, 7, 0.2);

    --card-padding: 1.6rem;
    --padding-1: 1rem;
    --padding-2: 8px;
    
    --card-border-radius: 1.6rem;
    --border-radius-1: 1.2rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 0.5rem;
    --border-radius-4: 0.3rem;

    --transition: all 300ms ease;

}

/* dark theme variable */
.dark-theme{
    --color-white: #131316;
    --color-light: #23232a;
    --color-dark: #ddd;
    --color-gray-dark: #adacb5;
}

::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-track{
    background: var(--color-white);
}

::-webkit-scrollbar-thumb{
    background-color: var(--color-dark);
    border-radius: var(--border-radius-3);
}

::-webkit-scrollbar-thumb:hover{
    background-color: var(--color-gray-light);
}

*{
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body{
    background: var(--color-light);
    font-family: 'Poppins', sans-serif;
    color: var(--color-dark);
    width: 100%;
}

img{
    width: 100%;
}

a{
    cursor: pointer;
    color: var(--color-purple);
}

h1{
    font-size: 2.2rem;
}

h2{
    font-size: 1.5rem;
}

h3{
    font-size: 1.2rem;
}

h4{
    font-size: 1rem;
}

h5{
    font-size: 0.86rem;
    font-weight: 500;
}

h6{
    font-size: 0.8rem;
}

p{
    font-size: 1rem;
    color: var(--color-gray-dark);
}

label{
    font-size: 0.96rem;
}

input:focus{
    border: 1px solid var(--color-primary);
}

.forget-password{
    display: flex;
    float: right;
}

.btn{
    color: var(--color-white);
    padding: 0.5rem;
}

.text-muted{
    color: var(--color-gray-light);
}

.primary{
    color: var(--color-primary);
}

.danger{
    color: var(--color-danger);
}

.success{
    color: var(--color-success);
}

.purple{
    color: var(--color-purple);
}

.warning{
    color: var(--color-warning);
}

.bg-primary{
    background: var(--color-primary);
    box-shadow: 0 0.8rem 0.8rem  var(--color-primary-light);
    border-radius: var(--border-radius-3);
}

.bg-primary:hover{
    opacity: 0.8;
}

.bg-danger{
    background: var(--color-danger);
    box-shadow: 0 0.8rem 0.8rem  var(--color-danger-light);
    border-radius: var(--border-radius-3);
}

.bg-success{
    background: var(--color-success);
    box-shadow: 0 0.8rem 0.8rem  var(--color-success-light);
    border-radius: var(--border-radius-3);
}

.bg-warning{
    background: var(--color-warning);
    box-shadow: 0 0.8rem 0.8rem  var(--color-warning-light);
    border-radius: var(--border-radius-3);
}

.bg-purple{
    background: var(--color-purple);
    box-shadow: 0 0.8rem 0.8rem  var(--color-purple-light);
    border-radius: var(--border-radius-3);
}

.bg-dark{
    background: #27282f;
    box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-3);
}

.bg-purple-light{
    background: var(--color-purple-light);
}

.bg-danger-light{
    background: var(--color-danger-light);
}

.bg-primary-light{
    background: var(--color-primary-light);
}

.bg-success-light{
    background: var(--color-success-light);
}

.bg-warning-light{
    background: var(--color-warning-light);
}

input,select{
    border: 1px solid var(--color-lighter);
}

.reg_container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
}

.reg_img{
    background: linear-gradient( rgba(71, 7, 234,0.9), rgba(3, 0, 9, 0.9)), url(../images/dollar.jpg) no-repeat;  background-size: cover; background-position: center;
}

.register{
    display: flex;
    place-items: center;
    padding: 1rem 3rem;
    width: 100%;
}

.register form{
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--border-radius-3);
    margin: 0 auto;
}

.register form .logo{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.register form div img{
    width: 2rem;
    aspect-ratio: 1/1;
}

.register form .adventure{
    text-align: center;
    color: var(--color-gray-light);
}

.register form .adventure p{
    margin: 1rem 0;
    background: var(--color-danger-light);
    color: var(--color-danger);
    border-radius: var(--border-radius-4);
    border-left: 0.4rem solid var(--color-danger);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.register form .adventure p .pad{
    padding: 0.5rem;
}

.register form .adventure p .pad i{
    margin-right: 0.3rem;
}

.register form .adventure p .fa-xmark{
    background: var(--color-danger);
    padding: 0.6rem;
    color: var(--color-white);
    border-radius: 0 var(--border-radius-4) var(--border-radius-4) 0;
}

.register form .info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.register form .info div input,.register form .info div select{
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--border-radius-4);
}

.register form .extra{
    margin: 1rem 0;
}

.register form .extra input{
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--border-radius-4);
}

.register form .extra .password-show{
    position: relative;
}

.register form .extra .password-show .eye{
    position: absolute;
    right: 0;
    top: 0;
    background: var(--color-gray-light);
    color: var(--color-white);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    width: 3rem;
    border-radius: 0 var(--border-radius-4) var(--border-radius-4) 0;
}

.register form .extra .password-show input{
    padding-right: 3.5rem;
}

.register form .extra .password-show .eye.active::before{
    color: var(--color-dark);
    content: "\f070";
}

.register form .reg-password .password-show{
    position: relative;
}

.register form .reg-password .password-show .fa-eye{
    position: absolute;
    right: 0;
    top: 0;
    background: var(--color-gray-light);
    color: var(--color-white);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    width: 2rem;
    border-radius: 0 var(--border-radius-4) var(--border-radius-4) 0;
}

.register form .reg-password .password-show input{
    padding-right: 2.5rem;
}

.register form .reg-password .password-show .eye2.active::before{
    color: var(--color-dark);
    content: "\f070";
}

.register form .reg-password .password-show .eye3.active::before{
    color: var(--color-dark);
    content: "\f070";
}

.register form .check{
    margin: 1rem 0;
}

.register form p{
    text-align: center;
}







@media (max-width: 1024px){
    .reg_container{
        grid-template-columns:1fr;
    }
    
    .reg_img{
       display: none;
    }

    .register form{
        margin: 2rem auto;
    }
}

@media (max-width: 600px){
    .register{
        padding: 2rem 1rem;
    }

    .register form{
        padding: 1rem 0.5rem;
        margin: 0 auto;
    }

    .register form .info{
        grid-template-columns: 1fr;
    } 
}