html, body {
	height: 100%;
	margin: 0;
}

body { 	/*body, styles for the whole page*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #EDE0D4; 
	color: #6D4C41;
	font-family: verdana;
	text-align: center;

	}
p::selection, em::selection, h1::selection, h2::selection {
	color: white;
	background-color: #3E2723;
	border-radius: 5px;
}

.mode-button {
	position: absolute;
	top: 20px;
	right: 20px;
	border-radius: 50%;
	box-shadow: 0 0 40px rgba(1, 1, 1, 0.5);
	background-color: rgb(1, 1, 1, 0.2);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	/*background-color: rgb(88, 81, 78);*/

	}
.mode-button:hover {
	transform: scale(1.1);
	box-shadow: 0 5px 100px rgb(1, 1, 1, 1);
	
}

.mode-button:active {
	transform: scale(1);
}


main {	/*this is for the content div, which contains all the content of the page except the footer*/
	flex: 1; /*makes the content div take up all available space, pushing the footer to the bottom*/
	}
.content {
	display: flex;
	flex-direction: column;
	gap: 5vh;
	}
h1, h2 {
	color: #3E2723;
	}
	
#heading { 
	font-size: 4em; /* makes the header 4x larger*/
	}
#name {
	margin-top: 1px;
	font-size: 2em;
}

#name-tag {
	display: flex;
	flex-direction: row;
}
.container img {
	width: 10vw;
	min-width: 200px;
	height: auto;
	border-radius: 10%; /*makes box edges round*/
	}
	
.container {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: center;
	
	}	

ul { 
	list-style-type: none; /* removes the ugly dots in unordered list*/
	}
		
.hobbies-container{
	display: flex; /* makes objects inside the class display horizontally*/
	flex-wrap: wrap;
	gap: 30px; 
	justify-content: center;
	margin-bottom: 50px;

	}
	
.box {
	display: flex;
	flex-direction: column;
	align-items: center; ;
	background-color: #DDB892;
	width:15vw;
	min-height: 350px;
	min-width: 350px;
	max-height: 400px;
	max-width: 400px;
	height: 15vw; /*makes the height adjust automatically with its width*/
	border-radius: 10%;
	font-size: clamp(14px, 1vw, 28px);
	padding: 10px;
	box-shadow: 0 10px 25px rgba(109, 76, 65, 0.25);
	transition: transform 0.5s ease, box-shadow 0.25 ease;

	}
.box:hover {
	transform: translateY(-2px);
	box-shadow: 0 15px 35px rgba(62, 39, 35, 0.35),
		0 0 18px rgba(176, 137, 104, 0.1);

}


.box img {
	width: 5vh;
	height: auto;

	}
.box p {
	margin-top: 50px;
	}

					

.footer-container {	/*styling for footer starts here*/
	background-color: #B08968;
	color: #EDE0D4;
	border-radius: 50px 0 0 0;
	box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.25);

	}
	
.footer-container p {
	padding-top: 2.5px;
	}
.footer-icons, .icon-label {
	display: flex;
	gap: 20px;
	justify-content: center
	}
.icon-label {
	margin-top: -15px; /*pulls the icon closer to the label*/
	}
.footer-note {		/*this one's for my very cool footer note :P*/
	font-size: 0.5em;	
	padding-bottom: 5px;
	}

a img {
	border-radius: 50%;
}
#social-icon:hover {
	transform: scale(1.2);
	transition: transform 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* adds a shadow effect on hover */
}

#social-icon:active {
	transform: scale(1);
	transition: transform 0.1s ease;
	}

.mode-button img {
	width: 5vh;
	height: auto;
}

@media (max-width: 600px) {

  #heading {
    font-size: 2.5em;
  }

  .container {
    flex-direction: column;
    padding: 0 20px;
  }

  .container img {
    width: 60vw;
    min-width: unset;
  }

  #name {
    font-size: 1.4em;
  }

  .box {
    width: 80vw;
    min-width: unset;
    max-width: unset;
    height: auto;
    max-height: unset;
    min-height: unset;
    font-size: clamp(13px, 3.5vw, 16px);
  }

  .box p {
    margin-top: 20px;
  }

  .hobbies-container {
    gap: 20px;
    padding: 0 16px;
  }

  .footer-container {
    border-radius: 24px 0 0 0;
  }

  .footer-icons, .icon-label {
    gap: 12px;
  }

  .mode-button {
    top: 12px;
    right: 12px;
  }

  .mode-button {
	top: 12px;
	right: 12px;
}

	.mode-button img {
	width: 6.5vh;
	}

	#social-icon img, .footer-icons img {
  width: 7.5vh;
  height: auto;
}

 .icon-label {
	font-size: 0.8em;
	margin-top: -1px;
  }
  .footer-container p {
	font-size: 10px;

  }
}