/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END CSS RESET */

:root{
    --beige: beige;
    --yellow: #fee15d;
    --blue: #0035cd;
    --red: #ff0000;
    --purple: #de00ff;
	--margin-laptop:125px;
	--margin-smartphone: 50px;
	--medium-margin: 25px;
	--small-margin: 10px;
}
@font-face {
    font-family: 'Gg-Regular'; 
    src: url('../fonts/Gg-Regular.woff2');
}
@font-face {
    font-family: 'BBBBaskervvol-Fondue'; 
    src: url('../fonts/BBBBaskervvol-Fondue.woff2');
}
body{
    font-size: 100%;
    background-image: 
    linear-gradient(to right, var(--yellow) 2px, transparent 1px),
    linear-gradient(to bottom, var(--yellow) 2px, transparent 1px);
    background-size: 70px 70px;
    background-position: 0px 0px;
    width: auto;
	overflow-x: hidden;
	background-attachment: fixed;
}
::-webkit-scrollbar {
  display: none;
}
a{
	text-decoration: none;
}

a:visited { 
	text-decoration: none; 
}
img{
	width: 100%;
	height: auto;
}


/* H */
h1, h2, h3{
	font-family: 'Gg-Regular';
}
h1{
	font-size: 4em;
	color: var(--yellow);
}
h2{
	font-size: 1.5em;
}
p{
	font-family: 'BBBBaskervvol-Fondue';
	font-size: 1.2em;
}
/* HEADER */
header{
	display: flex;
	margin-top: var(--margin-laptop);
	margin-left: var(--margin-laptop);
	margin-right: var(--margin-laptop);
	flex-direction: row;
  	align-items: center; 
}

.logo a, .contact a{
	display: flex;
	align-items: center;
}
.circle{
    width: 50px;
    height: 50px;
    background-color: var(--red);
    border-radius: 50%;
	margin-right: 20px;
}
.contact{
	align-content: center;
	margin-left: auto;
	right: var(--margin-laptop);
}
.contact-btn, #contact_content address h2, #contact_content .ig_link h2 {
	background-color: var(--blue);
	padding: 10px;
	border-radius: 50px;
	color: white;
	display: inline-block;
}
.contact-btn:hover, #contact_content address h2:hover, #contact_content .ig_link h2:hover {
  background-color: var(--yellow) !important;
  color: var(--red);
}

.presentation{
	top: 140px;
    margin-left: 80px;
  	margin-top: 25px;
    /* position: fixed; */
}

#presentation-icon{
	width: 85px;
	height: auto;
	margin-left: var(--medium-margin); 
	animation: tiltSideToSide 2s infinite ease-in-out;
  	transform-origin: center;
	transition: transform 0.3s ease;
}
#presentation-icon:hover {
  transform: scale(1.2) !important;
}

.pop_up {
  display: none;
  /* Optional: transition, positioning, etc. */
}
.pop_up img{
	border-radius: 50px;
	margin-bottom: 25px;
}
.pop_up.active_presentation, .pop_up.active_contact {
  display: block;
  /* Add animations or overlays here if desired */
}

/* Wrapper no longer uses flex — content will shift via margin */
.layout-wrapper {
  width: 100%;
  position: relative;
}

/* Sidebar is fixed and off-screen by default */
#presentation_content {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 33vw;
  background-color: var(--yellow);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  z-index: 1000;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  padding: var(--margin-laptop) 25px;
  overflow: auto;

}
#presentation_content p{
	margin-bottom: 20px;
	font-family: "Gg-Regular";
}
/* When active, slide into view */
#presentation_content.active_presentation {
  transform: translateX(0);
}

/* Push main content to the right when sidebar is open */
body.sidebar-open .container,body.sidebar-open .main-gif, body.sidebar-open .projects {
  margin-left: 40vw;
  transition: margin-left 0.5s ease;
  opacity: 0.1;
  pointer-events: none;
}

/* Base state */
.container {
  transition: margin-left 0.5s ease;

  transition: opacity 0.4s ease;
  opacity: 1;
}
.sidebar-bottom-spacer{
	height: 100px;
}
.spacer{
	height: 25px;
}

#presentation_off img {
  width: 25px;
  display: block;
  position: absolute;
  top: 25px;
  right: 25px;
}




@keyframes tiltSideToSide {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(10deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.main-gif{
	margin-left: 450px;
	margin-right: 450px;
	margin-top: 25px;
}

#contact_content {
  position: fixed;
  bottom: 50px;
  right: 125px;
  text-align: end;
  z-index: 1000;
}

.projects{
	margin: var(--margin-laptop);
}
.projects h1{
	color: black;
}

.project-items{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 3%;
}
.item {
	text-align: center;
	width: 20%;
	display: block;
	margin-bottom: var(--margin-smartphone);
	background-color: white;
	border: solid var(--yellow) 2px;
	padding: 10px;
	border-radius: 10px;
}
.item a{
	color: black;
}
.item:hover{
	transform: scale(1.05);
 	transform-origin: center;
	transition: ease-in 0.2s;
}
.item img {
 	width: 100%;
  	height: auto;
  	margin-bottom: 10px;
	margin-top: 10px;
}
.arrow, .arrowback {
	width: 35px;
  	margin-left: 50px;
	transition: transform 0.3s ease-in-out;
}
.arrowback img:hover{
	transform: scale(1.3)
}

.wave-wrapper {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  line-height: 2;
}

.wave-text {
  display: inline-block;
  white-space: nowrap;
  animation: moveHorizontal 15s linear infinite; /* slower horizontal movement */
}

.wave-text span {
  display: inline-block;
  animation: wave 2s ease-in-out infinite; /* slower wave movement */
}

@keyframes moveHorizontal {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Vertical wave */
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

span{
	font-family: "Gg-Regular";
	font-size: 1.5em;
}
footer {
  	font-size: 0.7em;
	text-align: end;
}
footer a{
	color: var(--blue);
}
button{
	font-family: 'Gg-Regular';
	background-color: var(--yellow);
	padding: 10px;
	border-radius: 50px;
	color: black;
	border: none;
	margin-bottom: 10px;

}
button a {
	color: black;
}
button:hover{
	background-color: var(--blue);
	color: var(--yellow);
}
button a:hover {
	color: var(--yellow);
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

.item:hover{
	background: var(--yellow);
	transition: opacity 0.3s ease;
}
.project-info{
	display: flex;
}
.project-text {
  width: 75%;
  margin-right: 20px;
}
.project-data {
  text-align: center;
  width: 25%;
}

.gallery {
	display: flex;
}

.scroll-container {
	overflow: auto;
	white-space: nowrap;
	overflow-y: hidden;
	align-items: center;
  	display: flex;
}
.scroll-container img {
	display: block;
	width: 400px;
  	padding-right: 10px;
}
@media (max-width: 1200px){
	.main-gif{
		margin-left: 200px;
		margin-right: 200px;
	}
	.project-items{
		gap: 5%;
	}
	.item {
		width: 25.5%;
	}
}


@media (max-width: 768px)  {
	body{
    	background-size: 47px 47px;
	}
	h1{
		font-size: 2.3em;
	}
	h2{
		font-size: 0.9em;
	}
	header{
		margin-top: var(--margin-smartphone);
		margin-bottom: 25px;
		margin-left: var(--margin-smartphone);
		margin-right: var(--margin-smartphone);
	}
	.circle{
		width: 30px;
    	height: 30px;
		margin-right: 15px;
	}
	.presentation{
		bottom: 40px;
		top: auto;
		margin-top: 10px;
		margin-left: 40px;
	}
	#presentation-icon {
		margin-left: 0;
		width: 55px;
    	height: 55px;
	}
	.contact{
		right: var(--margin-smartphone);
	}
	#presentation_content {
		width: 100vw;
		padding: 0;
	}
	#presentation_content .pop_up_content{
		padding: 25px;
		margin-top: 50px;
	}
	.main-gif{
		display: block;
		margin-left: 85px;
    	margin-right: 85px;
	}
	
	.projects{
		margin: var(--margin-smartphone);
		text-align: center;
	}
	.item{
		width: 100%;
		margin: 0px 50px;
		margin-bottom: 50px;
	}
	.arrow {
		width: 30px;
		margin-left: 25px;
	}
	span {
		font-size: 0.9em;
	}
	p{
		font-size: 1em;
	}
	.overlay-description{
		display: block;
		font-size: 0.9em;
	}
	footer{
		margin: var(--margin-smartphone);
	}
	#contact_content {
  		right: 50px;
	}
	.smartphone-description{
		display: block;
	}
	.project-info {
		display: block;
	}	
	.project-text {
		width: 100%;
		margin-right: 0;
		margin-bottom: 25px;
	}
	.project-data {
		text-align: center;
		width: 100;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.scroll-container img {

  		width: 200px;
	}
}