:root {
    --white: #ffffff;

    --gray_A: #202020;
    --gray_B: #404040;
    --gray_C: #606060;
    --gray_D: #808080;
    --gray_E: #A0A0A0;
    --gray_F: #C0C0C0;
    --gray_G: #E0E0E0;

	--black: #000000;

	--background1: #164A41;
	--background2: #4D774E;
	--navbar:  #303040;
	--text: #F0F3F5;
	--heading: #F1B24A;
	--subheading: #557A5;
	--link: #4a8af1;
	--link-hover: #4a8af1;
}

html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
}
a {
	text-decoration: none;
}

ul {
	list-style-type: none;
}

body {
	background: linear-gradient(90deg, var(--background1) 0%, var(--background2) 100%);
	font-family: Helvetica;
}

body#body.responsive {
	margin-top: 230px;
}

body#body:not(.responsive) {
	margin-top: 50px;
}

p {
	color: var(--text);
	padding: 10px;
}

li {
	margin: 10px 10px 10px 10px;
	color: var(--gray_F);
}

img.align-self {
	align-self: center;
	position: sticky;
	top: 0;
	align-self: flex-start;
}

.img {
	margin: 10px 10px 10px 10px;
}

nav {
	background: linear-gradient(90deg, var(--background1) 0%, var(--background2) 100%);
	position: fixed;
	top: 0;
	width: 100%;
	font-size: 20px;
	display: flex;
	justify-content: left;
	align-items: center;
}

nav:not(.responsive) {
    flex-direction: row;
}

nav.responsive {
    flex-direction: column;
}

nav.responsive a {
    width: 90%;
}

nav a {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
	color: var(--white);
	border-top: solid transparent 3px;
	transition: border-top 0.5s;
}

nav a:hover {
	border-top: solid var(--heading);
	color: var(--white);
}

nav a.active {
	border-top: solid var(--heading);
}

nav .icon {
	display: none;
}

h1 {
	color: var(--heading);
	margin-left: 10px;
	font-size: 50px;
	margin-right: 10px;
}

h2 {
	color: var(--heading);
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
}

h3 {
	color: var(--heading);
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
}

h4 {
	color: var(--white);
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
}

a {
	color: var(--link);
	transition: color 0.5s;
}

a:hover {
	color: var(--link-hover);
}

.flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.fixed-bg {
	min-height: 300px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

footer {
	background-color: #404040;
}