/* --- General elements --- */

	body {
    
    font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 12px;

    background-color: white;
    color: #333333;

    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;

}

	.page-content {
	    
    margin: 0px auto;
    padding: 70px;
    max-width: 600px;
    overflow: hidden;
    position: relative;
    transition: padding-top 2s ease-out; /* Add this line for the slide-down effect */

	}

	main {

		margin: 30px 0px;

	}

	section {

		margin-bottom: 30px;

	}

	h1, h2, h3, h4, h5, h6, p, a {

		margin: 0px;
		padding: 0px;

	}

	a {

		color: inherit;
		text-decoration: underline;

	}

	input:focus {

		outline: none;

	}

	.hidden {

		display: none;
		visibility: hidden;
		opacity: 0;

	}

/* --- 404 page --- */

	.not-found-content {
	    
	    margin: 60px auto 0px auto;
	    padding: 70px;
	    max-width: 600px;
	    overflow: hidden;
	    position: relative;
	    transition: padding-top 2s ease-out; /* Add this line for the slide-down effect */
	    text-align: center;
	}

	#not-found-subtitle {

		margin-top: 10px;

	}

	#not-found-gif {

	    margin-top: 50px;

	}


/* --- Hidden gradient --- */

	#hidden-gradient {

    display: none;
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    width: 100vw;
    height: 60px;
    font-size: 1.5em;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: top 2s ease-out;
    box-shadow: inset 0 -4px 6px -4px rgba(0, 0, 0, 0.2); /* Add this line for a dim inner shadow at the bottom */

    background: linear-gradient(270deg, #d4d4d4, #c3d2e1, #d3c5d4);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 8s ease infinite;
    -moz-animation: AnimationName 8s ease infinite;
    animation: AnimationName 8s ease infinite;

    z-index: 1;

	}

	#gradient-wrapper {

		width: 600px;
		text-align: center;
		margin: 0px auto;

	}

	#gradient-wrapper p {

		font-family: "Roboto Mono", ui-monospace, monospace;
		color: #696969;
		font-weight: 500;
		font-size: 11px;
		line-height: 56px;

	} 

/* --- Header --- */

	header {
		
		width: 100%;
		padding-bottom: 20px;

	}

	h1 {

		font-family: "Instrument Serif", ui-serif, serif;
		font-style: italic;
		font-weight: 400;
		font-size: 30px;
		line-height: 39px;

	}

	.typewriter {
  
	  border-right: 2px solid;
	  animation: typing 4s steps(40, end) both, blink-caret 0.75s step-end 2 both;
	  white-space: nowrap;
	  overflow: hidden;

	}

	#header-subtitle {

		margin-top: 10px;
		background: #EFEFEF;
		border-radius: 30px;
		margin-left: 60px;
		position: relative;
		overflow: hidden;
		white-space: nowrap;

	}

	#earth-emoji {

	  position: absolute;
	  width: 16px;
	  height: 16px;
	  top: 8.5px;
	  left: 15px;
	  background-size: contain;

	}

	#header-subtitle p {

		padding-left: 42px;
		font-weight: 500;
		font-size: 10px;
		line-height: 35px;
		text-transform: uppercase;
		color: #808080;

	}	

	#header-subtitle a {

		font-weight: 700;

	}

	#years, #months, #days {

		font-weight: 700;

	}

	#header-separator {

		padding: 0px 2px;

	}

	.blinking-cursor {

	  margin-left: 5px;
	  background-color: #808080;
	  animation: blink 1s step-end infinite alternate;

	}

/* --- Animations & effects --- */

	@keyframes typing {
	  0% {
	    width: 0;
	  }
	  5%, 15% {
	    width: 10%;
	  }
	  25% {
	    width: 249px;
	  }
	  100% {
	    width: 249px;
	  }
	}

	@keyframes blink-caret {
	  0%, 100% {
	    border-color: transparent;
	  }
	  50% {
	    border-color: #DADADA;
	  }
	}

	@-webkit-keyframes AnimationName {

	  0%{background-position:0% 50%}
	  50%{background-position:100% 50%}
	  100%{background-position:0% 50%}

	}

	@-moz-keyframes AnimationName {

	  0%{background-position:0% 50%}
	  50%{background-position:100% 50%}
	  100%{background-position:0% 50%}

	}

	@keyframes AnimationName { 

	  0%{background-position:0% 50%}
	  50%{background-position:100% 50%}
	  100%{background-position:0% 50%}

	}

	@keyframes blink {

	  0%, 100% {
	    opacity: 1;
	  }
	  50% {
	    opacity: 0;
	  }

	}

	@keyframes appear {

		0% {opacity: 0};
		100% {opacity: 1};

	}

	.appear-0 {

		animation: appear 0.5s ease-out 0.0s both;

	}

	.appear-1 {

		animation: appear 0.5s ease-out 0.1s both;

	}

	.appear-2 {

		animation: appear 0.5s ease-out 0.2s both;

	}

	.appear-3 {

		animation: appear 0.5s ease-out 0.3s both;

	}

	.appear-4 {

		animation: appear 0.5s ease-out 0.4s both;

	}

	.appear-5 {

		animation: appear 0.5s ease-out 0.5s both;

	}

	.appear-6 {

		animation: appear 0.5s ease-out 0.6s both;

	}

	.appear-slow {

		animation: appear 3s ease-out 0.5s both;

	}


/* --- Box default styling --- */

	.box {

    padding: 20px;
    border: 1px solid #DADADA; 
		overflow: hidden;
  	max-height: 1000px;
    transition: max-height 5s ease-out;

	}

	.box-header {

		margin-top: 0px;
		padding-bottom: 15px;
		border-bottom: 1px solid #ECECEC;
		margin-bottom: 20px;

	}

	.box-header p, .box-header h2 {

		display: inline-block;
		font-weight: 700;
		font-size: 12px;
		padding-right: 10px;

	}

	.box-content h3 {

		font-weight: 600;
		font-size: 12px;
		line-height: 20px;

	}

	.box-elements {

		padding-top: 10px;

	}

	.box-content p {
		
		font-weight: 400;
		line-height: 20px;
		padding-top: 5px;

	}

/* --- Box specific styling: Bio --- */

	#bio p:nth-child(4) {

		margin-top: 5px;

	}

	#separator {

		color: #808080;
		padding-right: 7.5px;
		font-weight: 400;

	}

/* --- Box specific styling: Experience --- */

	#experience h3 {

		font-weight: 400;
		color: #808080;
		font-style: normal;
		padding-bottom: 10px;

	}

	.experience-item-wrapper {

		position: relative;
		padding-bottom: 5px;

	}

	.experience-item-wrapper:hover {

		cursor: pointer;

	}

	.experience-item {

		padding-left: 40px;

	}

	.experience-item :is(a, span, p) {

		display: inline-block;

	}

	.experience-item:before {
	  
	  content: "";
	  display: block;
	  width: 30px;
	  height: 1px;
	  background-color: #ECECEC;
	  position: absolute;
	  top: 15px;
	  left: 0px;
	
	}

	.company {

		font-weight: 600;
		text-decoration: none;
		text-transform: uppercase;

		transition: color 0.15s ease-out;

	}

	#tesla:hover {

		color: #e82127;

	}

	#uber:hover {

		color: #09091a;

	}

	#spendesk:hover {

		color: #5D21D2;

	}

	#n26:hover {

		color: #48AC98;

	}

	#mapstr:hover {

		color: #FFC22C;

	}

	.duration {

		font-family: "Roboto Mono", ui-monospace, monospace;
		color: #808080;

	}

	.experience-item span {

		padding: 0px 5px;

	}

	.missions {

		padding: 15px 30px 15px 30px;
		border: 1px dashed #DADADA;
		list-style-type: circle;

	}

	.missions p {

		margin-bottom: 10px;
		font-weight: 600;

	}

	.missions li::marker {

		color: #808080;

	}

	.missions li {

		line-height: 20px;
		padding: 0px 0px 5px 10px;
		margin-left: 15px;

	}

/* --- Box specific styling: Contact --- */

	#contact-email {

		padding-bottom: 5px;

	}

	#contact-email p, #contact-email a {

		display: inline-block;

	}

	#contact-email p {

		margin-right: 10px;

	}

	#contact-email a {

		background: #F9F9F9;
		border: 1px solid #DADADA;
		border-radius: 50px;
		font-weight: 500;
		font-size: 10px;
		color: #808080;
		text-decoration: none;
		padding: 2.5px 7.5px;
		letter-spacing: 0.1px;
		word-spacing: -3px;
		font-family: "Roboto Mono", ui-monospace, monospace;

	}

	#instagram:hover {

		color: #D62976;

	}

	#twitter:hover {

		color: #00acee;

	}

	#linkedin:hover {

		color: #0e76a8;

	}

/* --- Inactive box --- */

	.inactive {

		max-height: 45px;
  	border: 1px dashed #DADADA !important;
  	transition: max-height 5s ease-out;

	}

	.inactive .box-header {

		border-bottom: none !important;
		padding-bottom: 0px !important;
		margin-bottom: 0px !important;
		
	}

	.inactive .box-header p, .inactive .box-header h2 {

		font-weight: 600 !important;
		color: #808080 !important;

	}

	.inactive .box-content {

		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;

	}

	.inactive:hover {

		border: 1px solid #DADADA !important;
		cursor: pointer !important;

		transition: border 2s ease-out !important;

	}

	.inactive:hover .box-header p, .inactive:hover .box-header h2 {

		font-weight: 700 !important;
		color: #333333 !important;

		transition: 0.5s ease-out;

	}

/* --- Hover effects --- */

	


/* --- Footer --- */

	footer {
		
		margin: 0px auto;
		padding-top: 30px;
		text-align: center;
		width: 100%;

	}

	#footer {

		background: #F9F9F9;
		border-radius: 10px;
		display: inline-block;
		padding: 5px 15px 5px 15px;
		position: relative;
		margin-bottom: 5px;

	}

	#footer p, #footer a {

		display: inline-block;

	}

	#footer p {

		font-family: "Roboto Mono", ui-monospace, monospace;
		font-style: normal;
		font-weight: 500;
		font-size: 10px;
		line-height: 20px;
		text-transform: uppercase;
		color: #A0A0A0;

	}

	#paint-emoji {

		padding-right: 10px;

	}

	#robot-emoji {

		padding-left: 10px;

	}

	#version {

		font-family: "Roboto Mono", ui-monospace, monospace;
		font-style: normal;
		font-weight: 400;
		font-size: 10px;
		line-height: 20px;
		color: #DADADA;

	}

/* --- Mobile version --- */

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

	#header-subtitle {

		overflow: scroll;

	}

	#final-text {

		padding-right: 20px;

	}

}

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

	#contact-email p {

		padding-bottom: 5px;

	}

}

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

	#header-subtitle {
		
		box-sizing: border-box;
		width: 100%;
		margin-left: 20px;
		padding-right: 100px;
		border-top-right-radius: 0px !important;
		border-bottom-right-radius: 0px !important;

	}

	.page-content {
	    
    	padding: 70px 20px;

	}

}

/* --- Dark Mode --- */

@media (prefers-color-scheme: dark) {

  body {

    background-color: #1a1a1a;
    color: #f1f1f1;

  }

  #hidden-gradient {

  	background: #2a2a2a;
  	animation: none;
  	box-shadow: inset 0 -4px 6px -4px rgba(0, 0, 0, 0.4);

  }

  a {

    color: #6891b3;
    text-decoration: underline;

  }

  header {

    color: #ffffff;
  
  }

  #header-subtitle {
  
    background: #303030;
  
  }

  #header-subtitle p {
  
    color: #b0b0b0;
  
  }

  .box {
  
    background-color: #2a2a2a;
    border-color: #3f3f3f;
  
  }

  .box-header {
  
    border-bottom-color: #3f3f3f;
  
  }

  .box-content p, .box-content h3 {
    
    color: #f1f1f1;
  
  }

  .experience-item:before {
  
    background-color: #3f3f3f;
  
  }

  .company {

  	color: #808080;

  }

  .missions {
  
    background-color: #303030;
    border-color: #3f3f3f;
  
  }

  #contact-email a {
  
    background-color: #303030;
    border-color: #3f3f3f;
    color: #b0b0b0;
  
  }

  footer {
  
    color: #f1f1f1;
  
  }

  #footer {
  
    background-color: #303030;
  
  }

  #footer p {
  
    color: #b0b0b0;
  
  }

  .inactive {
  
    border-color: #3f3f3f !important;
  
  }

  .inactive:hover {
  
    border-color: #3f3f3f !important;
  
  }

  .inactive .box-header p, .inactive .box-header h2 {
   
    color: #b0b0b0 !important;
  
  }

  .inactive:hover .box-header p, .inactive:hover .box-header h2 {
   
    color: #f1f1f1 !important;
  
  }

}