* {/*margin: 0px;*/ padding: 0px; scroll-behavior: smooth;}

/*@media screen and (min-width: 773px) {
	body {align-items: center;}
	#menu a {font-size: 40px;}
	#menu {margin-bottom: 20px;}
}

@media screen and (max-width: 772px) {
	body {align-items: flex-start;}
	#logo {max-width: 275px;}
	#menu a {font-size: 45px;min-width: 320px; max-width: min-content;}
}*/


/****Desktop****/
@media screen and (min-width: 773px) {
	body {align-items: center;}

	#header{
	width:86vw;
	}

	#logo {
		max-width: 30vw;
	}

	.wrapper {
		flex-direction: row;
    flex-wrap: wrap;
    width: 86vw;
    justify-content: space-between;
  }

	.wrapper-item {
	width:40vw;
	}

	p {
		margin-left: 20%;
		margin-right: 18%;
	}
	ul {
		margin-left: 23%;
		margin-right: 18%;
	}

/*	#navigation {display: inline-flex;}*/
}

/****Mobile****/
@media screen and (max-width: 772px) {
	body {align-items: flex-start; margin: 0;}
	
	#header{
	width:100%;
	}

	#logo {
		max-width: 70vw;
	} 

	.wrapper {
		flex-direction: column;
		width: fit-content;
	}

	.wrapper-item {
		width:90vw;
	}

	p {
		margin-left: 5%;
		margin-right: 5%;
	}

	ul {margin-left: 8%;
		margin-right: 5%;
	}
/*
	.marquee::before {
  	width: 100%;
	}*/

}

body {
	background-image: url(bg.jpg);
	background-color: black;
	padding: 20px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	overflow-x: hidden;
	/*flex-basis: 60px;*/
}

/*****LOGO*****/

h1 {
	width: fit-content;
	height: fit-content;

	padding: 8px;
	margin-top: 15px;
	margin-bottom: 20px;

	background-color: white;
	color: black;
	transition: all 0.1s ease-out;
	transition-delay: 0.3s;

	font-family: source-sans-pro,sans-serif;
	font-weight: 900;
	font-size: 20px;

	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;

	border: solid white 5px;
}

h2 {
	width: fit-content;
	height: fit-content;

	padding: 8px;
	margin-top: 15px;
	margin-bottom: 20px;
  	margin-left: -5px;
  	display: inline-block;

	background-color: black;
	color: white;
	transition: all 0.1s ease-out;
	transition-delay: 0.3s;

	font-family: source-sans-pro,sans-serif;
	font-weight: 900;
	font-size: 20px;

	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;

	border: solid white 5px;
	border-left-width: 0px;

}

/******LOGO******/

a {text-decoration: none;}

.wrapper{
	display: flex;
}

.wrapper-item {
	display: flex;
  flex-direction: column;
  margin-bottom: 3%;
}

img {object-fit:cover; 
	aspect-ratio: 5/3; 
	width: 100%;
}

.project-text{
	display: flex;
  justify-content: flex-start;
  max-width: 100%;
}

#header{
display: flex;
    flex-direction: row;
    margin-bottom: 2vh;
    align-items: center;
    justify-content: space-between;
}

#logo {
	align-items: center;
  display: flex;
  justify-content: flex-start;
}

#logo a {
	text-decoration: none;
}

#logo h1:hover {background-color: black; color: white;}

#navigation {
	font-family: source-sans-pro, sans-serif;
	font-weight: 600;
	font-size: 15px;
}

#navigation a {
	color: white;
	margin-right: 10px;
}

#navigation a:hover {
	color: darkgrey;
}


/*PROJECT*/

.projects {
	width: fit-content;
	height: fit-content;

	padding: 8px;
	margin-top: 15px;
	margin-bottom: 20px;

	background-color: white;
	color: black;
	transition: all 0.1s ease-out;
	transition-delay: 0.3s;

	font-family: source-sans-pro,sans-serif;
	font-weight: 900;
	font-size: 20px;

	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

/*TITLE COLOR TRANSITIONS*/

#title-1:hover {
	background-color: #ec2b2e;
	/*transition-delay: 0s;*/
	/*margin-left: 20px;*/
}

#title-2:hover {
	background-color: #108aa8;
	transition-delay: 0s;}

#title-3:hover {
	background-color: #4040ac;
	transition-delay: 0s;}

#title-4:hover {
	background-color: lightgray;
	transition-delay: 0s;}

#title-5:hover {
	background-color: #ec2b2e;
	transition-delay: 0s;}

#title-6:hover {
	background-color: #199146;
	transition-delay: 0s;}

#title-7:hover {
	background-color: darkgray;
	transition-delay: 0s;}

#title-8:hover {
	background-color: darkgray;
	transition-delay: 0s;}

@keyframes menu-animation {
  0%   {margin-left: 0px;}
  100% {margin-left: 20px;}
}

/**MARQUEE ANIMATION**/

.marquee {
  overflow: hidden;
  display: block;
}

.marquee::before {
  display: block;
  white-space: pre;
  content: attr(data-text) "        ""        ";
  
  width: fit-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Only run animations when reduced motion is not set */
@media (prefers-reduced-motion: no-preference) {
  .marquee::before {
    animation: marquee 7s linear infinite;
  }
  
  .marquee--reverse::before {
    animation-direction: reverse;
  }
}

@keyframes marquee {
	0% {
    /**-2% is used to start scrolling with an offset - visual only**/
		transform: translate3d(100%, 0, 0);
	}
	100% {
		transform: translate3d(calc(-100%), 0, 0);
	}
}

.marquee {
  height: auto;

  margin: 0;
  display: flex;
  align-items: center;
  flex: 1;

  font-family: source-sans-pro, sans-serif;
	font-weight: 600;
	font-size: 15px;
  color: lightgray;
}

.screen-reader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}