/* variables declared here - these are the colors for our pages, as well
as the font stacks and sizes. */

:root{
    --black: #171321;
    --dkblue: #0d314b;
    --plum: #4b0d49;
    --hotmag: #ff17e4;
    --magenta: #e310cb;
    --aqua: #86fbfb;
    --white: #f7f8fa;
    --font-size: 1.3rem;
    --mono: "Oxygen mono", monospace;
    --sans: Oxygen, sans-serif;
}

/* border box model: https://css-tricks.com/box-sizing*/

html{
    box-sizing: border-box;
}

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

body{
    padding: 0;
    margin: 0;

    font-family: var(--sans);
    background-color: var(--black);
    color: var(--white);
    font-size: var(--font-size);
}

h1, h2, h3{
    margin: 0;
}

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

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

/* intro styles */

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

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

#intro .name{
    font-family: var(--mono);
}

.name span{
    font-family: var(--sans);
    font-size: 4rem;
    color: var(--aqua);
    display: block;
}

#intro h2{
    font-size: 4rem;
    font-weight: normal;
}

/*NAVIGATOR BAR STYLES*/

nav{
    font-family: var(--mono);
    font-size: 80%;
    padding: 2rem;
}

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

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

nav a{
    color: var(--white);
    text-decoration: none;
    display: block;
}
/*name icon*/
.fa-solid.fa-code{
    color: var(--aqua);
}

nav li:first-child{
    flex-basis: 100%;
    text-align: left;
    padding-left: auto;    
}

nav li:first-child{
    color: var(--aqua);
}

nav li:first-child a:hover{
    color: var(--magenta);
}

/*resume button*/
nav .resume a{
    background-color: var(--magenta);
    color: var(--black);
    padding: 0.5rem;
    border-radius: 0.5rem;
}
nav .resume a:hover{
    color: var(--white);
}
nav .resume a:active{
    padding: 0.25rem;
    border: solid 0.25rem var(--plum);
    border-radius: 0.5rem;
    font-size: 1rem;
    background-color: var(--hotmag);
}

nav li:last-child{
    /*position: absolute;
    top: 0;
    right: 0;*/
    border: none;
    list-style: none;
    width: 2rem;
}

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

/*------------------------PROJECT and ABOUT page------------------------*/
#projects {
    /*padding: 4rem 1rem;*/
    padding-bottom: 10rem;
    padding: 4rem 1rem 10rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}
.section-blue{
    background-color: var(--dkblue);
}

.blackbox{
    padding: 1rem;
    border-radius: 0.5rem;
    color: var(--white);
    background-color: var(--black);
    font-size: 1rem;
    line-height: 1.5;
    border-left: 1px solid var(--aqua);
    border-bottom: 1px solid var(--aqua);
}


#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;
    padding: 1rem;
    border-left: 1px solid var(--aqua);
    border-top: 1px solid var(--aqua);
    border-radius: 25px;
}


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

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

#projects a{
    color: var(--magenta);
    text-decoration: none;
}

#projects a:hover{
    color: var(--hotmag);
}


@media (min-width: 800px) {
    article {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
    }
    #projects img {
      grid-column: 1/6;
      grid-row: 1/2;
    }
    .text {
      grid-column: 5/11;
      grid-row: 1/2;
      order: 2;
      text-align: right;
    }
    #projects ul {
      justify-content: flex-end;
    }
    #projects .reverse .text {
      grid-column: 1/7;
      order: 2;
      text-align: left;
    }
    #projects .reverse img{
      grid-column: 6/11;
      grid-row: 1/2;
    }
    #projects .reverse ul {
      justify-content: flex-start;
    }
}

/*--------------------CONTACT STYLES--------------------*/
#contact{
    background-color: var(--plum);
    margin: 0;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}
#contact h2{
    display: block;
    font-size: 2rem;
    margin: 0;
    padding: 0;
}
#contact p{
    width: 18rem;
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 0;
}

/*--------------------FOOTER STYLES--------------------*/
footer{
    padding: 3rem;
}

footer h2{
    display: flex;
    justify-content: center;
    flex-basis: 100%;
    padding: 0;
    margin: 2rem;
}

footer ul{
    display: flex;
    flex-basis: 100%;
    list-style: none;
    margin: 0;
    justify-content: center;
    font-size: 3rem;
    gap: 3rem;
}

.rights{
    display: flex;
    justify-content: center;
    flex-basis: 100%;
    padding: 0 0 1rem 0;
    margin: 0;
    font-size: 1rem;
}


/*--------------------BORDER GRADIENT--------------------*/
.border-gradient{
    height: 2px;
    background: rgb(255,23,228);
    background: linear-gradient(90deg, rgba(255,23,228,1) 35%, rgba(134,251,251,1) 70%);
}


/*--------------------GLOBAL STYLES--------------------*/
h1,
h2,
h3{
    margin: 0;
}

img{
    width: 100%;
    background-color: black;
}