body {
    margin: 0;
    background-color: #101010;
}
* {
    -webkit-tap-highlight-color: transparent;
    font-family: gilroy;
  }
*::selection {
    background-color: #210900;
    color: rgb(255, 152, 152);
}
.container {
    flex-wrap: wrap;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
    width: 100%;
    max-width: 1000px;
}
.subtitle {
    box-shadow: 0px 0px 11px 1px rgba(53, 190, 60, 0.13);
    margin: 0;
    font-weight: 800;
    background-color: #35be43;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none; 
    color: #ffff;

}
.title { 
    box-shadow: 0px 0px 11px 1px rgba(53, 103, 190, 0.13);
    margin: 0;
    font-weight: 800;
    background-color: #3567be;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none; 
    color: #ffff; 

}
.work {

    background-color: #0b0b0b;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none; 
    color: #ffff;
    transition: background-color 0.3s ease;

}

.work:hover {
    color: #dafdfb;
    background-color: #222;
}

.work div {
    width: 100%; 
}

.work h3 {
    font-size: xx-large;
    font-weight: 800;
    transition: background-color 0.3s ease;
    margin: 0 0 10px 0; 
}

.work p {

    font-weight: 500;
    transition: background-color 0.3s ease;
    margin: 0; 
    color: #707070;
}

@media screen and (max-width: 378px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}