@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
body{
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #526D82;
    overflow-x: hidden; /* Prevents horizontal scrolling */
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

nav{
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box; /* Includes padding in the width */
    padding: 0rem; /* Adjust as needed, minimal values to avoid overflow */
    background-color:#9DB2BF;
    color: #FDFDFF;
}
/* Logo styling */
.logo img {
  max-width: 100%; /* Ensures the image scales down */
  height: auto; /* Maintains aspect ratio */
  width: 50px; /* Set a base width */
  filter: invert(1); /* Invert colors for visibility */
}

ul{
    display: flex;
}
ul li {
    list-style: none;
    padding: 0 13px;
    font-size: 20px;
}
ul li a{                      /*using this as the default lins are always in blue, which I'll use as per my choice.*/
    color: #fff;           /*colored the home,about..etc. */
    text-decoration: none;   /* use to remove underline from Home, About etc. */
}
ul>li>a:hover{
    color: #23bf23;
}
main{
    min-height: 90vh; /* use to set the height of the main area(body part of the website) */
    display: flex;
}

/* Outer Radius Initiated*/ 
.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: left;
            height: 90vh; /* Full viewport height */
            width: 90vw;  /* Full viewport width */
  }
  
  .form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: all 1s ease;
    width: 300px; /* Adjust width as needed */
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transition: all 1s ease;
  }

  /* Add the margin for the container */
.container {
  width: 90%; /* Use percentages for responsive width */
  max-width: 600px; /* Optional: a maximum width for larger screens */
  margin: 20px auto; /* Center the container and add vertical spacing */
}
  
  .form .form_front {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%; /* Ensures the form fits within its container */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 20px;
    position: absolute;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    padding: 65px 45px;
    border-radius: 15px;
    -webkit-box-shadow: inset 2px 2px 10px rgba(0,0,0,1),
    inset -1px -1px 5px rgba(255, 255, 255, 0.6);
            box-shadow: inset 2px 2px 10px rgba(0,0,0,1),
    inset -1px -1px 5px rgba(255, 255, 255, 0.6);
  }  
  .form_details {
    font-size: 25px;
    font-weight: 600;
    padding-bottom: 10px;
    color: black;
  }
  
  .input {
    width: 245px;
    min-height: 45px;
    color: #fff;
    outline: none;
    -webkit-transition: 0.35s;
    transition: 0.35s;
    padding: 0px 7px;
    background-color: #212121;
    border-radius: 6px;
    border: 2px solid #212121;
    -webkit-box-shadow: 6px 6px 10px rgba(0,0,0,1),
    1px 1px 10px rgba(255, 255, 255, 0.6);
            box-shadow: 6px 6px 10px rgba(0,0,0,1),
    1px 1px 10px rgba(255, 255, 255, 0.6);
  }
  
  .input::-webkit-input-placeholder {
    color: #999;
  }
  
  .input::-moz-placeholder {
    color: #999;
  }
  
  .input:-ms-input-placeholder {
    color: #999;
  }
  
  .input::-ms-input-placeholder {
    color: #999;
  }
  
  .input::placeholder {
    color: #999;
  }
  
  .input:focus.input::-webkit-input-placeholder {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    opacity: 0;
  }
  
  .input:focus.input::-moz-placeholder {
    -moz-transition: 0.3s;
    transition: 0.3s;
    opacity: 0;
  }
  
  .input:focus.input:-ms-input-placeholder {
    -ms-transition: 0.3s;
    transition: 0.3s;
    opacity: 0;
  }
  
  .input:focus.input::-ms-input-placeholder {
    -ms-transition: 0.3s;
    transition: 0.3s;
    opacity: 0;
  }
  
  .input:focus.input::placeholder {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    opacity: 0;
  }
  
  .input:focus {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
    -webkit-box-shadow: 6px 6px 10px rgba(0,0,0,1),
    1px 1px 10px rgba(255, 255, 255, 0.6),
    inset 2px 2px 10px rgba(0,0,0,1),
    inset -1px -1px 5px rgba(255, 255, 255, 0.6);
            box-shadow: 6px 6px 10px rgba(0,0,0,1),
    1px 1px 10px rgba(255, 255, 255, 0.6),
    inset 2px 2px 10px rgba(0,0,0,1),
    inset -1px -1px 5px rgba(255, 255, 255, 0.6);
  }
  
  .btn {
    padding: 10px 35px;
    cursor: pointer;
    background-color: #212121;
    border-radius: 6px;
    border: 2px solid #212121;
    -webkit-box-shadow: 6px 6px 10px rgba(0,0,0,1),
    1px 1px 10px rgba(255, 255, 255, 0.6);
            box-shadow: 6px 6px 10px rgba(0,0,0,1),
    1px 1px 10px rgba(255, 255, 255, 0.6);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    -webkit-transition: 0.35s;
    transition: 0.35s;
  }
  
  .btn:hover {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
    -webkit-box-shadow: 6px 6px 10px rgba(0,0,0,1),
    1px 1px 10px rgba(255, 255, 255, 0.6),
    inset 2px 2px 10px rgba(0,0,0,1),
    inset -1px -1px 5px rgba(255, 255, 255, 0.6);
            box-shadow: 6px 6px 10px rgba(0,0,0,1),
    1px 1px 10px rgba(255, 255, 255, 0.6),
    inset 2px 2px 10px rgba(0,0,0,1),
    inset -1px -1px 5px rgba(255, 255, 255, 0.6);
  }
  .container #signup_toggle {
    display: none;
  }

#resultCont div::first-letter{
  text-transform: uppercase;
}
#resultCont{
  display: inline; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
  margin-top: 10px; /* Space above the result container */
}
#loader{
  display: none; /* Loader hidden by default, Accessed on activating only. */
  margin-left: 10px; /*Add some space between loader and text.*/
}
footer{
    font-size: 15px;
    background-color: black;
    color: #fff;
    display : flex;
    padding: 20px 0px 20px;
    display : flex;
    justify-content: center;
    align-items: center;
}
/* For very small devices (smartphones in portrait mode) */
@media only screen and (max-width: 480px) {
  /* Styles for very small screens */
  .container {
    font-size: 12px;
  }
  input[type='text'] {
    width: 100%;
  }
  nav {
    flex-direction: column;
  }
  .logo {
    padding: 4px 0;
    font-size: 10px;
  }
  .logo span {
    font-size: 16px;
  }
  .logo img {
    width: 30px; /* Smaller logo for very small devices */
    filter: invert(1);
  }
}


/* For small devices (smartphones in landscape mode) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  /* Styles for small devices */
  .container {
    font-size: 12px;
  }
  input[type='text'] {
    width: 95%;
  }
  nav {
    flex-direction: column;
  }
  .logo {
    padding: 6px 0;
    font-size: 14px;
  }
  .logo span {
    font-size: 18px;
  }
  .logo img {
    width: 40px; /* Adjust logo size for small devices */
    filter: invert(1);
  }
}

/* For medium devices (tablets in portrait mode) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* Styles for tablets */
  .container {
    font-size: 14px;
  }
  input[type='text'] {
    width: 90%;
  }
  nav {
    flex-direction: row;
    justify-content: space-around;
  }
  .logo {
    padding: 8px 0;
    font-size: 16px;
  }
  .logo span {
    font-size: 20px;
  }
  .logo img {
    width: 18px;
    filter: invert(1);
  }
}

/* For large devices (desktop screens) */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  /* Styles for desktops */
  .container {
    font-size: 16px;
  }
  input[type='text'] {
    width: 85%;
  }
  nav {
    flex-direction: row;
    justify-content: space-between;
  }
  .logo {
    padding: 10px 0;
    font-size: 18px;
  }
  .logo span {
    font-size: 22px;
  }
  .logo img {
    width: 0px;
    filter: invert(0.5); /* Slightly less inverted */
  }
}

/* For extra-large devices (widescreens) */
@media only screen and (min-width: 1201px) {
  /* Styles for extra-large screens */
  .container {
    font-size: 18px;
  }
  input[type='text'] {
    width: 80%;
  }
  nav {
    flex-direction: row;
    justify-content: space-between;
  }
  .logo {
    padding: 12px 0;
    font-size: 20px;
  }
  .logo span {
    font-size: 24px;
  }
  .logo img {
    width: 40px;
    filter: none; /* Restore original colors */
  }

}