body {
    background: black;
    color: white;
    font-family: monospace;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 auto;      
    max-width: 100%;       
    padding: 1em 0 1.5em;
}

header {
	padding: 5px;
	text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    color: orange;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
	text-shadow: 2px 1px green; 
}

a {
    color: lightblue;
}

a:hover {
    background: darkgray;
    color: black;
    text-shadow: 1px 1px green;
}

.my_pic {
  border-radius: 4px;
  width: 300px;
}

.my_image {
  border-radius: 4px;
  width: 300px;
}

.avet_pic {
    border-radius: 4px;
    width: 40%;
}

.smiley {
    border-radius: 4px;
    width: 40%;
}

.zelda_conky_pic {
    width: 75%;
    border: 2px solid green;
}

.linux_command {
    margin: 7px;
    border: 2px solid grey;
    background-color: #CCCCCC;
    color: black;
}

.display_code {
    color: #CCCCCC;
    text-align: left;
}

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

.align_left {
    text-align: left;
    padding: 15px;
}

.navbar {
  width: 100%;
  background-color: green;
  overflow: auto;
  border-style: dotted;
  border-color: orange;
}

.navbar a {
  float: left;
  color: yellow;
  margin: 3px;
  text-decoration: none;
  font-size: 18px;
  width: 12%; 
  text-align: center; 
}

.navbar a:hover {
  background: black;
  text-shadow: 1px 1px green;
}

.navbar a.active {
  background-color: green;

}

.feedback p {
    color: green;
    font-size: 18px;
    font-family: monospace;
    text-shadow: 1px 1px yellow;
    margin: 10px 0;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; 
  }
}

.main-content {
    max-width: 80%;         
    margin: 0 auto;      
    padding: 2em 1em;  
}