* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    font-size: 62.5%;
}

body {
    background: #1f2937;
}

body, input, button {
    font-size: 1.6rem;
    font-family: 'Source Sans Pro', sans-serif;
}

form {
    padding: 2.4rem;
    max-width: 40rem;
    margin: auto;
}

#card {
    width: 32.8rem;
    height: 21.8rem;
    perspective: 60rem;
}

#card > div {
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

#card .front {
    background: url(assets/front.png) no-repeat;
    transform: rotateY(0);
}

#card .back {
    background: url(assets/back.png) no-repeat;
    transform: rotateY(-180deg);
    top: -.8rem;
}

#card:active .front,
#card:hover .front {
    transform: rotateY(180deg);
}

#card:active .back,
#card:hover .back {
    transform: rotateY(0deg);
}

.flex {
    display: flex;
}

.inputs {
    margin-top: .4rem;
    flex-direction: column;
    gap: 2.4rem;
}

label {
    font-weight: 600;
    font-size: 1.4rem;
    color: #e5e7eb;
    gap: .4rem;
    align-items: center;
}

input {
    margin-top: .4rem;
    width: 100%;
    font-family: 'Source Sans Pro';
    padding: 1.2rem;
    border: .1rem solid #374151;
    background: #111827;
    border-radius: .4rem;
    color: #f3f4f6;
}

input:focus {
    outline: 0.15rem solid #9333ea; /* ao clicar na caixa de texto */
}

input:invalid:focus {
    border: 0.15rem solid #fb7185;
}

input + .warning {
    display: none;
}

input:invalid:focus + .warning {
    font-size: 1.4rem;
    margin-top: .8rem;
    color: #fb7185;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.col-2 {
    gap: 2.4rem;
    align-items: center;
  }
  
.col-2 .wrapper:nth-child(2) {
    flex-basis: 30%;
}

.security {
    margin-top: 2.4rem;
    justify-content: center;
    gap: .8rem;
    font-size: 1.4rem;
    color: #e5e7eb;
}

button {
    margin-top: 4rem;
    border: 0;
    padding: 1.6rem;
    width: 100%;
    background: #9333ea;
    box-shadow: .0rem .4rem 1.6rem rgba(0, 0, 0, 0.1);
    border-radius: .4rem;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: #f9fafb;
    cursor: pointer;
    transition: background .2s;
}

button:hover {
    background: #a855f7;
}