@import url("./reset.css");
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --font-family: "Urbanist";
  --font-size: 18px;
  --font-size-sm: 13px;
  --font-size-lg: 32px;
  --line-height: 1.4;
  --font-weight: 400;
  --font-weight-bold: 600;
  --font-weight-bolder: 800;
  --font: var(--font-weight) var(--font-size) / var(--line-height) var(--font-family);
  --transition-time: 0.3s;
  --transition: all ease-in-out var(--transition-time);
  --color-white: #fff;
  --color-purple: #5d00ba;
  --color-facebook: #0866ff;
  --gap-xs: 16px;
  --gap-sm: 32px;
  --gap: 64px;
  --gap-xl: 128px;
  --border-radius: 3px;
  --height-logo: 80px;
  --width-login-detail: min(25%, 500px);
}
@media only screen and (max-width: 1024px){
    :root {
        --font-size: 17px;
        --font-size-sm: 12px;
        --font-size-lg: 28px;
        --height-logo: 60px;
        --gap-sm: 24px;
        --gap:48px;
        --gap-xl: 64px;
        --width-login-detail: 15%;
    }
}
@media only screen and (max-width: 568px){
    :root {
        --font-size-lg: 24px;
        --height-logo: 50px;
        --width-login-detail: 10%;
    }
}
body{font: var(--font);text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;}
h1, h2, h3, h4, h5{font-size: var(--font-size-lg);font-weight: var(--font-weight-bold);}
[class^="btn"] {border-radius: var(--border-radius);background-color: var(--color-facebook);display: inline-flex;line-height: 1;padding: 18px 32px;color: var(--color-white);text-decoration: none;text-transform: uppercase;font-size: var(--font-size-sm);font-weight: var(--font-weight-bolder);letter-spacing: 3px;user-select: none;transition: var(--transition);white-space: nowrap;}
[class^="btn"]:is(:hover, :focus) {filter: contrast(1.25);box-shadow: 0 16px 16px -4px rgba(0, 0, 0, 0.1);}
section.login {width: 100vw;height: 100dvh;background: var(--color-white);display: flex;align-items: center;padding-left: calc(var(--width-login-detail) + var(--gap));padding-right: var(--gap);position: relative;justify-content: center;}
section.login::before {content: " ";display: block;position: absolute;left: 0;width: var(--width-login-detail);top: 0;bottom: 0;background-color: var(--color-purple);background-image: url(../images/effect.svg);background-repeat: no-repeat;background-size: cover;background-position: left center;}
section.login > .info {display: flex;max-width: 50vw;flex-direction: column;gap: var(--gap);align-items: flex-end;width: 100%;}
section.login > .info > .welcome{width: 100%;display: flex;flex-direction: column;gap: var(--gap-sm);}
section.login > .info > .logo {height: var(--height-logo);aspect-ratio: 4;align-self: flex-start;}
section.login > .info > .logo > img {width: 100%;height: 100%;object-fit: contain;user-select: none;}
@media only screen and (max-width: 1024px){
    section.login > .info{align-items: center;}
    section.login > .info > .logo{align-self: center;}
    section.login > .info > .welcome{text-align: center;}
}
@media only screen and (max-width: 568px){
    section.login::before{height: var(--gap-xl);right: 0;width: 100%;background-position: center top;}
    section.login{padding-left: var(--gap);padding-top: var(--gap-xl);}
}