@import url('colors.css');
@import url('typography.css');
@import url('radius.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
* {
    padding: 0; 
	margin: 0; 
    
	list-style: none; 
	text-decoration: none; 
	cursor: default; 
	color: inherit; 
	border:0;
    box-sizing: border-box;

    text-rendering:optimizeLegibility;

    font-family: "Nunito",-apple-system,Helvetica,Arial,sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
body {
    touch-action: manipulation;
}


html {
    overflow: hidden;
    height: 100vh;
    font-size: var(--text-size-base);
}

body {
    height: 100%;
    font-weight: var(--text-regular);
    font-variation-settings: "slnt" 0;
    
    color: var(--color-base-white);

    position: relative;
}

/* background colors */

.bg-gray {background: var(--color-gray-50);}
.bg-white {background: var(--color-base-white);}

.border {border: 1px solid var(--color-gray-200);}
.border-r {border-right: 1px solid var(--color-gray-200);}
.border-l {border-left: 1px solid var(--color-gray-200);}
.border-t {border-top: 1px solid var(--color-gray-200);}
.border-b {border-bottom: 1px solid var(--color-gray-200);}

.border-rn {border-right: 0 !important;}
.border-ln {border-left: 0 !important;}
.border-tn {border-top: 0 !important;}
.border-bn {border-bottom: 0 !important;}

/* typography */

b {font-weight: var(--text-bold);}

p {
    font-size: var(--text-size-lg);
    line-height: var(--line-text-lg);
}

hr,
.hr {
    border-width: 1px 0 0 0;
    border-color: var(--color-gray-200);
    border-style: solid;

    &.vertical {
        border-width: 0 1px 0 0;
    }
}

h1 {
    font-size: var(--display-size-sm);
    line-height: var(--line-display-xl);
}

h2 {
    font-size: var(--display-size-xs);
    line-height: var(--line-display-xs);
}

h3 {
    font-size: var(--text-size-xl);
    line-height: var(--line-text-xl);
}

h4 {
    font-size: var(--text-size-lg);
    line-height: var(--line-text-lg);
}

h5 {
    font-size: var(--text-size-md);
    line-height: var(--line-text-md);
}

h1, h2, h3, h4, h5 {
    font-weight: var(--text-medium);
}

picture {
    & img {
        width: inherit;
        height: inherit;
        display: block;
    }
}

.text-italic {font-style: italic;}

.text-thin {font-weight: var(--text-thin);}
.text-light {font-weight: var(--text-light);}
.text-regular {font-weight: var(--text-regular);}
.text-medium {font-weight: var(--text-medium);}
.text-semibold {font-weight: var(--text-semibold);}
.text-bold {font-weight: var(--text-bold);}

.text-xl {
    font-size: var(--text-size-xl);
    line-height: var(--line-text-xl);
}
.text-lg {
    font-size: var(--text-size-lg);
    line-height: var(--line-text-lg);
}
.text-md {
    font-size: var(--text-size-md);
    line-height: var(--line-text-md);
}
.text-sm {
    font-size: var(--text-size-sm);
    line-height: var(--line-text-sm);
}
.text-xs {
    font-size: var(--text-size-xs);
    line-height: var(--line-text-xs);
}

.text-c {text-align: center;}

.text-gray-100 {color: var(--color-gray-100);}
.text-gray-200 {color: var(--color-gray-200);}
.text-gray-300 {color: var(--color-gray-300);}
.text-gray-400 {color: var(--color-gray-400);}
.text-gray-500 {color: var(--color-gray-500);}
.text-gray-600 {color: var(--color-gray-600);}
.text-gray-700 {color: var(--color-gray-700);}
.text-gray-800 {color: var(--color-gray-800);}
.text-gray-900 {color: var(--color-gray-900);}

.text-blue-100 {color: var(--color-blue-100);}
.text-blue-200 {color: var(--color-blue-200);}
.text-blue-300 {color: var(--color-blue-300);}
.text-blue-400 {color: var(--color-blue-400);}
.text-blue-500 {color: var(--color-blue-500);}
.text-blue-600 {color: var(--color-blue-600);}
.text-blue-700 {color: var(--color-blue-700);}
.text-blue-800 {color: var(--color-blue-800);}
.text-blue-900 {color: var(--color-blue-900);}

.text-cool-gray-100 {color: var(--color-cool-gray-100);}
.text-cool-gray-200 {color: var(--color-cool-gray-200);}
.text-cool-gray-300 {color: var(--color-cool-gray-300);}
.text-cool-gray-400 {color: var(--color-cool-gray-400);}
.text-cool-gray-500 {color: var(--color-cool-gray-500);}
.text-cool-gray-600 {color: var(--color-cool-gray-600);}
.text-cool-gray-700 {color: var(--color-cool-gray-700);}
.text-cool-gray-800 {color: var(--color-cool-gray-800);}
.text-cool-gray-900 {color: var(--color-cool-gray-900);}

.text-error-100 {color: var(--color-error-100);}
.text-error-200 {color: var(--color-error-200);}
.text-error-300 {color: var(--color-error-300);}
.text-error-400 {color: var(--color-error-400);}
.text-error-500 {color: var(--color-error-500);}
.text-error-600 {color: var(--color-error-600);}
.text-error-700 {color: var(--color-error-700);}
.text-error-800 {color: var(--color-error-800);}
.text-error-900 {color: var(--color-error-900);}

.text-success-100 {color: var(--color-success-100);}
.text-success-200 {color: var(--color-success-200);}
.text-success-300 {color: var(--color-success-300);}
.text-success-400 {color: var(--color-success-400);}
.text-success-500 {color: var(--color-success-500);}
.text-success-600 {color: var(--color-success-600);}
.text-success-700 {color: var(--color-success-700);}
.text-success-800 {color: var(--color-success-800);}
.text-success-900 {color: var(--color-success-900);}

.text-warning-100 {color: var(--color-warning-100);}
.text-warning-200 {color: var(--color-warning-200);}
.text-warning-300 {color: var(--color-warning-300);}
.text-warning-400 {color: var(--color-warning-400);}
.text-warning-500 {color: var(--color-warning-500);}
.text-warning-600 {color: var(--color-warning-600);}
.text-warning-700 {color: var(--color-warning-700);}
.text-warning-800 {color: var(--color-warning-800);}
.text-warning-900 {color: var(--color-warning-900);}

/* cursor pointer */

a,
button,
.button,
.gender-label {
    cursor: pointer;
    &> * {
        cursor: pointer;
    }
}

.button {

    max-width: 400px;

    padding: .8rem 3rem;

    color: var(--color-gray-200);
    font-weight: var(--text-semibold);
    font-size: var(--text-size-lg);

    border-radius: var(--radius-full);

    background: var(--color-gray-900);

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

    text-align: center;

    gap: .5rem;

    & i {
        font-size: var(--display-size-xs);
    }

    &.hidden {
        /* color: var(--color-gray-900); */
        & .text {
            filter: blur(9px);
        }
    }

    &.white {
        background: var(--color-base-white);
        color: var(--color-gray-900);
        font-weight: var(--text-bold);
        font-size: var(--text-size-xl);
    }

    &.border {
        border: 1px solid var(--color-gray-800);
    }
}

input[type="text"],
input[type=password] {
    width: 250px;

    padding: .6rem 1.2rem;

    background: var(--color-gray-950);
    border: solid 1px var(--color-gray-900);
    color: var(--color-gray-300);

    border-radius: var(--radius-full);

    font-size: var(--text-size-lg);
    font-weight: var(--text-regular);

    &:focus {
        outline: none;
        border: solid 1px var(--color-gray-800);
    }

    &::placeholder {
        color: var(--color-gray-700);
    }
}

input[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: none;

    &:checked + label {
        background: var(--color-base-white);
        color: var(--color-gray-900);
        border-color: var(--color-base-white);
    }
}

.tag {
    padding: .5rem 1.2rem;
    border-radius: var(--radius-full);

    border: solid 1px var(--color-gray-900);

    font-size: var(--text-size-md);
    font-weight: var(--text-regular);
    color: var(--color-gray-200);

    &.white {
        background: var(--color-base-white);
        color: var(--color-gray-900);
        border-color: var(--color-base-white);
    }
}

/* text align */

.text-c {text-align: center;}

/* stiles of flex */

.row {display: flex;}

.wrap {flex-wrap: wrap;}

.column {flex-direction: column;}

.align-c {align-items: center;}
.align-s {align-items: flex-start;}

.align-c-end {align-content: flex-end;}

.justify-end {justify-content: flex-end;}
.justify-c {justify-content: center;}
.justify-sb {justify-content: space-between;}
.justify-fe {justify-content: flex-end;}

.gap {gap: 1rem !important;}
.gap-2x {gap: 2rem !important;}
.gap-3x {gap: 3rem !important;}
.gap-4x {gap: 4rem !important;}

.column-gap {column-gap: 1rem !important;}
.column-gap-2x {column-gap: 2rem !important;}
.column-gap-3x {column-gap: 3rem !important;}
.column-gap-4x {column-gap: 4rem !important;}

.row-gap {row-gap: 1rem;}
.row-gap-2x {row-gap: 2rem;}
.row-gap-3x {row-gap: 3rem;}
.row-gap-4x {row-gap: 4rem;}

/* flex */

.flex-12    {flex: 12 1 100%;}
.flex-11    {flex: 11 2 91.66666667%;}
.flex-10 	{flex: 10 3 83.33333333%;}
.flex-9		{flex: 9 4 75%;}
.flex-8		{flex: 8 5 66.66666667%;}
.flex-7		{flex: 7 6 58.33333333%;}
.flex-6		{flex: 6 7 50%;}
.flex-5		{flex: 5 8 41.66666667%;}
.flex-4		{flex: 4 9 33.33333333%;}
.flex-3		{flex: 3 10 25%;}
.flex-2		{flex: 2 11 16.66666667%;}
.flex-1		{flex: 1 12 8.33333333%;}

/* columnd width */

.col-12	    {width: 100%;}
.col-11	    {width: 91.66666667%;}
.col-10 	{width: 83.33333333%;}
.col-9		{width: 75%;}
.col-8		{width: 66.66666667%;}
.col-7		{width: 58.33333333%;}
.col-6		{width: 50%;}
.col-5		{width: 41.66666667%;}
.col-4		{width: 33.33333333%;}
.col-3		{width: 25%;}
.col-2		{width: 16.66666667%;}
.col-1		{width: 8.33333333%;}

/* grid */

.grid {display: grid;}
.column-2 {grid-template-columns: repeat(2, 1fr);}
.column-3 {grid-template-columns: repeat(3, 1fr);}
.column-4 {grid-template-columns: repeat(4, 1fr);}

/* Radius */

.radius-sm {border-radius: var(--radius-sm);}
.radius-md {border-radius: var(--radius-md);}
.radius-lg {border-radius: var(--radius-lg);}
.radius-full {border-radius: var(--radius-full);}

.radius-tln {border-top-left-radius: 0 !important;}
.radius-trn {border-top-right-radius: 0 !important;}
.radius-bln {border-bottom-left-radius: 0 !important;}
.radius-brn {border-bottom-right-radius: 0 !important;}

/* padding y margin */

.pt-xxxl {padding-top: var(--base-size-xxxl);}
.pt-xxl {padding-top: var(--base-size-xxl);}
.pt-xl {padding-top: var(--base-size-xl);}
.pt-lg {padding-top: var(--base-size-lg);}
.pt-md {padding-top: var(--base-size-md);}
.pt-sm {padding-top: var(--base-size-sm);}
.pt-xs {padding-top: var(--base-size-xs);}

.pb-xxxl {padding-bottom: var(--base-size-xxxl);}
.pb-xxl {padding-bottom: var(--base-size-xxl);}
.pb-xl {padding-bottom: var(--base-size-xl);}
.pb-lg {padding-bottom: var(--base-size-lg);}
.pb-md {padding-bottom: var(--base-size-md);}
.pb-sm {padding-bottom: var(--base-size-sm);}
.pb-xs {padding-bottom: var(--base-size-xs);}

.pl-xxxl {padding-left: var(--base-size-xxxl);}
.pl-xxl {padding-left: var(--base-size-xxl);}
.pl-xl {padding-left: var(--base-size-xl);}
.pl-lg {padding-left: var(--base-size-lg);}
.pl-md {padding-left: var(--base-size-md);}
.pl-sm {padding-left: var(--base-size-sm);}
.pl-xs {padding-left: var(--base-size-xs);}

.pr-xxxl {padding-right: var(--base-size-xxxl);}
.pr-xxl {padding-right: var(--base-size-xxl);}
.pr-xl {padding-right: var(--base-size-xl);}
.pr-lg {padding-right: var(--base-size-lg);}
.pr-md {padding-right: var(--base-size-md);}
.pr-sm {padding-right: var(--base-size-sm);}
.pr-xs {padding-right: var(--base-size-xs);}

.p-xxxl {padding: var(--base-size-xxxl);}
.p-xxl {padding: var(--base-size-xxl);}
.p-xl {padding: var(--base-size-xl);}
.p-lg {padding: var(--base-size-lg);}
.p-md {padding: var(--base-size-md);}
.p-sm {padding: var(--base-size-sm);}
.p-xs {padding: var(--base-size-xs);}

.p-ln {padding-left: 0 !important;}
.p-rn {padding-right: 0 !important;}
.p-tn {padding-top: 0 !important;}
.p-bn {padding-bottom: 0 !important;}

.mt-xxxl {margin-top: var(--base-size-xxxl);}
.mt-xxl {margin-top: var(--base-size-xxl);}
.mt-xl {margin-top: var(--base-size-xl);}
.mt-lg {margin-top: var(--base-size-lg);}
.mt-md {margin-top: var(--base-size-md);}
.mt-sm {margin-top: var(--base-size-sm);}
.mt-xs {margin-top: var(--base-size-xs);}

.mb-xxxl {margin-bottom: var(--base-size-xxxl);}
.mb-xxl {margin-bottom: var(--base-size-xxl);}
.mb-xl {margin-bottom: var(--base-size-xl);}
.mb-lg {margin-bottom: var(--base-size-lg);}
.mb-md {margin-bottom: var(--base-size-md);}
.mb-sm {margin-bottom: var(--base-size-sm);}
.mb-xs {margin-bottom: var(--base-size-xs);}

.ml-xxxl {margin-left: var(--base-size-xxxl);}
.ml-xxl {margin-left: var(--base-size-xxl);}
.ml-xl {margin-left: var(--base-size-xl);}
.ml-lg {margin-left: var(--base-size-lg);}
.ml-md {margin-left: var(--base-size-md);}
.ml-sm {margin-left: var(--base-size-sm);}
.ml-xs {margin-left: var(--base-size-xs);}

.mr-xxxl {margin-right: var(--base-size-xxxl);}
.mr-xxl {margin-right: var(--base-size-xxl);}
.mr-xl {margin-right: var(--base-size-xl);}
.mr-lg {margin-right: var(--base-size-lg);}
.mr-md {margin-right: var(--base-size-md);}
.mr-sm {margin-right: var(--base-size-sm);}
.mr-xs {margin-right: var(--base-size-xs);}

.m-xxxl {margin: var(--base-size-xxxl);}
.m-xxl {margin: var(--base-size-xxl);}
.m-xl {margin: var(--base-size-xl);}
.m-lg {margin: var(--base-size-lg);}
.m-md {margin: var(--base-size-md);}
.m-sm {margin: var(--base-size-sm);}
.m-xs {margin: var(--base-size-xs);}

.m-ln {margin-left: 0 !important;}
.m-rn {margin-right: 0 !important;}
.m-tn {margin-top: 0 !important;}
.m-bn {margin-bottom: 0 !important;}

.ml-a {margin-left: auto;}
.mr-a {margin-right: auto;}
.mt-a {margin-top: auto;}
.mb-a {margin-bottom: auto;}