/*  ====================================================================================================
    "header" section
    ==================================================================================================== */

section.header {
	border-bottom: 2px solid;
	background-color: var(--blackDark);
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content {
	display: flex;
	justify-content: space-between;
}

/*  ====================================================================================================
    "left" part
    ==================================================================================================== */

section.header nav.content .left {
	display: flex;
	align-items: center;
}

/*  ====================================================================================================
    "logo" part
    ==================================================================================================== */

section.header nav.content .left .logo {
	height: 30px;
	margin-right: 20px;
}

/*  ====================================================================================================
    "links" part
    ==================================================================================================== */

section.header nav.content .left .links {
	height: 100%;
	display: flex;
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .left .links li p {
	height: 100%;
	padding: 15px;

	display: flex;
    align-items: center;
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .left .links li.clicked p,
section.header nav.content .left .links li p:hover {
	background-color: var(--blackLight);
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .left .links li:nth-child(1) a {
	color: var(--green);
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .left .links li:nth-child(2) a {
	color: var(--red);
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .left .links li:nth-child(3) a {
	color: var(--yellow);
}

/*  ====================================================================================================
    "right" part
    ==================================================================================================== */

section.header nav.content .right .links > li {
	display: none;
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .right .links.show-sign-up .sign-up,
section.header nav.content .right .links.show-after-login .after-login {
	display: block;
}

/*  ====================================================================================================
    "sign-up" part
    ==================================================================================================== */

section.header nav.content .right .links.show-sign-up .sign-up p {
	padding: 15px;
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .right .links.show-sign-up .sign-up a {
	color: var(--blue);
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .right .links.show-sign-up .sign-up a {
	color: var(--blue);
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .right .links.show-sign-up .sign-up.clicked p,
section.header nav.content .right .links.show-sign-up .sign-up p:hover {
	background-color: var(--blackLight);
}

/*  ====================================================================================================
    "after-login" part
    ==================================================================================================== */

section.header nav.content .right .links.show-after-login .after-login {
	display: flex;
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .right .links.show-after-login .after-login .welcome {
	padding: 15px 7px 15px 0;
}

section.header nav.content .right .links.show-after-login .after-login .welcome .hello {
	color: var(--green);
}

section.header nav.content .right .links.show-after-login .after-login .welcome .hello {
	color: var(--yellow);
}

section.header nav.content .right .links.show-after-login .after-login .welcome .username {
	color: var(--blue);
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .right .links.show-after-login .after-login .separator {
	padding: 15px 0;
}

/* ---------------------------------------------------------------------------------------------------- */

section.header nav.content .right .links.show-after-login .after-login .logout a {
	color: var(--red);
}

section.header nav.content .right .links.show-after-login .after-login .logout p {
	padding: 15px 7px;
}
 
section.header nav.content .right .links.show-after-login .after-login .logout p:hover {
	background-color: var(--blackLight);
}