/* Variables */

:root {
    --beige: #FFFBF2;
    --lightblue: #E9ECE2;
    --lightpink: #FCF5EB;
    --hotmust: #E6B022;
    --mustard: #DBB235;
    --petroleum: #073938;
    --white: #f7f8fa;
    --font-size: 1.3rem;
    --sans: "Raleway";
    --serif: "Playfair Display";
}

/* border box model */
html {
    box-sizing: border-box;
}

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

/* General pieces code */
body {
    padding: 0;
    margin: 0;
    font-family: var(--sans);
    background-color: var(--beige);
    color: var(--petroleum);
    font-size: var(--font-size);
    transition: 0.3s;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--serif);
}

a {
    color: var(--mustard);
    text-decoration: none;
    padding: 2px;
}

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

img {
    width: 100%;
}

.button {
    background-color: var(--petroleum);
    padding: 0.8rem;
    border-radius: 5px;
    color: var(--white);
    text-decoration: none;
}

.button:hover {
    background-color: var(--lightblue);
    color: var(--petroleum);
}

.button_dark {
    background-color: var(--petroleum);
    padding: 0.8rem;
    border-radius: 5px;
    color: var(--white);
    text-decoration: none;
}

.button_dark:hover {
    background-color: var(--mustard);
    color: var(--petroleum);
}

/* Background Colors */
.section-lightblue {
    background-color: var(--lightblue);

}

.gradient {
    background: var(--petroleum);
    height: 1px;
}

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

nav h1 a {
    font-family: var(--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 [class*="fa-"] {
    font-size: 150%;
    color: var(--mustard);
}

nav h1 [class*="fa-"] {
    font-size: 100%;
    margin-right: 1rem;
    color: var(--petroleum);
}

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

nav a {
    color: var(--petroleum);
    text-decoration: none;
    display: block;
}

nav a:hover {
    color: var(--mustard);
}

/* Header & Intro  */

#myimg {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.home_img {
    width: 300px;
}

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

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

.name span {
    font-family: var(--serif);
    font-size: 4rem;
    display: block;
    font-weight: 800;
}

#intro h1 {
    font-family: var(--serif);
}

#intro h2 {
    font-size: 2.5rem;
    font-weight: 100;
    font-family: var(--serif);
}



/* Project section */
#project,
#minor_project {
    padding: 4rem 1rem 2rem 1rem;
}

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

#project h3,
#minor_project h3 {
    color: var(--mustard);
}

#project h4,
#minor_project h4 {
    font-size: 1rem;
    margin: 0;
}

.lightblue-box {
    background-color: var(--lightblue);
    padding: 1rem;
    border-radius: 10px;
    font-size: 1rem;
    line-height: 1.5;
}

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

#project img {
    margin: 2rem 0 4rem 0;
    border-left: 1px var(--petroleum) solid;
    border-top: 1px var(--petroleum) solid;
    border-radius: 25px;
    padding: 1rem;
}

.project_min-img {
    margin: 2rem 0 1rem 0;
    width: 400px;
    border-left: 1px var(--petroleum) solid;
    border-top: 1px var(--petroleum) solid;
    border-radius: 25px;
    padding: 1rem;
}

#minor_project article {
    margin-top: 2rem;
}

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

#contact p {
    padding-bottom: 1rem;
}

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

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

/* Media Queries - Desktop version */

@media (min-width: 800px) {
    nav {
        max-width: 1200px;
        margin: 0 auto;
      }
    
      nav li:first-child {
        flex-basis: auto;
        text-align: left;
        margin-right: auto;
      }
    
    header {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "intro intro intro myimg";
        max-width: 1000px;
        margin: 0 auto;
    } 

    #myimg {
        grid-area: myimg;
        align-items: center;
    }

    #intro {
        grid-area: intro;
        align-items: center;
        justify-content: center;
    }

    article {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
    }
  
    #project {
      max-width: 1000px;
      margin: 0 auto;
    }
  
    #project a {
        grid-column: 1/6;
        grid-row: 1/2;
      }
  
    .text {
      grid-column: 5/11;
      grid-row: 1/2;
      order: 2;
      text-align: right;
    }
  
    #project ul {
      justify-content: flex-end;
    }
  
    #project .reverse .text {
      grid-column: 1/7;
      order: 2;
      text-align: left;
    }
  
    #project .reverse a {
      grid-column: 6/11;
      grid-row: 1/2;
    }
  
    #project .reverse ul {
      justify-content: flex-start;
    }

    #minor_project {
        max-width: 1000px;
        margin: 0 auto;
      }

    #minproj_articles {
        max-width: 800px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas:  
        "p1 p2"
        "p3 p4";
        gap: 2rem;
        align-items: center;
        justify-content: space-between;
    }

    #proj_one {
        grid-area: p1;
        display: inline-block;
    }

    #proj_two {
        grid-area: p2;
        display: inline-block;
    }

    #proj_three {
        grid-area: p3;
        display: inline-block;
    }

    #proj_four {
        grid-area: p4;
        display: inline-block;
    }
}