section{
    display: flex;
    flex-direction: column;
    min-height: 80dvh;
    padding: 1rem;

    h1{
        font-size: 4rem;
        margin-bottom: 1rem;
        align-self: center;
    }

    .tab{
        display: flex;
        justify-content: space-around;
        margin-bottom: 1rem;

        
    }

    .tablink{
        width: 45%;
        padding: 1rem;
        border-bottom: 1px solid light-dark(var(--light-text), var(--dark-text));
        cursor: pointer;
        text-align: center;

        &:hover{
            color: light-dark(var(--light-secondary), var(--dark-secondary));
            border-bottom: 1px solid light-dark(var(--light-secondary), var(--dark-secondary));
        }

        &.active{
            color: light-dark(var(--light-main), var(--dark-main));
            border-bottom: 1px solid light-dark(var(--light-main), var(--dark-main));
        }
    }
}



.tabform{
    display: none;
    height: 70dvh;
    
    h2{
        font-size: 3rem;
        margin-bottom: .5rem;
        text-align: center;
    }

    input{
        border: none;
        border-bottom: 1px solid light-dark(var(--light-text), var(--dark-text));
        background-color: transparent;
        padding: .5rem;
        font-size: 1.1rem;

        &:focus{
            outline-color: light-dark(var(--light-main), var(--dark-main));
        }
    }

    .feedback{
        color: red;
        font-style: italic;
    }

    button{
        background-color: light-dark(var(--light-secondary), var(--dark-secondary));
        color: light-dark(var(--light-text), var(--dark-text));
        border:none;
        box-shadow: -2px -2px 1px 1px #01ff1b inset;
        cursor: pointer;
        font-size: 3rem;
        font-family: bytebounce;
        transition-duration: .2s;
        padding: .5rem;
        height: 7vh;

        &:hover{
            box-shadow: 2px 2px 1px 1px #005c09 inset;
            border: 1px solid light-dark(var(--light-text), var(--dark-text));
        }
    }
    
}
#register-form{
    grid-template-rows: repeat(13, 5dvh);
}

#login-form{
    grid-template-rows: repeat(7, 5dvh);
}

label{
    font-family: lato;
    color: light-dark(var(--light-text), var(--dark-text));
}

#login-form{
    display: grid;
}