@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

* {
    font-family: 'Source Code Pro', monospace;
}

main {
    padding-top: 4rem; 
    padding-bottom: 4rem;
}

#article {
    gap: 1rem;
}

#welcome-message,
#resume,
#certifications {
    margin: 0.5rem;
}

.table {
    border: solid 0.5px;
    box-shadow: 8px 8px rgba(0, 0, 0, 0.250);
}

.navbar-toggler {
    border-radius: 0 !important;
    box-shadow: 1px 1px rgba(0, 0, 0, 0.250);
}

header {
    margin: 1rem;
    border: solid 0.5px;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.250);
}

footer {
    margin: 1rem;
    border: solid 0.5px black;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.250);
    color: white;
}

.card {
    border: solid 0.5px;
    border-radius: 0%;
    box-shadow: 8px 8px rgba(0, 0, 0, 0.250);
}

.btn-primary {
    background-color: grey;
    border-radius: 0%;
    border: solid 0.5px black;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.250);
}

.btn-primary:hover {
    background-color: rgb(249, 249, 249);
    border: solid 0.5px black;
    color: black;
}

.btn-primary:active {
    background-color: rgb(0, 0, 0);
    border: solid 0.5px black;
    color: rgb(255, 255, 255);
    box-shadow: none;
}

.img-thumbnail {
    border-radius: 0%;
}

#article-content {
    border: solid 0.5px black;
    box-shadow: 8px 8px rgba(0, 0, 0, 0.250);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#article-content img {
    border: solid 0.5px;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.250);
    text-align: center;
    display: block;
    margin: auto;
}

#article-content p {
    font-size: 18px;
    margin-left: 1rem;
    margin-right: 1rem;
}

#article-info {
    border: solid 0.5px black;
    box-shadow: 8px 8px rgba(0, 0, 0, 0.250);
    margin-top: 1rem;
    margin-bottom: 1rem;
    align-self: start;
    height: fit-content;
}

#article-info p {
    font-size: 18px;
    margin-left: 1rem;
    margin-right: 1rem;
}

#article-info a {
    font-size: 18px;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.project-row {
    border: solid 0.5px black;
    box-shadow: 8px 8px rgba(0, 0, 0, 0.250);
    padding: 1rem;
    margin-top: 2.5rem;
    margin-bottom: 2.rem;
}


@media (max-width: 768px) {
    main {
        padding-top: 2rem; 
        padding-bottom: 2rem;
    }

    .listeprojets {
        margin: 1rem;
    }

    .project-row {
        padding: 1rem;
    }

    #article {
        gap: 0.5rem;
        margin: 0.5rem;
    }

    #article-content p, #article-info p, #article-info a {
        font-size: 16px;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    #article-content img {
        width: min(100%, 360px);
        height: auto;
    }


    #article-content,
    #article-info {
        width: min(100%, 360px);
        margin-left: auto;
        margin-right: auto;
    }

    #resume {
        font-size: 12px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #article-content,
    #article-info {
        width: min(100%, 700px);
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    #project {
        padding: 0.5rem;
    }

    #project img {
        width: min(100%, 700px);
        height: auto;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1024px) and (max-width: 1399px) {
    #project img {
        width: min(100%, 500px);
        height: auto;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    #project-desc h3 {
        font-size: 18px;
    }

    #project-desc p {
        font-size: 12px;
    }

    #project-desc a {
        font-size: 12px;
    }
}