body {
   margin: 0;
   padding: 0;
   font-family: 'JetBrains Mono', monospace;
   background: #000;
   color: #fff;
 }


 /* after edits */

 nav {
   margin: auto;
   padding: 1rem 1.5rem;
 }

 i {
   color: #20C20E
 }





 .container {
   max-width: 900px;
   margin: auto;
   padding: 3rem 1.5rem;
 }

 h1,
 h2,
 h3 {
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 0.5rem;
 }

 h1 {
   font-size: 2.8rem;
   border-bottom: 2px solid #fff;
   padding-bottom: 0.5rem;
   margin-bottom: 2rem;
   color: #53e842;
   opacity: 0.8;
 }


 .section {
   margin-bottom: 3rem;
 }

 .mono-box {
   border: 1px solid #fff;
   padding: 1rem;
   margin-bottom: 1.5rem;
 }

 a {
   color: #fff;
   text-decoration: none;
   border-bottom: 1px solid #fff;
 }

 a:hover {
   opacity: 0.7;
   color: #20C20E
 }

 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1rem;
 }

 .small {
   font-size: 0.9rem;
   opacity: 0.8;
 }

 /* buttons */

 #projectbutton {

   padding: 12px 12px 12px 12px;
   border: 1px solid #20C20E;
   background-color: black;
   color: white;
   font-family: 'JetBrains Mono', monospace;
 }



 #projectbutton:hover {
   box-shadow: 3px 3px #20C20E;

 }