/* ---------------------------------------------------VARIABLES */
:root {
	/* COLORS */
	--mainColor: #634193; /*MAIN PURPLE COLOR*/
	--accentColor: #e7313d; /*ACCENT RED COLOR*/
	--accentColor2: #dd0a28; /*ACCENT BLUE COLOR*/
	--accentColor3: #f09a3c; /*ACCENT ORANGE COLOR - CALL TO ACTION COLOR*/
	--bgColor: #e6e4ed; /*PURPLE-GRAY BACKGROUND COLOR*/
	--contentBgColor: white;
	--fontColor: black;
	--h1Color: white;

	/* NUMBERS */
	--wrapper: 75em;
	--asideMinWidth: 19em;
}

/* ---------------------------------------------------GENERAL */
* {
  color: black;
	color: var(--fontColor);
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	margin-top: 0;
	padding-top: 0;
}

h1,
h2,
h3,
h4,
button {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
}

h1 {
	background: #634193;
	background: var(--mainColor);
	color: white;
	color: var(--h1Color);
	padding: 0.4em 1em;
	font-size: 1.5em;
	margin: 0 -1em 1em -1em;
}

h2 {
	color: #634193;
	color: var(--mainColor);
	margin: 1em 0 0.5em 0;
	font-size: 1.2em;
}

p,
nav a {
	font-size: 0.9em;
}

a {
	color: #e7313d;
	color: var(--accentColor);
	text-decoration: none;
	transition: 0.5s all ease-in;
}

a:hover {
	color: #634193;
	color: var(--mainColor);
}

.CTA-Button {
	background: #f09a3c;
	background: var(--accentColor3);
	display: inline-block;
	color: white;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	padding: 0.5em;
	margin: 0.5em 0;
	text-decoration: none;
	text-align: center;
	border: none;
	transition: 0.3s all ease-in;
}

.CTA-Button:hover {
	color: white;
	transform: scale(1.1);
}

ul {
	padding: 0;
}

body {
	background: #e6e4ed;
	background: var(--bgColor);
	max-width: 75em;
	max-width: var(--wrapper);
	margin: 0 auto;
	/* padding: 0 1em; */
}

::selection {
	background: #e7313d;
	background: var(--accentColor);
	color: white;
}

/* ---------------------------------------------------HEADER */
header {
	position: fixed;
	display: flex;
	width: 100%;
	max-width: 75em;
	max-width: var(--wrapper);
	margin-right: 1em;
	z-index: 5;
}

header > a {
	padding-top: 0.5em;
	justify-self: center;
	box-sizing: border-box;
}

header > a img {
	width: 19em;
	width: var(--asideMinWidth);
	min-height: 7em; /*STYLING if height does not scale with width*/
	padding: 0 4em;
	box-sizing: border-box;
}

/* ---------------------------------------------------NAVIGATOIN-MENU */
nav {
	width: 100%;
}

nav ul {
	display: flex;
	align-items: center;
	justify-content: space-around;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 4em;

	background: white;
}

nav ul a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #e7313d;
	color: var(--accentColor);
	/* padding: 0 1em; */
}

nav ul img {
	display: block;
	min-height: 2em;
	width: 2em;
	padding: 0 2em;
	margin-bottom: 0.2em;
	align-self: flex-end;
}

/* ---------------------------------------------------MAIN */
main {
	padding-top: 3.5em;
	padding-left: 19em;
	padding: 4em 0 0 var(--asideMinWidth);
	float: right;
	box-sizing: border-box;
	width: 100%;
}

main > article:first-child p {
	font-size: 1em;
}

main > section,
main > article {
	background: white;
	background: var(--contentBgColor);
	padding: 0 1.5em 1em 1.5em;
}

main > section > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: stretch;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
	grid-gap: 1em;
}

main > section > ul li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 0.5em;
	text-decoration: none;
	background: #e7313d;
	background: var(--accentColor);
}

main > section > ul li h2,
main > section > ul li p {
	margin: 0;
	text-decoration: none;
	padding: 0.2rem 0.5rem;
	color: white;
}

/* STYLING IF GRID NOT SUPPORTED */
main > section > ul li {
	flex-basis: 13em;
	flex-grow: 1;
	max-width: 17em;
	margin: 0.2em;
}

main > section > ul a {
	text-decoration: none;
	transition: 0.3s ease-in-out;
}

main > section ul li img {
	width: 100%;
	border: 0.1em solid #e7313d;
	border: 0.1em solid var(--accentColor);
	box-sizing: border-box;
}

.onlineProfile img {
	/* border: 0.2em solid green; */
}

main > section > ul > a:hover {
	transform: scale(1.04);
	z-index: 2;
}

/* ---------------------------------------------------ASIDE */
aside {
	width: 19em;
	width: var(--asideMinWidth);
	padding: 0 2em;
	box-sizing: border-box;
	margin-top: 10em;
	position: fixed;
}

aside > div {
	border-top: 0.1em dotted #634193;
	border-top: 0.1em dotted var(--mainColor);
	padding: 1em;
	margin-top: 1em;
	box-sizing: border-box;
}

aside div a {
	display: flex;
	align-items: flex-end;
}

aside div a > .profileImage {
	object-fit: cover;
	border-radius: 100%;
	width: 4em;
	height: 4em;
	display: inline-block;
	margin-right: 0.5em;
}

aside > div:first-child .profileName {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	margin-bottom: 0;
	transition: 0.3s all ease-in-out;
}

aside > div:first-child .onlineStatus {
	color: green;
	margin-bottom: 0;
}

aside > div:first-child ul {
	margin: 0.6em 0;
	list-style: none;
	padding: 0;
}

aside > div:first-child li {
	margin: 1em 0;
}

aside > div:first-child li:last-child {
	margin-top: 1.5em;
}

aside > div:first-child li:last-child a {
	color: white;
}

aside a:hover .profileName {
	color: var(--mainColor);
	text-decoration: underline;
}

/* ---------------------------------------------------ASIDERESPONSIVELABEL */
.asideLabel {
	display: none;
	position: fixed;
	background: #f09a3c;
	background: var(--accentColor3);
	color: white;
	border: none;
	top: 90vh;
	left: 0;
	z-index: 99;
	font-size: 1.5em;
	padding: 0.3em;
	box-sizing: border-box;
	text-align: center;
	transition: 0.8s all cubic-bezier(0.91, -0.2, 0.04, 1.1);
}

#asideButton {
	display: none;
}

/* ---------------------------------------------------PROFILEPAGE */
/* profile-page */
.profileContent article {
	padding-bottom: 4em;
}

.profileContent article:first-child > img {
	/* padding: 0 1em; */
	width: 100%;
	box-sizing: border-box;
}

.profileContent ul.profileImagesList {
	display: flex;
	flex-wrap: wrap;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
	list-style: none;
	padding: 0;
	/* padding: 0.2em 1em; */
}

.profileContent .interests {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}

.profileContent .interests li {
	padding: 0.5em;
	text-align: center;
	border: 0.1em solid #634193;
	color: #634193;
	border: 0.1em solid var(--mainColor);
	color: #634193;
	color: var(--mainColor);
	margin: 0.3em;
	background: white;
}

.profileContent iframe {
	display: block;
	width: 100%;
	max-width: 40em;
	height: 12em;
	box-sizing: border-box;
	border: none;
}

/* ---------------------------------------------------EDIT PROFILE */
.profileForm {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 60%;
	min-width: 13em;
}

.profileForm input,
.profileForm textarea {
	display: block;
	width: 100%;
	margin-bottom: 1.5em;
	border: none;
	border-bottom: 0.1em solid #e6e4ed;
	border-bottom: 0.1em solid var(--bgColor);
	color: #634193;
	color: var(--mainColor);
	transition: 0.3s all ease-in;
}

.profileForm input:last-child {
	border: none;
	color: white;
	width: auto;
	display: inline-block;
	font-size: 1em;
}

.profileForm label {
	margin-bottom: 0.5em;
}

.profileForm input:focus,
.profileForm textarea:focus {
	border-bottom: 0.1em solid #634193;
	border-bottom: 0.1em solid var(--mainColor);
}

.profileForm input:invalid,
.profileForm textarea:invalid {
	color: #e7313d;
	color: var(--accentColor);
}

.profileForm p {
	display: block;
	width: 100%;
}

input[name='gender'] {
	width: 10%;
}

.genderLabel {
	width: 80%;
}

.slider {
	border-bottom: none;
  height: .1em;
  margin-top: .8em;
}

.slider:focus{
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;

}

.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
  margin-top: .2em;
  width: 1.3em;
  height: 1.3em;
  padding: 0;
  background: var(--accentColor);
  border-radius: 0;
  border: none;
}

#ageValue{
  display: none;
  color: var(--mainColor);
  margin-top: -.5em;
  font-size: .9em;
  margin-bottom: 2em;
}


.removeInterest {
	background: #e7313d;
	background: var(--accentColor);
	color: white;
	border: none;
}

.removeProfileList {
	display: flex;
	flex-wrap: wrap;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
	list-style: none;
	grid-gap: 1em;
}

.removeProfileList li {
	border: 1px dotted #634193;
	border: 1px dotted var(--mainColor);
}

.interestList {
	display: flex;
	flex-wrap: wrap;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	list-style: none;
	grid-gap: 1em;
	text-align: center;
}

.interestList li {
	padding: 0.5em;
	margin: 0.1em;
	border: 1px dotted #634193;
	border: 1px dotted var(--mainColor);
}

.interestList h2 {
	padding: 0;
	margin: 0;
}

/* ---------------------------------------------------FOOTER */
footer {
	background: #634193;
	background: var(--mainColor);
	width: 100%;
	text-align: center;
}

footer p {
	color: white;
	padding: 1em 0;
	margin: 0;
}

/* ---------------------------------------------------NOT FOUND PAGE (STATUS:404) */
#notFoundPage h2 {
	text-align: center;
}

#notFoundPage a {
	display: block;
	text-align: center;
	margin: 1em auto 0 auto;
	max-width: 15em;
}

#notFoundPage article {
	padding-bottom: 4em;
}

#notFoundPage p {
	text-align: center;
	padding: 1em 4em;
}

.notFoundImage {
	display: block;
	height: 50vh;
	margin: 0 auto;
}

/* ---------------------------------------------------RESPONSIVE */
@media only screen and (max-width: 800px) {
	/* ---------------------------------------------------ASIDE */
	aside {
		left: -19em;
		margin-top: 6.8em;
		background: #e6e4ed;
		background: var(--bgColor);
		transition: 0.8s all cubic-bezier(0.91, -0.2, 0.04, 1.1);
		z-index: 4;
		min-height: 100vh;
	}

	.asideLabel {
		display: block;
	}

	#asideButton:checked ~ aside {
		left: -1em;
	}

	#asideButton:checked + .asideLabel {
		-moz-transform: scale(-1, 1);
		-webkit-transform: scale(-1, 1);
		-o-transform: scale(-1, 1);
		-ms-transform: scale(-1, 1);
		transform: scale(-1, 1);
		background: #e7313d;
		background: var(--accentColor);
		left: 11em;
	}

	/* ---------------------------------------------------MAINCONTENT */
	main {
		padding: 8em 0 0 0;
	}

	/* ---------------------------------------------------HEADER */
	header {
		flex-direction: column;
		justify-content: center;
		background: white;
		background: var(--contentBgColor);
		border-bottom: 1px solid #e6e4ed;
		border-bottom: 1px solid var(--bgColor);
	}

	header > a img {
		display: block;
		min-height: 0;
		height: 3.5em;
		padding: 0.5em 1em;
		margin: 0 auto;
		border-bottom: 1px solid #e6e4ed;
		border-bottom: 1px solid var(--bgColor);
	}
}