body{
    display: grid;
    align-items: center;
}

main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
    padding: var(--space-xxxxl) var(--space-md);
}

.card-logo{
    width: 70px;
    height: 70px;
    background-color: var(--color-senary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.button-primary{
    color: var(--color-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-md);
    width: 100%;
    padding: var(--space-md);
    background-color: var(--color-senary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.icon-rocket{
    width: 40px;
}

.icon-identify{
    width: 20px;
}

.icon-lock{
    width: 20px;
}

.icon-key{
    width: 20px;
}

.icon-left-arrow{
    width: 25px;
}

.container-primary{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-md);
}

.container-title{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-sm);
}

.container-title h1{
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bd);
}

.container-title p{
    color: var(--color-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-nm);
}

.container-form{
    box-shadow: var(--shadow-primary);
    background-color: var(--color-quaternary);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: var(--space-lg);
}

.container-label{
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

.container-label label{
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semi-bd);
}

.container-input{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--space-lg);
    background-color: var(--color-tertiary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    width: 100%;
}

.container-input input{
    width: 100%;
    height: 100%;
    color: var(--color-primary);
}

.container-form .container-form-primary{
    width: 100%;

    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: var(--space-lg);
}

.container-form .container-form-secondary{
    padding-top: var(--space-lg);
    width: 100%;
    border-top: 1px solid var(--color-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-form .container-form-secondary a{
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    font-weight: var(--font-weight-lt);
}



.button-primary{
    transition: transform 0.2s ease-in-out;
}

.bg-purple{
    background-color: rgba(103, 20, 236, 0.349);
}

.bg-blue{
    background-color: rgba(35, 35, 234, 0.289);
}

.bg-green{
    background-color: rgba(26, 141, 8, 0.22);
}

.icon-card-access{
    width: 20px;
}

.container-code,
.container-password{
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}

.button-back{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--space-sm);
    background-color: transparent;
    border: none;
    font-size: var(--font-size-md);
    color: var(--color-secondary);
    font-weight: var(--font-weight-nm);
    transition: transform 0.2s ease-in-out;
}

.button-back:hover{
    transform: scale(1.2);
}

.container-password .container-password-footer span{
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-nm);
    color: var(--color-secondary);
}

.container-password .container-password-footer div{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--space-sm);
}

.container-password .container-password-footer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.loader {
    display: none;
    width: 24px;
    padding: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-senary);
    --_m: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {to{transform: rotate(1turn)}}



.card-access {
  cursor: pointer;
  width: 100%;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  display: flex; 
  align-items: center;
  justify-content: start;
  gap: var(--space-sm);
  background-color: var(--color-tertiary);
  transition: transform 0.4s ease;
}

.container-tertiary{
    display: none;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}

.container-secondary{
    display: none;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}

.container-secondary h2{
    color: var(--color-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-nm);
}

.container-secondary.show{
    display: flex;
    animation: fadeInDown 0.8s ease forwards;
}

.container-tertiary.show{
    display: flex;
    animation: fadeInDown 0.8s ease forwards;
}

.button-primary:hover,
.card-access:hover{
    transform: scale(1.2);
}

.card-access .card-access-primary{
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    height: 50px;
    width: 50px;
}

.card-access .card-access-secondary{
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: var(--space-sm);
}

.card-access .card-access-secondary h3{
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semi-bd);
    color: var(--color-primary);
}

.card-access .card-access-secondary p{
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-nm);
    color: var(--color-secondary);
}

.card-access.none{
    display: none;
}

.container-password.none{
    display: none;
}

.container-code.none{
    display: none;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}