@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	font-family: "Roboto", sans-serif;
}

:root {
	--primary-color: #0099FF; 
	--secondary-color: #006CCA;
	--accent-color: #38FF8E;
	
	--gray-color: #555555;
	--background-color: #0D0D0F;
	--text-color: #FFFFFF;
}

body {
	display: grid;
	place-items: center;

	background-color: var(--background-color);
	text-align: center;
}

main {
	display: flex;
	flex-direction: column;
}

h1 {
	margin-top: 20vh;

	font-size: 4em;
	color: var(--primary-color);
}

#welcomeText {
	margin-top: 2vh;
	color: white;
}

#loginSignUpDiv {
	display: none;
}

#dashboardDiv {
	display: none;
}

#feedbackDiv {
	display: none;
}

#dashboardButton {
	outline: none;
	border: var(--accent-color) 2px solid;
	border-radius: 40px;
	font-size: 1.5em;
	font-weight: 600;
	cursor: pointer;

	color: var(--text-color);
	background: transparent;

	margin-top: 4vh;
	padding-left: 1vw;
	padding-right: 1vw;

	padding-top: 1vh;
	padding-bottom: 1vh;

	width: 28vw;

	transition: 0.4s;
}

#dashboardButton:hover {
	transition: 0.4s;
	background: var(--accent-color);
	color: var(--background-color);
}

#loginButton {
	outline: none;
	border: var(--secondary-color) 2px solid;
	border-radius: 40px;
	font-size: 1.5em;
	font-weight: 600;
	cursor: pointer;

	color: var(--text-color);
	background: transparent;

	margin-top: 4vh;
	padding-left: 1vw;
	padding-right: 1vw;

	padding-top: 1vh;
	padding-bottom: 1vh;

	width: 14vw;

	transition: 0.4s;
}

#loginButton:hover {
	transition: 0.4s;
	background: var(--secondary-color);
	border: var(--primary-color) 2px solid;
} 

#signUpButton {
	outline: none;
	border: var(--accent-color) 2px solid;
	border-radius: 40px;
	font-size: 1.5em;
	font-weight: 600;
	cursor: pointer;

	color: var(--text-color);
	background: transparent;

	margin-top: 4vh;
	padding-left: 1vw;
	padding-right: 1vw;

	padding-top: 1vh;
	padding-bottom: 1vh;

	width: 14vw;

	transition: 0.4s;
}

#signUpButton:hover {
	transition: 0.4s;
	background: var(--accent-color);
	color: var(--background-color);
}


#feedbackButton:hover {
	transition: 0.4s;
	background: var(--accent-color);
	color: var(--background-color);
}


.loggedButtons {
	outline: none;
	border: var(--gray-color) 2px solid;
	border-radius: 40px;
	font-size: 1.5em;
	font-weight: 600;
	cursor: pointer;

	color: var(--text-color);
	background: transparent;

	margin-top: 4vh;
	padding-left: 1vw;
	padding-right: 1vw;

	padding-top: 1vh;
	padding-bottom: 1vh;

	width: 28vw;

	transition: 0.4s;
}

#loggedButtons:hover {
	transition: 0.4s;
	background: var(--accent-color);
	color: var(--background-color);
}

@media screen and (max-width: 512px) {
	#loginButton {
		width: 36vw;
	}
	#signUpButton{
		width: 36vw;
	}
	#dashboardButton {
		width: 72vw;
	}
	.loggedButtons {
		width: 72vw;
	}
}