:root {
     --black: #343a40;
     --font-size: 1.3rem;
     --poppins: 'Poppins', sans-serif;
     --sintony: 'Sintony', sans-serif;
     --magenta: #e310cb;
     --hotmag: #BF047E;
     --dkblue: #0d314b;
 }

 html {
     box-sizing: border-box;
 }

 *,
 *::before,
 *::after {
     box-sizing: inherit;
 }

 body {
     margin: 0;
     padding: 0;
     font-family: var(--poppins);
     background-color: var(--black);
     color: whitesmoke;
     font-size: var(--font-size);
 }

 h1,
 h2,
 h3 {
     margin: 0;
 }

 a {
     color: var(--magenta);
 }

 a:hover {
     color: var(--hotmag);
     text-decoration: none;
 }

 img {
     width: 100%;
 }

 .gradient {
     background: linear-gradient(90deg, rgba(255, 23, 195, 1) 0%, rgba(134, 251, 251, 1) 100%, rgba(0, 0, 0, 1) 100%);
     height: 2px;
 }

 /* intro styles */

 #intro {
     padding: 1rem 1rem 3rem 1rem;
     max-width: 1200px;
     margin: 0 auto
 }

 #intro p {
     font-size: 1rem;
     line-height: 1.5;
 }

 .name span {
     font-family: var(--sintony);
     display: block;
     font-size: 3rem;
 }


 /* contact */
 .contact-bg {
     background-color: purple;
 }

 #contact {
     width: 400px;
     text-align: center;
     margin: 0 auto;
     padding: 3rem 0;
 }

 #contact p {
     font-size: 1rem;
 }

 #contact p:last-child {
     margin-top: 3rem;
 }


 /* projects */

 .projects-bg {
     background-color: var(--dkblue);
 }

 #projects {
     padding: 4rem 1rem;
     max-width: 1200px;
     margin: 0 auto
 }

 #projects h2 {
     font-size: 2.5rem;
     margin-bottom: calc(2.5rem * 1.5);
 }

 #projects h3 {
     color: aqua;
 }

 #projects h4 {
     font-size: 1rem;
     font-family: var(--poppins);
     margin: 0;
 }

 #projects ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-start;
     gap: 1rem;
     font-size: 1rem;
 }

 #projects img {
     margin: 2rem 0 4rem 0;
     border-left: 1px solid aqua;
     border-top: 1px solid aqua;
     border-radius: 25px;
     padding: 1rem
 }

 @media (min-width: 550px) {
     article {
         display: grid;
         grid-template-columns: repeat(10, 1fr);
         gap: 1rem;
     }

     #projects img {
         grid-column: 1/6;
         grid-row: 1/2;
     }

     .text {
        margin-top: 2rem;
        grid-column: 5/11;
        grid-row: 1/2;
         order: 2;
         text-align: right;
     }

     #projects ul {
         justify-content: flex-end;
     }
 }

 .blackbox {
     background-color: black;
     padding: 1rem;
     border-radius: 1rem;
     font-size: 1rem;
     line-height: 1.5;
 }

 /* nav */
 nav {
     font-family: var(--sintony);
     font-size: 80%;
     padding: 1rem;
 }

 nav [class*="fa-"] {
     font-size: 150%;
     color: aqua;
 }

 nav h1 [class*="fa"] {
     font-size: 100%;
     color: aqua
 }

 nav h1 a {
     font-family: var(--poppins);
 }

 nav ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     align-items: center;
     gap: 2rem;

 }

 nav li:first-child {
     flex-basis: 100%;
     text-align: center;
 }

 nav a {
     color: white;
     text-decoration: none;
     display: block;
 }

 nav a:hover,
 nav [class*="fa"]:hover {
     color: var(--magenta);
 }

 .button {
     padding: 0.5rem;
     border-radius: 5px;
     background-color: var(--magenta);
     color: white;
     font-family: var(--sintony);
     text-decoration: none;
 }

 .button:hover {
     color: white;
     background-color: var(--hotmag);
 }

 /*     */
 footer {
     text-align: center;
     padding: 2rem 0;
 }

 footer ul {
     display: flex;
     flex-flow: row wrap;
     font-size: 3rem;
     gap: 3rem;
     justify-content: center;
     padding: 0;
     margin: 2rem 0;
     list-style-type: none;
 }


 @media (min-width: 850px) {
     nav {
         max-width: 1200px;
         margin: 0 auto;
     }

     nav li:first-child {
         flex-basis: auto;
         text-align: left;
         margin-right: auto;
     }
 }