#subtitle {
    color: white;
    font-family: "Fredoka";
    font-size: 32px;
    text-align: center;

    margin-bottom: 2%;
    margin-top: 2%;
}

#projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2%;
    row-gap: 5%;

    margin-left: 20%;
    margin-right: 20%;
}

.project {
    background-color: #4F6560;

    border-radius: 20px;
    border-style: solid;
    border-color: #40524d;

    font-family: "Fredoka";
    color: white;
    font-size: 28px;
    text-align: center;
    align-content: center;
    text-decoration: none;

    transition: font-size 0.4s;

    position: relative;
}

.project::after {
  content: attr(after-text);
  position: absolute;
  left: 0;
  bottom: -5%;
  height: 2%;
  width: 100%;
  background: white;

  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s;

  z-index: 2;

  font-size: 20px;
  color: white;
  text-shadow: 3px 0 black,
    -3px 0 black, 
    0 3px black, 
    0 -3px black,

    2px 2px black,
    -2px 2px black,
    -2px -2px black,
    2px -2px black;
}

.project:hover {
    font-size: 32px;
}

.project:hover::after {
  transform: scaleX(0.875);
}

.project:active {
    background-color: #4c615b;
}

@media (width <= 980px) {
    #subtitle {
        font-size: 30px;
    }

    #projects-grid {
        margin-left: 6%;
        margin-right: 6%;
        margin-top: 5%;
        margin-bottom: 5%;

        column-gap: 4%;
        row-gap: 7.5%;
    }

    .project {
        font-size: 24px;
    }

    .project:hover {
        font-size: 30px;
    }

    .project:hover::after {
        transform: scaleX(0.8);
    }
}