body {
    --bg-dark: hsl(15 100% 2%);
    --bg: hsl(30 100% 3%);
    --bg-light: hsl(42 100% 4%);
    --text: hsl(48 100% 83%);
    --text-muted: hsl(48 45% 58%);
    --highlight: hsl(49 100% 13%);
    --border: hsl(46 100% 10%);
    --border-muted: hsl(41 100% 7%);
    --primary: hsl(52 100% 32%);
    --secondary: hsl(233 100% 85%);
    --danger: hsl(7 89% 66%);
    --warning: hsl(54 100% 25%);
    --success: hsl(162 100% 29%);
    --info: hsl(217 100% 69%);
    background-color: var(--bg);
}
main {
    color: var(--text);
}
header h2 {
    color: var(--text-muted)
}
.project-card {
    background-color: var(--primary);
}
footer {
    background-color: var(--secondary);
    color: var(--bg-dark);
}
@media (min-width: 1200px) {
    header {
        display: flex;
        justify-content: center;
    }
    #profile-picture {
        height: 500px;
        border-radius: 20px;
    }
    #header-text {
        padding: 5rem;
    }
    section {
        display: grid;
        grid-template-columns: repeat(3, 400px)
    }
    .project-card {
        margin: 2rem 2rem 2rem 4rem;
        border-radius: 1.5rem;
        padding: 0.5rem;
        border: solid 7px var(--border);
    }
    .project-photo {
        height: 20rem;
        border-radius: 2rem;
    }
    footer {
        padding: 2rem 4rem 4rem 4rem;
    }
    #github-contact {
        text-align: center;
        display: flex;
        line-height: 4rem;
    }
    #github-icon {
        height: 6rem;
        padding-right: 3rem;

    }
}

@media (min-width: 200px) and (max-width: 767px) {
   #profile-picture {
       height: 200px;
       align-items: center;
       border-radius: 2rem;
   }
    section {
        display: grid;
        grid-template-columns: repeat(1, 350px);
    }
    .project-card {
        margin: 1rem 1rem 1rem 1rem;
        border-radius: 2rem;
        padding: 0.2rem;
        border: solid 4px var(--border);
    }
    .project-photo {
        height: 200px;
        border-radius: 2rem;
    }
    footer {
        padding: 1rem;
    }
    #github-contact {
        display: flex;
        gap: 1rem;
    }
    #github-icon {
        height: 2rem;
    }
}

@media (min-width: 770px) and  (max-width:1099px) {
    header {
        display:flex;
    }
    #profile-picture {
        height: 500px;
        border-radius: 3rem;
    }
    #header-text {
        padding-left: 2rem;
    }
    section {
        padding-top: 2rem;
        display: grid;
        grid-template-columns: repeat(2, 350px);
        gap: 3rem;
    }
    .project-photo {
        height: 300px;
    }
    .project-card {
        margin: 1rem 1rem 1rem 1rem;
        border-radius: 0.5rem;
        padding: 0.5rem;
        border: solid 2px var(--border);
    }
    #github-contact {
        display: flex;
    }
    #github-icon {
        height: 2rem;
        padding-top: 1rem;
    }
}