body {
  font-family: "Outfit", sans-serif;
  /* font-optical-sizing: auto; */
  font-weight: 100;
  font-style: normal;
}
main {
    width: 90vw;
    margin: auto;
}

#projects {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: 20px;
}
.project {
    /* Add shadows to create the "card" effect */
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    max-width: 90vw;
}

.project img {
    width: 100%;
    border-radius: 8px 8px 0px 0px;
}
.project-content {
    padding: 20px 16px;
}
/* On mouse-over, add a deeper shadow */
.project:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

a {
    color: purple;
    background-color: antiquewhite;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;
}
a:hover {
    color: rgb(183, 37, 183);
    background-color:bisque;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  vertical-align: middle;
}

@media (min-width: 860px) {
    main {
        width: 70vw; /* Wider on smaller screens */
        margin: auto;
        padding: 40px;
    }
    .project {
        max-width: 20vw;
    }
}