:root{
	--feher: #fff;
	--fekete: #000;
	--piros_2: #d95353;
	--piros_1: #991616;
	
	--zold_1: #9edccb;
	--zold_2: #47b496;

	--kek_1: #1b697d;
	--kek_2: #4d9eb2;
	--kek_3: #a6dbe8;

	--lila_1: #513f59;
	--lila_2: #a876be;
	--lila_3: #ddb7ee;

	--fogkrem_1: #197666;
	--fogkrem_2: #34bda5;
	--fogkrem_3: #8ff4e2;

	--sarga_1: #eab67e;

	--header_height: 40px;

	--bcg_sotet: #111111;
	--bcg_vilagos: #f8f8f8;
	--bcg_kozepes:  #848484;
	--text_sotet: #111111;
	--text_vilagos: #f8f8f8;

}

@font-face{
	src: url(fonts/Quicksand-Regular.ttf);
	font-family: Roboto-regular;
}

@font-face{
	src: url(fonts/Quicksand-Light.ttf);
	font-family: Roboto-light;
}

@font-face{
	src: url(fonts/Quicksand-Thin.ttf);
	font-family: Roboto-thin;
}

@font-face{
	src: url(fonts/Quicksand-Medium.ttf);
	font-family: Roboto-medium;
}

@font-face{
	src: url(fonts/Quicksand-Bold.ttf);
	font-family: Roboto-bold;
}

::-webkit-scrollbar {
  width: 14px;


}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--bcg_vilagos);
  border-left: 1px solid #eeeeee;
  border-radius: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--kek_1);
  border-radius: 14px;
  transition: 0.2s;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--kek_2);

}

*{
	padding: 0;
	margin: 0;
	font-family: Roboto-regular;
}

body{
	background-color: var(--bcg_vilagos);
}

p, a, h1, h2, h3, h4, h5{
	margin-block-start: 0;
  margin-block-end: 0;
  color: var(--text_sotet);
}

h1, h2, h3, h4, h5{
	font-weight: 100;
}

input, textarea{
	background-color: rgba(0, 0, 0, 0.0);
	border: 2px solid rgba(0, 0, 0, 0.0);
	border-bottom: 2px solid var(--bcg_sotet);
	font-family: Roboto-regular;
	color: var(--text_sotet);
	font-size: 16px;
}

input:hover{
	border-bottom: 2px solid var(--zold_2);
}

input:focus{
	border-bottom: 2px solid var(--zold_2);
	outline: none;
}

textarea{
	border: 2px solid var(--bcg_sotet);
	font-family: Roboto-regular;
	resize: none;
}

textarea:hover{
	border: 2px solid var(--zold_2);
}

textarea:focus{
	border: 2px solid var(--zold_2);
	outline: none;
}

.fixed-flex{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}

.halfer{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.thirds{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.center-align{
	text-align: center;
}

/* SPINNER */

.spinner{
	justify-content: center;
	align-items: center;
	display: none;
	overflow: hidden;
}

.spinner.active{
	display: flex;
}

.spinner svg{
	max-width: 100%;
}

.spinner svg *{
	fill: rgba(0, 0, 0, 0.0);
	stroke-width:  16;
	stroke: var(--bcg_sotet);
	stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transform: rotate(0deg);
}

.spinner.active svg{
	animation: spinnerAnim_outer 0.8s linear infinite;
}

.spinner.active svg *{
  animation: spinnerAnim_inner 1.6s linear infinite;
}

@keyframes spinnerAnim_inner{
	0%{
		stroke-dashoffset: 1000;
		stroke: var(--bcg_sotet);
	}
	50%{
		stroke: var(--fogkrem_2);
		stroke-dashoffset: 600;
	}
	51%{
		stroke-dashoffset: 600;
	}
	100%{
		stroke: var(--lila_2);
		stroke-dashoffset: 1000;
	}
} 

@keyframes spinnerAnim_outer{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
} 

#load-spinner{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--bcg_sotet);
	z-index: 10000;
}

#load-spinner svg{
	width: 60%;
}

/*modal*/

.modal-wrapper{
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.modal-wrapper.active{
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-container{
	min-width: 40vw;
	min-height: 60vh;
	background-color: var(--bcg_vilagos);
	overflow: hidden;

}

.modal-overlay{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
	background-color: rgba(100, 100, 100, 0.2);
	backdrop-filter: blur(10px);
	display: none;
}

.modal-overlay.active{
	display: block;
}


.modal-header{
	display: grid;
	grid-template-columns: 90% 10%;
}

.modal-close{
	background-color: var(--bcg_sotet);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.1s;
}

.modal-close p{
	color: var(--piros_1);
	font-size: 24px;
	font-family: Roboto-medium;
	margin-top: -2px;
	transition: 0.1s;
}

.modal-close:hover{
	cursor: pointer;
	background-color: var(--piros_1);
}

.modal-close:hover p{
	color: var(--text_vilagos);
}

/* HEADER */

#header-main{
	width: 100%;
	/*position: absolute;
	top: 0;
	z-index: 100;*/
	background-color: var(--bcg_sotet);
}

#header-focim{
	font-size: 20px;
	text-decoration: none;
}

#header-focim:hover{
	color: var(--kek_3);
}

#menu-hambi{
	width: 40px;
	height: 34px;
	display: flex;
	flex-flow: column;
	justify-content: space-evenly;
	align-items: center;
	position: relative;
}

#menu-hambi > div{
	height: 2px;
	width: 100%;
	background-color: var(--bcg_vilagos);
}

#menu-hambi:hover{
	cursor: pointer;
}

#menu-hambi:hover > div{
	background-color: var(--kek_2);
}

body.res-tall #menu-hambi{
	margin-left: 8px;
}

#header-main *{
	color: var(--text_vilagos);
}

#header-top{
	position: relative;
	/*display: flex;
	justify-content: space-between;
	align-items: center;*/
	height: 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-items: center;
	align-items: center;
	/*background: linear-gradient(to bottom, var(--bcg_vilagos), rgba(0, 0, 0, 0.0));*/
}

body.res-tall #header-top{
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

body.res-tall #header-main{
	flex-grow: 1;
	text-align: center;
}

#header-login-button{
	height: var(--header_height);
	display: flex;
	align-items: center;
}

#header-user-bar{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 12px;
}

body.res-tall #header-user-bar{
	margin-right: 12px;
}

#header-user-bar > a{
	text-decoration: none;
	display: block;
}

#header-user-bar > a:hover{
	color: var(--kek_2);
}

#header-user-bar svg{
	margin-top: 4px;
	margin-left: 8px;
}

.header-user-svg{
	width: 26px;
}

.header-user-svg *{
	fill: rgba(0, 0, 0, 0.0);
	stroke: var(--text_vilagos);
	stroke-width: 16;
}

.header-user-svg:hover *{
	stroke: var(--kek_2);
}

#logout-ico{
	height: 26px;
}

#logout-ico *{
	stroke: var(--text_vilagos);
	stroke-width: 16;
	fill: rgba(0, 0, 0, 0.0);
}

#logout-ico .fill{
	fill: var(--text_vilagos);
}

#logout-ico:hover {
	cursor: pointer;
}

#logout-ico:hover *{
	stroke: var(--piros_1);
}

#logout-ico:hover .fill{
	fill: var(--piros_1);
}


#main-menu{
	display: none;
	position: absolute;
	top: 37px;
	left: 0;
	padding: 4px 4px 4px 6px;
	box-sizing: border-box;
	background-color: var(--bcg_sotet);
	min-width: 200px;
	min-height: 100px;
	z-index: 1000;

}

#main-menu.active{
	display: block;
}

#main-menu a{
	display: block;
	text-decoration: none;
}

#main-menu a:hover{
	color: var(--kek_2);
}

body.res-tall #main-menu.active{
	width: 100vw;
	margin-left: -8px;
	height: calc(100vh - 80px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}

body.res-tall #main-menu a{
	font-size: 20px;
	margin: 12px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--text_vilagos);
	width: 80%;
	text-align: center;

}

/* GENERIC */

.button-basic{
	background-color: var(--lila_1);
	color: var(--bcg_vilagos);
	padding: 6px 12px 6px 12px;
	border-radius: 8px;
}

.button-basic:hover{
	cursor: pointer;
	background-color: var(--kek_2);
}

.align-center{
	text-align: center;
}

.align-right{
	text-align: right;
}


/* TIPUS SZINEK */
.szurke-bcg{
	background-color: var(--bcg_kozepes);
}

.szurke-border{
	border: 1px solid var(--bcg_kozepes);
}

.sotet-bcg{
	background-color: var(--bcg_sotet);
}

.sotet-border{
	border: 1px solid var(--bcg_sotet);
}

.kozlemeny-border{
	border: 1px solid var(--kozlemeny);
}

.kozlemeny-bcg{
	background-color: var(--kozlemeny);
}

.beszamolo-border{
	border: 1px solid var(--beszamolo);
}
.beszamolo-bcg{
	background-color: var(--beszamolo);
}

.kritika-border{
	border: 1px solid var(--kritika);
}
.kritika-bcg{
	background-color: var(--kritika);
}

.tanulmany-border{
	border: 1px solid var(--tanulmany);
}
.tanulmany-bcg{
	background-color: var(--tanulmany);
}

.ismeretterjeszto-border{
	border: 1px solid var(--ismeretterjeszto);
}
.ismeretterjeszto-bcg{
	background-color: var(--ismeretterjeszto);
}

.beszelgetes-border{
	border: 1px solid var(--beszelgetes);
}
.beszelgetes-bcg{
	background-color: var(--beszelgetes);
}

.alkotas-border{
	border: 1px solid var(--alkotas);
}
.alkotas-bcg{
	background-color: var(--alkotas);
}

.mas-border{
	border: 1px solid var(--mas);
}
.mas-bcg{
	background-color: var(--mas);
}

/* SZERZO DIV */

.szerzo-div{
	display: flex;
	align-items: center;
	text-decoration: none;
}

.szerzo-div img{
	width: 40px;
	height: 40px;
	border-radius: 40px;
	margin-right: 4px;
	object-fit: cover;
}

.szerzo-div p{
	font-size: 18px;
}

body.res-tall .szerzo-div p{
	font-size: 16px;
}

.szerzo-div:hover p{
	text-decoration: underline;
}


/* MISC */
.show-sajat{
	background-color: var(--bcg_sotet);
	text-align: center;
	color: var(--text_vilagos);
	padding: 4px 0;
}

main{
	min-height: calc(100vh - 220px);
}

/* FOOTER */

footer{
	background-color: var(--bcg_sotet);
	box-sizing: border-box;
	padding: 8px 0 4px 0;
	text-align: center;
	margin-top: 12px;
}

footer *{
	color: var(--text_vilagos);
}

footer a{
	text-decoration: none;
}

footer a:hover{
	color: var(--fogkrem_3);
}

footer > h3{
	margin-bottom: 8px;
}

footer > a{
	text-align: center;
	text-decoration: none;
}

footer > div{
	display: flex;
	justify-content: center;
	margin: 12px 20px 20px 20px;
	flex-wrap: wrap;
}

footer > div a{
	text-align: center;
	color: var(--fogkrem_2);
	margin: 0 8px;
}

footer > div a:first-child{
	text-align: left;
}
footer > div a:last-child{
	text-align: right;
}