:root {
	--text-color: #787092;
	--text-color2: #63656a;
	--bg-color: #86cbc8;
}


* {
	color: var(--text-color);
	outline: none;
}


body {
	margin: 20px;
}


input[type=text] {
	border: 1px solid var(--text-color);
	color: var(--text-color2);
	border-radius: 5px;
	padding: 2px 4px;
	&.error {
		background-color: #f3dddd;
		border: 1px solid red;
	}
}

label {
	color: #63656a;
	font-weight: bold;
}
		
		

.button, nav a {
	border: 1px solid #000;
	border-radius: 5px;
	display: flex;
	width: 200px;
	align-items: center;
	justify-content: center;
	height: 50px;
	text-decoration: none;
	background-color: var(--bg-color);
	color: #63656a;
	font-weight: bold;
	letter-spacing: 0.05em;
	border-color: #8dabb6;
	margin-top: 10px;
	transition: all 0.2s ease;
	&:first-child {
		/* margin-top: 50px; */
	}
	&:hover:not(disabled) {
		color: #63656a;
		background-color: #8cbdc1;
		-webkit-box-shadow: 5px 5px 13px -3px rgba(153,153,153,0.53); 
		box-shadow: 5px 5px 13px -3px rgba(153,153,153,0.53);
	}
	&:disabled {
		opacity: 0.7;
		cursor: not-allowed;
	}
}


.button-small a, .button-small-any {
	text-decoration: none;
	border: 1px solid #000;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background-color: var(--bg-color);
	color: #63656a;
	font-weight: bold;
	letter-spacing: 0.05em;
	border-color: #8dabb6;
	height: 10px;
	&:hover:not(disabled) {
		color: #63656a;
		background-color: #8cbdc1;
		-webkit-box-shadow: 5px 5px 13px -3px rgba(153,153,153,0.53); 
		box-shadow: 5px 5px 13px -3px rgba(153,153,153,0.53);
	}
	&:disabled {
		opacity: 0.7;
		cursor: not-allowed;
		-webkit-box-shadow: none !important; 
		box-shadow: none !important;
	}
}


header {
	.nickname {
		@media (max-width: 600px) {
			display: none;
		}
	}
}
		

.home {
	.menu-item-home {
		display: none;
	}
	#front-page-container {
		#front-page-logout {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			text-align: center;
			padding-bottom: 100px;
			#front-page-logo {
				margin-bottom: 50px;
			}
		}
		#front-page-logged {
		}
		nav {
			max-width: 500px;
			margin: 0 auto;
			a:not(:last-child) {
				margin-top: 10px;
			}
			ul {
				list-style: none;
				padding: 0;
				width: 100%;
				display: flex;
				gap: 30px;
				justify-content: space-around;
				align-items: center;
				@media (max-width: 480px) {
					flex-direction: column !important;
				}
				li {
				}
			}
			a {

			}
		}
	}
}

#header-logged {
	display: flex;
	justify-content: space-between;
	height: 40px;
	padding: 0px;
	margin-bottom: 50px;
	&>div {
		display: flex;
		align-items: center;
		.nickname {
			margin-right: 20px;
		}
	}
	&>a>img {
		height: 100%;
	}
}

#page-title {
	font-size: 30px;
	border-bottom: 1px solid var(--bg-color);
}