/* THIS IS FOR SMALLER VIEWPORTS */
@media only screen and (max-width:600px){

	/************************************/
	/* RESPONSIVE LOGIN WEBPAGE STYLING */
	/************************************/

    #login_signup, #user-info {
        display: none;
    }

    nav #searchbar {
        margin-bottom: 5vh;
		width: 90%;
		justify-self: center;
	}

	.outer-container {
		display: flex;
		flex-direction: column;
	}

	.content-container {
		margin: auto;
		height: 100%;
		width: 90%;
		align-items: center;
		justify-content: center;
		background-color: #e3e3e3;
		border-left: solid #c2c2c2;
		border-right: solid #c2c2c2;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}

	.subheader{
		margin-top: auto;
		margin-bottom: 15px;
		display: flex;
		width: 70%;
		background: rgb(218, 41, 28);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		border-style: none;
		font-size: 10px;
	} 
	
	.subheader h1{
		color: white;
		text-align: center;
	}

	/*this edits the login div*/
	#login{
		color: white;		
		margin-bottom: 15vh;
		width: 80%;	
		background-color: #333;
		padding: 20px;		
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;	
	}

	/* Edits the inputs inside of the login div */
	#login input{
		padding:2%;
		margin-bottom: 5%;
		margin-top: 2%;
		border-radius: 5px;
	}
	
	/*edits the username and password inputs specifically*/
	#login #username, #password{
		width: 90%;
	}

	/*edits links inside of the login div*/
	#login a{
		color: white;
		margin: 5px;
	}
	
	/*edits the submit button on the login/signup page*/
	#login button{
		padding: 10px;
		border-radius: 10px;
	}

	footer {
		background-color: #e3e3e3;
		border-left: solid #c2c2c2;
		border-right: solid #c2c2c2;
		margin: auto;
		width: 90%;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		height: 150px;
	}

}