* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

button {
cursor: pointer;
border: none;
font-family: 'Inter', sans-serif;
transition: all 0.2s ease;
}

body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: end;
font-family: 'Inter', sans-serif;
background-color: #232526;
overflow: hidden;
}

body ::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}

.bg-img {
position: absolute;
width: 100vw;
opacity: .05;
}

.container {
display: flex;
background-color: #fff;
width: 35rem;
border: 1px solid rgba(128, 128, 128, 0.249);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 12px;
padding: 48px;
margin-right: 15vw;
flex-direction: column;
transition: all 0.3s ease;
z-index: 50;
}

h1 {
font-size: 42px;
color: var(--chinese-black);
letter-spacing: -1px;
}

.new-user-text {
margin-bottom: 70px;
font-size: 16px;
}

.new-user-text button, .password-forget-wrapper a{
color: rgb(20, 89, 185);
text-decoration: underline;
font-size: 16px;
background-color: #fff;
}

.password-forget-wrapper {
display: flex;
margin-top: 6px;
justify-content: right;
}

form label {
font-size: 16px;
font-weight: 400;
color: var(--chinese-black);
}

form input {
width: 100%;
height: 50px;
border-radius: 12px;
border: 1px solid grey;
outline: none;
padding: 0 12px;
font-size: 18px;
font-weight: 400;
color: #111111b8;
}

.input-email {
text-transform: lowercase;
}

.form-spacer-small {
height: 5px;
}

.form-spacer-big {
height: 24px;
}

.action-btns-wrapper {
display: flex;
justify-content: end;
column-gap: 24px;
margin-top: 24px;
}

.action-btns-wrapper button {
padding: 8px 32px;
border-radius: 12px;
font-size: 18px;
cursor: pointer;
}

.cancel-btn {
color: rgb(28, 28, 28);
border: 1px solid rgba(0, 0, 0, 0.318);
background: none;
}

.submit-btn {
background-color: rgb(20, 89, 185);
color: #fff;
font-weight: 600;
}

input:focus {
outline: none;
border: 2px solid rgb(9, 75, 129);}

/* Login/Register secties */
.form-section {
display: none;
flex-direction: column;
animation: fade .3s ease;
}

.form-section.active {
display: flex;
}

.caution-field {
background-color: rgba(248, 153, 1, 0.302);
border: solid 1px rgb(248, 153, 1);
width: 100%;
border-radius: 12px;
position: relative;
margin-bottom: 48px;
overflow: hidden;
}

.caution-field p {
padding: 13px 6px 13px 22px;
color: rgba(0, 0, 0, 0.675);
}

.caution-field::before {
content: "";
background-color: rgb(248, 153, 1);
height: 110%;
position: absolute;
width: 10px;
display: flex;
}

.title-container {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 30px;
justify-content: space-between;
}

.title-container img{
height: 42px;
}

.password-strength {
height: 4px;
background: #f3f3f3;
border-radius: 2px;
margin-top: 5px;
overflow: hidden;
}

.password-strength-bar {
height: 100%;
width: 0;
transition: all 0.3s ease;
}

.strength-weak { background: #dc3545; width: 33%; }
.strength-medium { background: #ffc107; width: 66%; }
.strength-strong { background: #28a745; width: 100%; }


.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    margin-bottom: 30px;
    padding: 6px;
    border-radius: 12px;
}

.alert-success {
background: #d7f8d7;
color: #1c721c;
margin-bottom: 30px;
padding: 6px;
border-radius: 12px;
}


@keyframes fade {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}




/* Medium screen 1280 x 720*/
@media only screen and (max-width: 1300px) {
body {
display: flex;
justify-content: center;
align-items: start;
font-family: 'Inter', sans-serif;
padding-top: 5rem;
padding-bottom: 5rem;
overflow-y: auto;
width: auto;
height: auto;
}

.container {
margin: 0;
width: 30rem;
padding: 38px;
}

.container h1 {
margin-right: 20px;
}

.container p, .new-user-text button {
font-size: 14px;
}

.container label {
font-size: 14px;
}
.container input {
height: 40px;
}
.action-btns-wrapper button{
font-size: 16px
}

form input {
font-size: 16px;
}

.alert-error, .alert-success {
font-size: 14px;
}

}





@media only screen and (max-width: 1000px) {


html, body {
width: 100%;
overflow: auto;
justify-content: center;
align-items: start;
margin: 0;
padding-bottom: 15vh;
}

body {
padding-top: 2rem;
}

.container {
margin-right: 0;
padding: 20px;
max-width: 100vw;
overflow: auto;
margin-top: 20px;
background-color: #f6f5f400;
box-shadow: none;
border: none;
overflow-y: visible;
color: #fff;
}


.new-user-text button, .password-forget-wrapper a {
    background-color: #232526;
}

.title-container {
justify-content: left;
color: #fff;
}

.cancel-btn {
background: #f9f9f8;
}

input {
background: #f9f9f8;
}

.title-container img {
margin-left: auto;
}

.backdrop-img.right {
display: none;
}

.caution-field p {
color: rgba(255, 255, 255, 0.675);
}

}