/* helps with sizing by making it so it doesnt overflow than
its intended sizing */
* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
	
  padding: 15px 30px;
  color: white;
}

.topnav-list {
  display: flex;
  justify-content:center;
  gap: 20px;
  list-style-type: none;
  margin: 0;
}

.topnav-list a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 4px;
}

.topnav-list a:hover {
	color: #f4c95d;
  text-decoration: underline;
  
}

#topnav-logo img {
  width: 100px;
  height: auto;
}

.stepnav a {
	text-align: center;
}

/* the code below is for styling the whole page. it sets the maximum width 

so the page does not become too wide, centers it, and adds space around the content */
body {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: Arial;
	color: #e5eeeb;
	background-color: #101819;
}

/* the code below is for styling the header and separating it from the main content */
header {
	border-bottom: 1px solid #39494a;
	padding-bottom: 20px;
}

/* this code is for styling the paragraph inside the header */
header p {
	text-align: center;
	color: #adbfbc;
}



/* the code below is for handling the navigation buttons. flex places the buttons in a row and gap adds space between them */
nav {
	/* this turns the navigation into a flex box so its buttons can be arranged nicely */
	display: flex;
	gap: 6px;
}

/* this code is for styling the main heading */
h1 {
	text-align: center;
	font-size: 30px;
	color: #b5e3d5;
}

/* the code below is for styling all elements with the class "tablink", which are the tab buttons */
.tablink {
	background-color: #162c2d;
	color: white;
	border: none;
	text-decoration: none;
	/* this changes the mouse cursor to a pointer to show that the buttons can be clicked */
	cursor: pointer;
	padding: 14px 12px;
	font-size: 16px;
	font-weight: bold;
	width: 25%;
	border-radius: 6px 6px 0 0;
}

/* this code changes the button color when the mouse is moved over a tab button */
.tablink:hover {
	background-color: #3b8a7b;
}

.tablink.current {
	background-color: #286b62;
}



/* the code below is for styling all elements with the class "tabcontent", which contain the information for each tab */
.tabcontent {
	color: #e5eeeb;
	
	padding: 42px 32px;
	text-align: center;
	background-color: #1d2a2b;
	border: 1px solid #39494a;
	border-top: 4px solid #286b62;
	border-radius: 0 0 6px 6px;
}

.intro-content > p {
	max-width: 720px;
	margin-right: auto;
	margin-left: auto;
}

.intro-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.intro-steps li {
	background-color: #162c2d;
	border: 1px solid #39494a;
	border-left: 3px solid #3b8a7b;
	border-radius: 4px;
}

.intro-steps a {
	display: block;
	height: 100%;
	padding: 18px;
	color: inherit;
	text-decoration: none;
}

.intro-steps a:hover,
.intro-steps a:focus-visible {
	color: #f4c95d;
	text-decoration: underline;
}

.intro-steps strong,
.intro-steps span {
	display: block;
}

.intro-steps strong {
	margin-bottom: 8px;
	color: #b5e3d5;
}

.note {
	text-align: left;
	padding: 10px 12px;
	background-color: #162c2d;
	border: 1px solid #39494a;
	border-left: 3px solid #3b8a7b;
	border-radius: 4px;

}

/* the code below makes space between the header and the main content */
main {
	padding-top: 24px;
}

.nextstep {
	margin-top: 24px;
	border-top: 1px solid #39494a;
	color: #e5eeeb;
	text-align: center;
	background-color: #1d2a2b;
	cursor: pointer;
}



.nextstep .nextstep-link {
	display: block;
	width: auto;
	padding: 24px;
	border-radius: 6px;
	font-size: 20px;
}

.nextstep:hover {
	background-color: #3b8a7b;
}

.nextstep:hover .nextstep-link {
	background-color: #3b8a7b;
}

.footer {
	margin-top: 24px;
	padding: 18px 16px 10px;
	border-top: 1px solid #39494a;
	color: #e5eeeb;
	text-align: center;
	background-color: #1d2a2b;
}

.footer p {
	margin: 8px 0;
}

.footer-title {
	font-weight: bold;
}

.footer-author {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.footernav {
	margin: 18px 0;
	display: flex;
	justify-content: center;
}

.footernav ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footernav a {
	color: #b5e3d5;
	text-decoration: none;
	
}

.footernav a:hover {
	text-decoration: underline;
	font-weight: bold;

}

.copyright {
	padding-top: 8px;
	border-top: 1px solid #39494a;
	font-size: 14px;
}


/* code blow make it so the bulletin points are close to the text not the far left */
ul {
    list-style-position: inside;
}

#hohomoji {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}


/*below is for smaller screens so phone or tables or ipad */
@media (max-width: 650px) {
	/* this allows the navigation buttons to move onto another row when there is not enough space */
	nav {
		flex-wrap: wrap;
	}

	/* this makes two buttons fit on each row on smaller screens */
	.tablink {
		width: 48%;
	}

	.intro-steps {
		grid-template-columns: 1fr;
	}
}