body {
  font-family: 'Arial', sans-serif;
  background-color: var(--body-bg);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  flex-direction: column;
  overflow: hidden; /* Hide scrollbar for the falling snowflakes */
  position: relative;
}

:root {
  --body-bg: antiquewhite;
  --primary-color: white;
  --card-text: #191970;
  --h2-color: #333;
  --icon-color: black;
  --left-section: antiquewhite;
  --left-gradient: white;
  --right-section: white;
  --section-color: #333;
  --subtitle-color: #666;
  --label-color: #555;
  --login-link-color: black;
}

html .dark {
  --body-bg: black;
  --primary-color: rgb(41, 40, 40);
  --card-text: yellow;
  --h2-color: rgb(255, 187, 52);
  --icon-color: white;
  --left-section: #3e3628;
  --right-section:#3e3628;
  --section-color: white;
  --subtitle-color: yellow;
  --label-color: white;
  --login-link-color: aqua;
}

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

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--body-bg);
}

.back-button{
  position: absolute;
  background-color: transparent;
  border: none;
  font-size: 30px;
  margin-right: 90%;
  margin-bottom: 40%;
  color: var(--login-link-color);
  cursor: pointer;
}

.theme-converter{
margin-left: 87%;
margin-top: 0%;
margin-bottom: 0%;
background-color: var(--body-bg);
color: var(--body-bg) ;
}
@media screen and (max-width: 768px) {
  /* Ensure body and container take full height */
  body, html {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .container {
    display: flex;
    flex-direction: column;
    width: 90% !important;
    height: 100vh; /* Full viewport height */
    box-shadow: none;
    border-radius: 0;
    justify-content: center;
    align-items: center; /* Center content */
  }

  /* Hide the left section completely */
  /* .left-section p {
    
    display: none !important;  
  } */
  .left-section {
    padding: 1px 46px 0px 46px !important;
    /* background: white !important; */
  }

  /* Right section takes full width */
  .right-section {
    padding: 0px 40px 20px 40px !important;
    width: 100%; /* Take full width */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .social-btn {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }
  .right-section h1 {
    font-size: 1.5rem !important ;
    text-align: center;
  }

  .subtitle {
    font-size: 14px;
    text-align: center;
  }

  .signup-form {
    width: 100%;
  }

  .signup-form .input-group input {
    padding: 12px;
    font-size: 14px;
  }

  .signup-btn {
    padding: 12px;
    font-size: 16px;
    width: 100%;
  }

  .back-button {
    font-size: 24px;
    position: absolute;
    left: -10px;
    top: 15px;
    margin: 0;
  }

  .theme-converter {
    position: absolute;
    right: 0px;
    top: 0px;
  }
}



.container {
display: flex;
width: 80%;
max-width: 1200px;
background: #fff;
border-radius: 15px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
animation: fadeIn 1s ease-in-out;
}

.left-section {
flex: 1;
background:var(--left-section);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--section-color);
text-align: center;
padding: 40px;
animation: slideInLeft 1s ease-in-out;
}

.logo img {
width: 100px;
margin-bottom: 20px;
animation: bounce 2s infinite;
}

.logo h2 {
font-size: 32px;
margin-bottom: 10px;
}

.logo p {
font-size: 18px;
font-weight: 300;
}

.right-section {
  background: var(--right-section);
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
animation: slideInRight 1s ease-in-out;
}

.right-section h1 {
font-size: 28px;
margin-bottom: 3px;
color: var(--section-color);
}

.subtitle {
font-size: 16px;
color: var(--subtitle-color);
/* color: #666; */
margin-bottom: 3px;
}

.signup-form .input-group {
margin-bottom: 11px;
}

.signup-form .input-group label {
display: block;
font-size: 14px;
margin-bottom: 5px;
color: var(--label-color)
/* color: #555; */
}

.signup-form .input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
transition: all 0.3s;
}

.signup-form .input-group input:focus {
outline: none;
border-color: #ffb347;
box-shadow: 0 0 8px rgba(255, 179, 71, 0.5);
}

/* Styling for input fields */
.input-group input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for input fields */
.input-group input:hover {
  border-color: #7c2214;
  box-shadow: 0 0 5px rgba(124, 34, 20, 0.5);
}

/* Focus effect for input fields */
.input-group input:focus {
  border-color: #e98d34;
  box-shadow: 0 0 5px rgba(233, 141, 52, 0.8);
}

/* Styling for the sign-up button */
.signup-btn {
  width: 100%;
  padding: 10px;
  background-color: #ffb347;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Hover effect for the sign-up button */
.signup-btn:hover {
  background-color: #e98d34;
  box-shadow: 0 4px 12px rgba(255, 217, 64, 0.5); /* Adding shadow on hover */
}

/* Focus effect for the sign-up button */
.signup-btn:focus {
  outline: none;
  background-color: #e98d34;
  box-shadow: 0 0 5px rgba(233, 141, 52, 0.8);
}

/* Active effect for the sign-up button */
.signup-btn:active {
  transform: scale(0.98); /* Button shrinks slightly on click */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Slight shadow when clicked */
}

.login-link {
margin-top: 10px;
font-size: 14px;
text-align: center;
color: var(--label-color)
}

.login-link a {
color: #ff5733;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease-in-out;
}

.login-link a:hover {
color: #ffcc33;
}

/* Animations */
@keyframes fadeIn {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

@keyframes slideInLeft {
from {
  transform: translateX(-100%);
  opacity: 0;
}
to {
  transform: translateX(0);
  opacity: 1;
}
}

@keyframes slideInRight {
from {
  transform: translateX(100%);
  opacity: 0;
}
to {
  transform: translateX(0);
  opacity: 1;
}
}

@keyframes bounce {
0%, 100% {
  transform: translateY(0);
}
50% {
  transform: translateY(-10px);
}
}