.creditsContainer {
    width: 100%;
    background-color: #313131dd;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.credunit {
    width: 200px;
    aspect-ratio: 2 / 3;
    display: flex;
    margin: 10px;
    user-select: none;
    background: linear-gradient(360deg, #3f2f686c, #212121aa);
    flex-direction: column;
    align-items: center;
}

.credimg {
    width: 70%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-repeat: no-repeat;
    rotate: 0deg;
    scale: 0deg;
    transition: rotate 0.4s, scale 0.4s;
}

.credimg:hover {
    rotate: -2deg;
    scale: 0.9;
}

.credtitle {
    background: rgba(142, 104, 232, 0.384);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 15%;
    width: 100%;
    user-select: none;
}

.credtitle {
    font-family: "TF2 Build";
    color: #dfdfdf;
    
}

.credrole {
    margin-top: 10px;
    font-family: "TF2";
    color: #dfdfdfa1;
    width: 100%;
    text-align: center;
    text-shadow: #271d41 4px 2px, #8e68e8 4px 2px;
}

.credtitletext {
    display: inline-block;
    rotate: -2deg;
    scale: 1;
    text-shadow: #271d41 4px 2px, #8e68e8 4px 2px;
    user-select: none;
    transition: rotate 0.4s, scale 0.4s;
}

.credtitletext:hover {
    rotate: 0deg;
    scale: 1.2;
}