* {/*margin: 0px;*/ padding: 0px; scroll-behavior: smooth;}

/*Desktop*/
@media screen and (min-width: 773px) {
	body {align-items: center;margin: 20px;}

	#header{
	width:41vw;
	}

	.wrapper {
		flex-flow: wrap;
		width:41vw;
	}

	#description {
		flex-flow:row;
		gap:2vw;
	}

	.section {
		flex:50%;
	}

	#footer {
		width:41vw;
		gap:1vw;
	}

	p {
		font-size:16px;
		line-height: 1.6;
	}
}

/*Mobile*/
@media screen and (max-width: 772px) {
	body {align-items: flex-start; margin: 0;}

	#header{
	width:100%;
	}

	#logo {
		max-width: 70vw;
	}

	.wrapper {
		flex-flow:column;
		width:90vw;
	}

	#description {
		flex-flow:column;
		gap:2vh;
	}

	#footer {
		width:90vw;
		gap:4vw;
	}

	p {
		font-size:24px;
		line-height: 1.7;
	}
}

body {
    background-color: white;
    padding: 20px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/*****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 black 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 black 5px;
	border-left-width: 0px;

}

/******LOGO******/


/******BODY******/
p {
    font-family: source-sans-pro,sans-serif;
    font-weight: 400;
    color: black;
    margin-top: 0;
}

ul {
    font-family: source-sans-pro,sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: black;
    line-height: 1.6;
    margin-top: 0;
}

figcaption { /*for npr*/
	font-family: source-sans-pro,sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: black;
    line-height: 1.5;
    opacity: 60%;
}
/******BODY******/


a {text-decoration: none;}

#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;
}

h1:hover {background-color: black; color: white;}

#navigation {
	font-family: source-sans-pro, sans-serif;
	font-weight: 600;
	font-size: 15px;
}

#navigation a {
	color: black;
	margin-right: 10px;
}

#navigation a:hover {
	color: darkgrey;
}

#footer {
	display:flex;
	justify-content: flex-start;
}

.wrapper{
	display: flex;
	justify-content: center;
}

/******PROJECT DESCRIPTION******/

#description img {
	width:100%;
}

#description {
	display: flex;
  align-items: flex-start;
}

/******PROJECT DESCRIPTION******/

/******BUTTONS******/
.center {
		display: flex;
    align-self: center;
    max-height: 12vh;
    justify-content: center;
}
/******BUTTONS******/