@import "reset.css";

:root {
    --ink: #333;
    --paper: wheat;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    font-family: sans-serif;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.login {
    .inner-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	h1 {
	    font-size: 3rem;
	    font-weight: bold;
	    padding: 20px;
	    text-align: center;
	}

	form {
	    display: flex;
	    align-items: center;
	    flex-direction: column;
	    gap: 2rem;

	    input[type="submit"], input[type="button"], button {
		background-color: var(--ink);
		color: var(--paper);
		flex: 1;
		font-size: 6vw;
		padding: 15px 32px;
		text-align: center;
		cursor: pointer;
		width: 90%;
			    
		
	    }
	    input[type="text"] ,input[type="password"]{
		flex: 1;
		width: 90%;
		font-size: 7vw;
	    }
	}
    }
}

.access {
    display: flex;
    flex: 1;
    width: 80%;
    align-items: center;
    justify-content: center;

    inner-column {
	
	display: flex;
	flex-direction: column;
	gap: 15em;
	button {
	    font-size: 4rem;
	    background-color: var(--ink);
	    color: lightgrey;
	    border: 3px solid white;
	    padding: 2rem;
	    border-radius: 5px;
	}
	button:active {
	    transform: scale(0.9);
	    color: #fff;
	    text-shadow:
		0 0 7px #fff,
		0 0 10px #fff,
		0 0 21px #fff,
		0 0 42px #0fa,
		0 0 82px #0fa,
		0 0 92px #0fa,
		0 0 102px #0fa,
		0 0 151px #0fa;
	}
    }
}

.active {
    animation: buttonAnimation 1s ease-in-out 5;
}

@keyframes buttonAnimation {
    0% {
        background-color: var(--ink);
    }
    50% {
	background-color: lime;

    }
    100% {
        background-color: (--ink);

    }
}



@media (min-width: 700px) { /* Adjust the breakpoint as needed */
    .login {
        .inner-column {
            form {
                input[type="submit"], input[type="button"], button {
                    font-size: 3rem; /* Fixed size for larger screens */
                    padding: 10px 20px; /* Adjust padding */
                }
                input[type="text"], input[type="password"] {
                    font-size: 3rem; /* Fixed size for larger screens */
                }
            }
        }
    }
}