/* C VARIABLES {{{ */
:root { 
	/* colors */
	--black-img: invert(100%) contrast(200%) brightness(0%);
	--white-img: invert(100%) contrast(0%) brightness(500%);

	--color-1-a: mediumblue;
	--color-1-b: darkblue;
	--color-1-c: dodgerblue;

	--color-2-a: gainsboro;
	--color-2-b: darkslategrey;
	--color-2-c: grey;

	/* spaces */
	--inside-space: 24px;

	/* other */
	--primary-radius: 5px;

	/*new vars*/
	--purple-1: #552EFF;
	--purple-2: #f0eafb;
	--purple-3: #A0A0E0;
	--green-1: #AAD100;
	--grey-1: #E4E4E4;
	--black-1: #575756;
	--semicircle: 500px;
	--circle: 50%;
	--soft: 20px;
	--main-font: 'worksans';
	--small: 16px;
}
/* VARIABLES }}} */

/* C FONTS {{{ */
@font-face {
  font-family: 'worksans';
  src: url('/fonts/worksans/regular.woff2') format('woff2');
	font-weight: normal;
  font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'worksans';
  src: url('/fonts/worksans/medium.woff2') format('woff2');
	font-weight: 500;
  font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'worksans';
  src: url('/fonts/worksans/semibold.woff2') format('woff2');
	font-weight: 600;
  font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'worksans';
  src: url('/fonts/worksans/bold.woff2') format('woff2');
	font-weight: bold;
  font-style: normal;
	font-display: swap;
}
/* FONTS }}} */

/* C MAIN {{{ */
* { box-sizing: border-box; }

a { text-decoration: none; }

body {
	font-family: var(--main-font), sans-serif;
	font-weight: normal;
	color: var(--black-1);
	font-size: var(--small);
	margin: 0;
}

button {
	font-family: var(--main-font);
	font-weight: 500;
	font-size: 16px;
}

h1, h2 {
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	color: var(--purple-1);
}

h3 {
	text-align: left;
	font-size: 22px;
	font-weight: 600;
}

header {
	margin-top: 2px;
}

.icon {	
	height: 1.1em;
	width: 1em;
	margin-right: 4px;
	fill: darkslategrey;
}

.long {
	display: inline;
}

.short {
	display: none;
}

.pc {
	display: flex;
}

.mobile {
	display: none;
}

.white {
	filter: var(--white-img);
}

.flex {
	display: flex;
} 

.row {
	flex-direction: row;
}

.col {
	flex-direction: column;
}

.rowcol {
	flex-direction: row;
}

.inside {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

#logo-h2 {
	width: 300px;
}

#logo-v2 {
	width: 100px;
}

@media screen and (max-width: 960px) {
	.long {
		display: none;
	}

	.short {
		display: inline;
	}
}

@media screen and (max-width: 595px) {
	header {
		margin: 0;
	}

	.pc {
		display: none !important;
	}

	.mobile {
		display: flex !important;
	}

	.rowcol {
		flex-direction: column;
	}
}
/* MAIN }}} */

/* C INFOBAR {{{ */
#info-bar-back {
	background-color: var(--purple-1);
}

#info-bar {
	display: flex;
	justify-content: space-around;
	padding: 6px;
}

#info-bar > a {
	display: flex;
	color: white;
	white-space: nowrap;
	margin-top: auto;
	margin-bottom: auto;
}

#info-bar > a > icon > svg {
	height: 1.1em;
	width: 1.1em;
	fill: var(--green-1);
}

#social > a > icon > svg {
	height: 1.2em;
	width: 1.2em;
}

#social {
	display: flex;
	margin-top: 3px;
	gap: 5px;
}

#info-bar > #social > a > icon > svg {
	fill: white;
}

@media screen and (max-width: 595px) {
	#info-bar {
		display: none;
	}
}
/* INFOBAR }}} */

/* C MAINBAR {{{ */
#main-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 8px;
	margin: 0px var(--inside-space);
}

#main-bar > div {
	display: flex;
	gap: 5px;
}

#logo-h {
	width: 160px;
}

#logo-v {
	margin-bottom: 16px;
	width: 112px;
}

#search {
	display: inline-flex;
	margin-top: auto;
	margin-bottom: auto;
}

#search > input {
	background-color: var(--grey-1);
	padding: 0px 14px;
	vertical-align: middle;
	border: none;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
}

#search > button {
	background-color: var(--grey-1);
	border: none;
	padding: 4px 12px;
	right: 0px;
	vertical-align: middle;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
}

#search > button > icon > svg {
	font-size: 26px;
	fill: var(--black-1);
}

@media screen and (max-width: 695px) {
	#search > input {
		width: 140px;
	}
}

@media screen and (max-width: 595px) {
	#main-bar {
		background-color: var(--purple-1);
		flex-direction: column;
		margin: 0px;
	}

	#main-bar > a {
		margin-left: auto;
		margin-right: auto;
	}	

	#search {
		width: 100%;
	}
	
	#search > button {
		/*background-color: var(--color-1-b);*/
		margin-right: 15px;
	}

	#search > input {
		width: 100%;
		margin-left: 16px;
	}
}
/* MAINBAR }}} */

/* C USER {{{ */
#user {
	margin-top: auto;
	margin-bottom: auto;
	display: flex;
	gap: 4px;
}

.login {
	padding: 9px;
	white-space: nowrap;
	border-radius: 100px;
	color: white;
	background-color: var(--purple-1);
	white-space: pre;
	border: 2px solid var(--purple-1);
	max-height: 40px;
	font-weight: 500;
}

.login > icon {
	width: 100%;
	height: 100%;
}

.login > icon > svg {
	fill: white;
	margin-right: 0px;
	margin-top: 1px;
}

#login, #signup {
	display: flex;
}

#mycart {
	display: flex;
}

#register {
	display: none;
	position: relative;
	min-width: 118px;
}

#list {
	display: none;
	flex-direction: column;
	width: calc(100% + 4px);
	top: calc(100% - 2px);
	gap: 5px;
	left: -2px;
	z-index: 5;
	position: absolute;
	white-space: nowrap;
	padding: 5px;
	background-color: white;
	border-left: 2px solid var(--color-1-a);
	border-right: 2px solid var(--color-1-a);
	border-bottom: 2px solid var(--color-1-a);
	border-bottom-left-radius: var(--primary-radius);
	border-bottom-right-radius: var(--primary-radius);
}

#list > div, #list > a {
	border-left: 1px solid var(--color-2-a);
	display: flex;
	color: var(--purple-1);
}

@media screen and (max-width: 960px) {
	#signup {
		display: none;
	}
}

@media screen and (max-width: 595px) {
	.login {
		position: absolute !important;
		border: none;
		top: 30px;
		right: 15px;
		gap: 3px;
		padding-right: 10px;
		background-color: transparent !important;
	}

	.login > span {
		width: 45px;
		color: white !important;
		white-space: wrap;
		margin: -4px 5px 0px 5px;
	}

	.login > icon {
		width: 28px;
	}

	.login > icon > svg {
		width: 28px;
		height: 28px;
		margin-top: 1px;
		fill: white !important;
	}

	#list {
		display: none !important;
	}
}
/* USER }}} */