body {
  background: rgb(0, 72, 80);
  color: rgb(0, 174, 176);
  padding: 10px;
  font-family: Arial, sans-serif;
}

#all-contents {
  max-width: 800px;
  margin: auto;
}

/* navigation menu */
nav {
  background: rgb(50, 50, 50);
  margin: 0 auto;
  display: flex;
  padding: 10px;
  border-radius: 100px;
}

h1 {
  display: flex;
  align-items: center;
  color: rgb(0, 174, 176);
  flex: 1;
  margin: 0;
}

#nav-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-li {
  display: inline-block;
  padding-top: 6px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(0, 72, 80);
  border-radius: 50px;
}

a {
  text-decoration: none;
  color: rgb(0, 174, 176);
}

#subscribe:hover {
  color: red;
}

.nav-li a:hover {
  color: green;
}

#name {
  text-align: center;
}

/* main container area beneath menu */
main {
  background: rgb(50, 50, 50);
  display: flex;
  margin-top: 20px;
  border-radius: 75px;
}

.sidebar {
  margin-right: 25px;
  padding: 10px;
}

.sidebar-img {
  width: 400px;
  max-height: 250px;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 50px;
}

.content {
  flex: 1;
  padding: 15px;
}

/* interests section styles */
.interests {
  border: 4px ridge silver;
  border-radius: 50px;
  padding: 8px;
  margin-top: 20px;
}

#interests {
  text-align: center;
}

h2,h3 {
  margin: 0px;
}

/* Portfolio styles */
.content h1 {
  color: rgb(0, 174, 176);
}

#portfolio {
  list-style-type: none;
  padding-left: 0;
}

#portfolio li {
  background: rgb(40, 40, 40);
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 100px;
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

#portfolio li:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAMFBMVEV0dHR/f3+Pj49oaGiQkJBzc3N7e3t5eXmHh4eBgYGJiYmEhISMjIxubm5qampwcHAcjBDaAAAGTUlEQVR4nO2d63KrMAyEoQ0Q51Le/21P2iY57ILXKIFe6O6vdgBbH3JmLGTLVX1T21SPqqlBafeS1y69gmq4eXfElh42qaq69NlGZUITmtCE30fYRISE9WKENZkReetjwroF1ceA9geQALwwnPuBzuRwbOhA/ZxRrVT3qarO6LCbrRc0UnnwnRA80ST5MPWE7n9LOeNhTOYJpaEPq0Con31bknC/FuH+CcKAD5MJTWhCE5rQhCY04TYJEyow845p3w/joT5FniVCAThF2J77QVxzrmoVmVQYqukwBpUwPkp0VUZpHag9HU4DHYjxZuqducMXdFYRb4WT/NdQtIxuSXi1VX65WDkYavwt4TS6+UNDQjD7XCkRobwX1VBQn/BnWSBEAmxpRPipvA9NaEITmtCEJjShCU34KwgDM2+meGLmLb/UMyGoRFgfIag5Hafvv4ryVG8oMuQEOlAgijd3geFQYTBFj3ZjQvT5fu6bfGdAj76i1ZfBNHzVHMbhvd3jeVrGX5HwbUQ4lCSM+VATjjKkJjShCU1oQhOa0IQmBD1OmBYjnFjX9td8SNq1+oVB8PiEmr0wIqb0+hnKzSZcLKopEC6VmL2v8jShCU1oQhOa0IQm/EuE9VcRLgQ4TSj2dlwIs4hx9mbirxuh9GFkld8E4QskUOiBOowRx7383WsfntBGFF27pYuymbCunq/QFrMOosfUYGypu5Vpux5b6q+5rbwhqxHSo0Qo84ey4YYJC8+Y0IQmNKEJTWhCE5rwJxGuMfOWE2Qi5Jl3gTDfbjWaeV+fyW3eCQCOCPW2IHqUyiTIjmS7HW6oullRZTdgPUEod2fREkK5jo81Y/PX/0WPV19WuRD5KUIVxer8oUacH+K//FhCrcBnDBOa0IQmNKEJTWhCExYJlYhwwZl3hvCQEe0K0gEREe5VXQQqokBL9XQ/kbJ46RpMZSt/0JvuRExLfKWChHBDdaa4VW4oa+RVtplqKpQIGWMpjQilZDZ22vRfRig1/SPeEuH2fbh9Qo9SE64kj9KAtu/D7RN6lGoxoZ57P0FYmLYHZt4jwrQXOlCKiMI6srrtZqttMTBLj+s4bTqsvhSiRCbVHCQnBsyK1A0viat/Xy0fEKpvAkxIV4lw5tB/11oVKO8y4Z3BhCY04Woy4Z3BhCY04WpahpDnpT+VUCk285ZMOPVecuaNr30089bppaoH6dwTRUi4DailpXoyn1TIeWHgRdUprk0MT7RS0SWpcFm4lKsX6hA8crBWN11/Y5FTyQrShLI4fqCXpjWhCU1oQhOa0IQm/BOEawF+FSHOS3dTPiykdlTr8kEMl0aEmMdAFVqG/1qMpcaEpCPWYJBjuBG1HE6nAz5KG7Co9vt+WPtB1Yj4KAxBHp98WTPP7NLVWxr5eSBCGKveIsb3YBgsQijtMKEJTWhCE5rQhCY0oQnLhLnAhXJCFFsRoUwJHfBRWqqH5532+0iuSaNdsf5nzfpITowIZ3V1lWbQhzBRu7Kl+86uuYTYdogQpTOxMULV0jcSql+WCU1oQhOa0IQmNKEJ/yrh/XjUkJnPEC4381ZZm5d0q+d9j2pK2bV8eFgVyygMVUvCkBXyancL9O4vJJIhfSJdXCCM1e/P39xMnGj1VacflHy4VEcmXE0mNOFsmXA1mdCEs2XC1fSthHJyra/O14Uws3H+Pdeye+ZMIpp510xIG3CoTESHVxvcJKSrZuD7aHM18D7UYcMBvo5MrEe7gmhn1xHsaijZRklAXTaBc3FKb9gwPcqL86CbzNa07HnACQkpYUqEtVRkTJ81oVImtDahCU1oQhOa0IQmNOFvI8RFU0wIQQ4ZIvcujWbeipBn3qgCIUViPPNOVA6b6iJg6eyeCiModcQ0v1xdVzh0ijqiegxXEOF4iE2onje/ehUQ0a1dJvr5DIFO2ZV4HwMLLYTsE9swEQErLVgZUvvlMPlbuoluluN9/BXDhD+QUPezBcLt+3D7hLqfLRBu34fbJ9T9bIFw+z7cIOFoXjqjn2UIZSqiwev6tFiYeY9yVLB1KY1+hzAPv/twZhhDbWHwdJZV5Y4U5MhXSUW5KfTQRk33M2tgjUWBqgx5uLhDRKG0Zaau/iKE8sfzBGHosOhc1XkT/iJCj1IT/nxCj9KtEv4DB5pbl3Z7thEAAAAASUVORK5CYII=);
  background-size: 100px;
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 174, 176, 0.3);
}

#portfolio li:hover a {
  color: black;
}

#portfolio a {
  text-decoration: none;
  color: rgb(0, 174, 176);
}

#my-stuff {
  margin-left: 20px;
}

/*secret button :)*/
#secret {
  position: absolute;
  left: 94%;
  top: 97%;
  background: rgb(40, 40, 40);
  padding: 3px;
  border-radius: 10px;
  border: 1px ridge black;
  font-size: x-small;
}