/*++ General CSS ++*/

* { margin: 0; padding: 0; position: relative; }

html, body { overflow: hidden; font-family: 'Signika', sans-serif; background: #000; letter-spacing: 1px; }
h1, h2, h3, .title { font-family: 'Merriweather', serif; letter-spacing: 0px; text-transform: uppercase; font-size: 46px; font-weight: bold; }
.subtitle { font-family: 'Merriweather', serif; letter-spacing: 0px; font-style: italic; font-size: 36px; }

.fullscreen, html, body, #root, #main-container, #canvas, .home, section, .slide, .projects .webgl-canvas, .background{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 100%;
  text-rendering: optimizeLegibility;
}

#root { width: 100%; height: 100%; overflow: hidden; }

.slide_title { text-align: center; }

.slide{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  color: #fff;
  vertical-align: baseline;
  z-index: 1;
}

.noCenter{ text-align: left; }

.noCenter .slide_title { margin-bottom: 30px; }

.slide_content { margin: auto; max-width: 1564px; width: 100%; }

.noCenter .slide_content { height: 60%; }

.page_content { display: flex; justify-content: space-between; height: 100%; }

.page_content iframe { width: 50%; height: auto; margin-right: 30px; }
.page_content p { width: 50%; }
.page_content .content { width: 50%;}

.page_content a{
  margin: 40px 0px;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
}

.page_content figure img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 300px; /* Adjust based on your desired size */
		margin: 0 auto;
}

.page_content figure {
    margin: 0;
    padding: 10px;
		display: flex;
}

.-hide { display: none !important; }

.overlay:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.lightOverlay:after{ background: rgba(0, 0, 0, 0.2); }

.background img { width: 100%; height: 100%; }

.link:before{
  content: "";
  position: absolute;
  border-bottom: #fff solid 2px;
  width: 0%;
  left: 0;
  bottom: 0;
  transition: 1s;
}
.link:hover:before { width: 100%; }

/*++ Borders ++*/

.border{
	position: fixed;
	background: #fff;
	z-index: 1001;
	transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
	-ms-transform: scale(1);
	transform: scale(1);
}

.border-top, .border-bottom { left: 0; width: 100%; height: 15px; }
.border-left, .border-right { top: 0; width: 15px; height: 100%; }

.border-top { top: 0; -ms-transform-origin: top; transform-origin: top; }
.border-right { right: 0; -ms-transform-origin: right; transform-origin: right; }
.border-bottom { bottom: 0; -ms-transform-origin: bottom; transform-origin: bottom; }
.border-left { left: 0; -ms-transform-origin: left; transform-origin: left; }

.page-enter-animation .border-top, .page-enter-animation .border-bottom { -ms-transform: scaleY(0); transform: scaleY(0); }
.page-enter-animation .border-left, .page-enter-animation .border-right { -ms-transform: scaleX(0); transform: scaleX(0); }

#main-container { width: calc( 100% - 15px * 2); height: calc( 100% - 15px * 2); z-index: 1; }

/*++ Preloader ++*/

.preloader{
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.preloader_logo{
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
	text-align: center;
  font-size: 48px;
  color: #fff;
}

.preloader_bg{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 1;
}

/*++ Header ++*/

header{
  position: absolute;
  top: 20px;
  right: 30px;
  left: 30px;
  height: 60px;
  overflow: hidden;
  z-index: 999;
}

.nav_item { float: right; margin: 0 10px; color: #fff; text-decoration: none; }

/*++ Logo ++*/

.logo figure { width: 200px; height: 100px; }
.logo figure img { width: 200px; }

#header_logo { float: left; }

/*++ Footer ++*/

footer{
  position: absolute;
  right: 30px;
  bottom: 30px;
  left: 30px;
  z-index: 2;
}

/*++ Home page ++*/

.homePage{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .6);
}

.homePage .content_link a{
  margin: 40px 20px;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
}

.homePage .title{
	display: flex;
	justify-content: center;
}

/*++ Project overview page ++*/

.dragSpace { padding: 150px 100px; position: fixed; z-index: 0 !important; }

.project{
  position: relative;
  border-radius: 10px;
  margin: 40px 25px;
  color: #fff;
  float: left;
}

.projects_Picture figure{
  height: 300px;
  width: 500px;
  position: relative;
  overflow: hidden;
}

.projects_Picture figure img{
  min-height: 101%;
	max-width: 100%;
}

.projects_title { font-size: 32px; margin-top: 20px; }

.projects_title {
  background: linear-gradient(to top, RGB(255, 0, 0), RGB(104, 0, 255));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-shadow: 0 0 8px rgba(0, 255, 255, 0.01), 0 0 16px rgba(0, 255, 255, 0.2), 0 0 24px rgba(0, 255, 255, 0.2);
}

.projects_subtitle{ font-size: 28px; padding-bottom: 15px; margin-bottom: 20px }
.projects_subtitle:before{
  content: "";
  position: absolute;
  border-bottom: #fff solid 2px;
  width: 50px;
  left: 0;
  bottom: 0;
}
.projects_details { max-width: 300px; }
.project_text { opacity: 0; transform: matrix(1, 0, 0, 1, 0, 300); }
.projects_paragraph_description { margin-bottom: 20px; }
.projects_paragraph_tags { color: #999; }

.ctn-lines{
  position: fixed;
  z-index: 1;
  bottom: 15vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line-indic{
  position: absolute;
  width: 25vw;
  height: 1px;
  background: #222;
}
.indic{ background: #fff; height: 3px; }

.projects_Picture:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.project {
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease-in-out;
}

.project:hover {
  transform: translateY(-10px);
}

.projects_Picture img {
  will-change: transform;
  transform: scale(1.2);
  transition: transform 0.5s ease;
}

/*++ general project page ++*/

.projectPage .slide_scroll-info { position: absolute; bottom: -150px; width: 100%; font-size: 12px; text-align: center; }
.projectPage .slide_scroll-info::before { content: ""; position: absolute; top: -100px; left: 50%; width: 1px; height: 50px; background: #fff; }

/*++ About page ++*/

.about_content { display: flex; }
.about_text { width: 50%; text-align: justify; font-size: 14px; }
.about_text strong { margin: 20px 0 10px; display: block; text-transform: uppercase; }
.about_img { width: 50%; }
.about_img img { height: 500px; }

.cv-download-btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: transparent;
  color: #bfe9ff;
  text-transform: uppercase;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #ff6e7f;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s ease;
  position: relative;
  z-index: 1;
}

.cv-download-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #ff6e7f, #bfe9ff);
  filter: blur(5px);
  z-index: -1;
  transition: opacity 0.3s ease;
  opacity: 0;
  border-radius: 5px;
}

.cv-download-btn:hover {
  color: #1e1e1e;
  background-color: #bfe9ff;
  border-color: #ff6e7f;
}

.cv-download-btn:hover:before {
  opacity: 1;
}


/*++ Contact page ++*/

.contact_text h2 { color: #e72970; font-size: 46px; }
.contact_text p { margin-top: 20px }
.contact_text a { color: #fff; text-decoration: none; transition: 300ms; }
.contact_text a:hover { color: #e72970; }

/*++ Social media icons ++*/
.fa{
  padding: 10px;
  font-size: 24px !important;
  width: 25px;
  margin: 5px 2px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  text-align: center;
}

.fa .outer{
  transition: stroke-dashoffset .3s;
  fill: transparent;
  stroke: #fff;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.fa .outer:hover { stroke-dashoffset: 0; }

/*++ backgrounds ++*/

.grey_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
              radial-gradient(circle at top right, rgba(0, 255, 255, 0.2), transparent),
              radial-gradient(circle at bottom left, rgba(255, 0, 255, 0.2), transparent);
  background-blend-mode: screen;
  animation: pulseGlow 10s infinite alternate;
  z-index: -1;
}

@keyframes pulseGlow {
  0% {
    background-position: 50% 50%, 100% 0%, 0% 100%;
    background-size: 100%;
  }
  50% {
    background-position: 50% 50%, 80% 10%, 20% 90%;
    background-size: 120%;
  }
  100% {
    background-position: 50% 50%, 100% 0%, 0% 100%;
    background-size: 100%;
  }
}

.blue_background { background: #22213b; }
.red_background { background: #5c1f2c; }

.pc
{
	display: block;
}

.phone
{
	display: none;
}

@media only screen and (max-width: 1600px) {

	.dragSpace
	{
		padding: 50px 30px;
	}

	.projects_Picture figure{
	  height: 200px;
	  width: 400px;
	  position: relative;
	  overflow: hidden;
	}

	.slide_content { margin: auto 60px; }

	.projects_title { font-size: 26px; margin-top: 20px; }
	.projects_subtitle{ font-size: 24px; padding-bottom: 15px; margin-bottom: 20px }

}
@media only screen and (max-width: 763px) {
  /* For tablets: */

	.pc
	{
		display: none;
	}

	.phone
	{
		display: block;
	}

	.projects_Picture figure
	{
		width: 60vh;
	}

	.homePage .surname{
		display: none;
	}

	.nav_item { float: right; margin: 5px 10px; color: #fff; text-decoration: none; }

	header{
		height: 100px;
	}

	.page_content {
		height: auto;
		flex-direction: column-reverse;
	}

	.about_content {
  	align-items: center;
		flex-direction: column-reverse;
		margin-top: 70px !important;
	}

	.about_content img {
		width: 150px;
	}

	.slide_content {
  	margin: auto 20px;
	}

	.about_text { width: auto; }
	.about_img { width: auto; }

	footer
	{
		display: none;
	}

	.projects_Picture figure{
		height: 200px;
		width: 80vw;
		position: relative;
		overflow: hidden;
	}

	.projects_title{
		font-size: 18px;
	}

	.projects_subtitle{
		font-size: 16px;
	}

	.dragSpace
	{
		padding: 80px 30px;
	}

	.project_text
	{
		opacity: 1;
		transform: matrix(1, 0, 0, 1, 0, 0);
		font-size: 12px;
	}

}