@charset "utf-8";

/* 3. html background color */
html {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(OIP.webp);
  background-color: hsl(288, 69%, 77%); /* light, easy-on-eyes */
}

/* 4. body */
body {
  font-family: Verdana, Geneva, sans-serif;
  color: rgb(143, 141, 141);
  background-color: rgb(74, 25, 70);
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

/* 5. header */
header {
  text-align: center;
  padding: 20px;
}
header img {
  width: 100%;
}

h1 {
  text-shadow: 4px 6px 5px gray;
}
/* 6. h2 size */
h2 {
  font-size: 1.3em;
  text-shadow: 4px 6px 5px gray;
}

/* 7. nav */
nav {
  background-color: rgb(74, 25, 70);
  padding: 15px;
  text-align: center;
  nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  nav li {
    display: block;
    width: 20%;
    float: left;
  }
}

img {
  float: right;
}
}

/* 8. links inside nav */
nav > a {
  display: block;
  padding: 0 10px;
  text-decoration: none;
  color: rgb(231, 148, 234);
  text-align: center;
}

/* 9. hover for nav links */
nav > a:hover {
  display: block;
  line-height: 2.8em;
  text-decoration: none;
  color: rgb(201, 13, 198);
  
}

/* 10. main padding */
main {
  padding: 20px;
  margin-top: 35px;
}

/* 11. img */
main > img {
  width: 25%;
  padding: 25px;
}

/* 12. footer styling */
body > footer {
  background-color: rgb(104, 106, 107);
  color: rgba(17, 16, 16, 0.6);
  font-weight: bold;
  font-size: 0.9em;
  line-height: 3em;
  text-align: center;
  margin-top: 10px;
  padding: 10px;
}

/* 13. custom list marker on education page */
.education-list {
  list-style-type: square; /* not default — change if you like */
}