body {
    background: var(--colour-2);
}

#hero {
    margin: auto;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    gap: 1em;
    scale: 1.5;
    padding: 0.5em;
  
    background: var(--colour-4);
    border-radius: 1em;
    box-shadow: 1px 1px 5px black;
}

.login-area, .signup-area {
    margin: auto;
    margin-top: 1em;
    
    form {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        align-items: center;
    }
    
    input {
        background: var(--colour-4);
        color: var(--colour-3);
        width: calc(90% - 1em);
        border: 2px solid var(--colour-1);
        border-radius: 1em;
        padding: 0.5em;
    }
    
    button {
        padding: 0.5em;
    }
    
    .goto-signup, .goto-login {
        font-style: italic;
        text-decoration: underline;
        cursor: pointer;
    }
}

.login-area.hidden,
.signup-area.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;  /* stop hidden form taking up space */
}