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

 body {


     display: flex;
     justify-content: center;
     align-items: center;
     font-family: Arial, Helvetica, sans-serif;
     overflow: hidden;


 }

 .all {
     float: left;
     z-index: -200;
     background-image: url(../imgs/background-imgs/dypsis-lutescens-potted-plant-areca-palm__0768630_pe754508_\ \(1\).png);
     width: 100%;
     height: 100vh;
     background-repeat: no-repeat;
     background-size: cover;
     filter: blur(5px);
     transform: rotate(-10deg) scale(1.5);

 }

 .container {
     width: 1100px;
     height: 700px;
     position: absolute;
     top: 25px;

     display: flex;
     background-color: white;

     box-shadow: 0 0 10px 1px gray;
 }

 .right,
 .left {
     width: 50%;
     height: 100%;
     /* border: 2px solid gold; */
 }

 .right {
     background-image: url(../imgs/background-imgs/900px.avif);
     background-position: center;
     background-color: rgb(23, 111, 138);
     background-size: contain;
     background-repeat: no-repeat;
     border-top-left-radius: 50px;
     border-bottom-left-radius: 50px;
 }

 .left {
     background-color: white;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;

     /* padding: 20px; */
 }

 h2 {
     font-size: 25px;
     font-weight: bold;
     font-family: monospace;
     letter-spacing: 1px;
     text-shadow: -1px 1px 10px gray;

 }


 .left .containerL {
     width: 65%;
     height: 70%;

     display: flex;
     flex-direction: column;
     justify-content: space-between;

     gap: 40px;
 }


 form {
     flex-grow: 1;

     /* border: 2px dashed darkblue; */
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: 20px;
 }

 .small-cont {
     display: flex;
     flex-direction: column;
     /* border: 2px solid red; */
 }




 input[type="submit"] {
     padding: 7px;
     background-color: green;
     color: white;
     font-weight: bold;
     border-radius: 8px;
     border: none;

 }



 .or {
     width: 100%;
     background-color: grey;
     height: 1px;
     position: relative;
 }


 .or::before {
     content: "";
     width: 100%;
     height: 1px;
     background-color: gray;
     position: absolute;

 }

 .or:after {
     content: "Or";
     padding: auto 10px;
     position: absolute;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: rgba(255, 255, 255, 0.107);
     font-size: 12px;
 }

 .label-total {
     /* font-weight: bold; */
     margin-bottom: 2px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
 }

 .label-total+input {
     padding: 4px;
     border-radius: 8px;
     border: 1px solid gray;
 }

 .checkbox-cont {
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }

 input[type="checkbox"] {
     width: 10px;

 }

 input[type="checkbox"]+label {
     font-size: 10px;
     margin-left: 5px;

 }

 span a {
     all: unset;
     text-decoration: underline;
 }

 button,
 span,
 a {
     cursor: pointer;

 }

 button {
     transition: transform 0.3s, box-shadow 0.3s;
 }

 button:hover {
     transform: scale(1.1);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

 }

 input[type="submit"] {
     transition: background-color 0.3s, box-shadow 0.3s;

 }

 input[type="submit"]:hover {
     color: black;
     background-color: rgb(1, 214, 164);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

 }

 .sign-with-cont {
     width: 100%;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     column-gap: 20px;

 }

 .sign-with-cont button {
     padding: 10px;
     width: calc(50% - 10px);
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: white;
     border: 1px solid gray;
     border-radius: 8px;
     font-size: clamp(9.8px, 1vw, 22px);



 }

 .c {

     width: 80%;
     padding: 10px;
     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 14px;

 }

 .c p {
     display: inline-block;
     margin-right: 5px;
 }

 img {
     display: inline-block;
     margin-right: 6px;
     width: 15px;

 }



 @media (min-width: 1682px) {
     body {
         display: flex;
         justify-content: center;
         align-items: center;

     }

     .container {
         width: 70%;
         height: 80%;
         top: auto;
     }

     h2 {
         font-size: 40px;
     }

     .small-cont label {
         font-size: 20px;
         font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         margin-bottom: 5px;

     }

     input[type="text"],
     input[type="password"] {
         padding: 10px;
     }

     input[type="checkbox"] {
         width: 20px;
     }

     input[type="checkbox"]+label {
         font-size: 15px;
     }

     input[type="submit"] {
         padding: 15px;
         font-size: 17px;
         font-family: monospace;
     }

     .or {
         height: 2px;
     }

     .or:after {
         font-size: 15px;
         padding: 5px;
         letter-spacing: 2px;
     }

     button {
         padding: 30px;
     }

     img {
         width: 20px;
         margin-right: 10px;
     }

     img+p,
     .c {
         font-size: 15px;

     }

     .sign-with-cont {
         column-gap: 20px;
         row-gap: 10px;
     }

 }

 .c a {
     text-decoration: none !important;
 }


 ::selection {
     background-color: gold;
 }

 @media (max-width: 768px) {
     body {
         display: flex;
         justify-content: center;
         align-items: center;
         color: rgba(0, 0, 0, 0.659);
            width: 200px;
            overflow-x: hidden;
        }

     .container {
         width: 85%;
         height: 550px;
         border-radius: 20px;

         display: flex;
         justify-content: center;
         align-items: center;


         position: absolute;
         left: 20px;
     }

     .right {
         position: absolute;
         border-radius: unset;
         width: 100%;
         border-radius: 20px;

         background-color: rgb(23, 100, 85);

         display: flex;
         justify-content: center;
         align-items: center;

     }

     .left {
         position: absolute;
         z-index: 10;
         background-color: #ffffffaf;

         /* width: 80%; */
         width: 100%;

         border-radius: 20px;

         box-shadow: inset 0 0 1000px 5px rgba(255, 255, 255, 0.498);

     }

     .c p {
         color: black;
     }

     .or {
         margin: -10px auto;
     }

 }

 @media (min-width:769px)and (max-width:900px) {
     .container {
         width: 95%;
         height: 90%;
     }

     .sign-with-cont {
         margin-top: -10px;
     }

     .sign-with-cont button {
         position: relative;
         padding: 15px;
     }

     .sign-with-cont button p {
         position: absolute;
         left: 20px;
     }

     .sign-with-cont img {
         width: 13px;
         margin: unset;
         position: absolute;
         left: 2px;
     }

 }
 @media (max-width:1024px) {
    .container{
        width: 90%;
        height: 90%;
    
    }
 }
 @media () {
    
 }