html {
background-color: #1d1f21; /* black / very dark grey */
color: #c5c6c6; /* white-ish */
font-family: Arial, Helvetica, 'Noto Sans', sans-serif;
margin-left: auto;
margin-right: auto;
max-width: 900px;
word-wrap: break-word;
}

.navbar {
      padding: 15px;
      text-align: center;
}

.navbar ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: inline-block;
}

.navbar ul li {
      display: inline-block;
      margin-right: 10px;
}

.navbar ul li a {
	color: #c5c6c6;
      text-decoration: none;
      padding: 5px;
}

.navbar ul li a:hover, a:hover {
	    color: #cc6666;
 }

 a {
	 color: #8abeb7; /* aqua */
 }

 .container {
  display: flex;
  align-items: center; /* Align items vertically */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.profile {
      max-width: 240px;
      /*border-radius:50%;*/
      padding-right: 2%;
}

.mainimage {
	max-width: 900px;
}

.list {
      /* This class does not do anything. It exists just so different paragraphs in the container div are treated as one object. */
}

@media (max-width: 780px) {
	.mainimage {
		max-width: 700px;
	}
}

@media (max-width: 600px) {
  .container {
    align-items: flex-start; /* Align items to the top */
    flex-direction: column;
  }
  
  .profile {
	margin-right: auto; 
	margin-bottom: 10px; /* Add some spacing below the image */
	margin-left: auto;
	max-width: 300px;
	}
}