.sign-in{ display: none; } /* Hides the corner links */

main {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 5vh 1rem 1rem;
}
.signin-box {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 80vw;
	background-color: var(--signin_bg);
	padding: 5px 5px 10px 5px;
	border-radius: 5px;
	font-size: clamp(1rem, 1.3vw, 1.5rem);
}

.signin-box div{
	display: flex;
	justify-content: center;
}

.signin-box input{
	font-size: clamp(1rem, 1.3vw, 1.5rem);
	color: var(--signin_c);
	padding: 5px;
	margin: 10px;
}

.signin-box input[type=submit]{
	padding: 10px;
}

.signin-box input:not([type="submit"]) {
	width: 90%;
}

/* Base styles = mobile (< 480px) already your default */

/* Small devices (large phones, 480px and up) */
@media (min-width: 480px) {
    .signin-box {
        width: 55%;
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .signin-box {
        width: 40%;
    }
}

/* Small laptops/desktops (1024px and up) */
@media (min-width: 1024px) {
    .signin-box {
        width: 30%;
    }
}

/* Large desktops (1440px and up) */
@media (min-width: 1440px) {
    .signin-box {
        max-width: 600px; /* prevents it from getting absurdly wide */
        width: 30%;
    }
}