html{
    box-sizing: border-box;
}
body {
    padding: 0;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   background-color: rgb(255, 255, 255);
   color: black;
   font-size: var(font-size);
}
h1, h2, h3{
    margin: 0;
}
a {
    color: rgb(0, 191, 255);
}
a:hover{
    color: purple;
    text-decoration: none;
}
img{
    width: 100%;
}
#intro{
   padding: 4rem 1rem 10rem 1rem;
   max-width: 1200px;
   margin: 0 auto;
}
#intro p {
    font-size: 1rem;
    line-height: 1.5;
}
#intro.name{
    font-family: sans-serif;

}
.name span{
    font-family: monospace;
    font-size: 4rem;
    color: rgb(0, 225, 255);
    display: block;

}
#intro h2{
    font-size: 4rem;
    font-weight: normal;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
nav{
    font-family: monospace;
    font-size: 80%;
    padding: 1rem;
}
nav [class *="fa-"] {
    font-size: 150%;
    color: rgb(0, 140, 255);
    display: block;
}

/*background color divs*/

.bgcolor{
    background-color: rgb(255, 255, 255);
    color: black;
    
}

div.gradient{
    background: radial-gradient(circle, rgb(8, 34, 35) 0%, rgb(255, 255, 255) 100%);
  height: 2px;
}

div.background{
background-image: url("WHEN\ WE\ ALL\ FALL\ ASLEEP\,\ WHERE\ DO\ WE\ GO_.jpg");
background-size: cover;
background-repeat: no-repeat;
}



nav, h1, a{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}
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: rgb(0, 0, 0);
    text-decoration: none;
    display: block;
}
nav a:hover{
    color: rgb(165, 42, 132);
}
nav [class *="fa-"]:hover{
    color: rgb(174, 38, 183);
}

.button{
    background-color: rgb(0, 217, 255);
    color: rgb(0, 0, 0);
    padding: 0.5rem;
    border-radius: 5px;
    font-family: monospace;
    text-decoration: none;

}
.button:hover{
    color: rgb(0, 0, 0);
    background-color: rgb(255, 42, 244);
}
  .active, .dot:hover {
    background-color: #717171;
  }

  
 #projects {
    padding: 4rem 1rem;
    
 }
 #projects h2{
    font-size: 2.0rem;
    margin-bottom: calc(2.5rem * 1.5);
 }
 #projects h3{
    color: rgb(246, 255, 0);
    text-align: justify;
 }
 #projects h4{
    font-size: 1rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0; 
    padding-bottom: 10px;
    color: rgb(255, 255, 255);
    text-align: justify;
}
#projects h5{
    font-size: 1rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0; 
    padding-bottom: 10px;
    color: rgb(255, 255, 255);
    text-align: end;
}
.blackbox{
    background-color: #000000;
    color: rgb(255, 255, 255);
    padding: 1rem;
    border-radius: 10px;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 900px;

}

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

#projects ul li{
    color: rgb(221, 255, 0);
   
}
#images{
    display: flex;
    flex-flow: row;
    max-width: 100%;
    padding: auto;
    margin: auto;
    gap: 30px;
}
#images:hover{
    background-color: #eee;
}

#projects img{
    margin: auto;
    border-radius: 25px;
    padding: 1rem;
}
.projects-section{
    background-image: url("/Users/jiggy/Downloads/Webb 2 /WHEN WE ALL FALL ASLEEP, WHERE DO WE GO_.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

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


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


@media (min-width: 550px){
    article{
     display: block;
     max-width: 80%;
     margin: auto;
       gap: 1rem;
    }
    #project img{
        grid-column: 1/6;
        grid-row: 1/2;
        
    }
    .text{
       
        text-align: center;
    }
    #projects ul {
        justify-content: flex-end;
    }
  
}

@media (min-width: 850px) {
   nav{
    max-width: 1200px;
    margin: 0 auto;
}
nav li:first-child{
    flex-basis: auto;
    text-align: left;
    margin-right: auto;
} 
}