canvas {
    max-width: 100%;
    width: 100vw;
    height: 100%;
}

/* audio {
    position: absolute;
    width: 100%;

    left: 0;
    bottom: 2.6rem;
} */

.project {
    position: relative;
}

.project button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
/* .fa-play {
    font-size: 4rem;
}
.fa-pause {
    font-size: 4rem;
} */
.project .fa {
    font-size: 4rem;
    color: var(--color-text-b);

    transition: font-size 0.6s ease, color 0.6s ease;
}
.project:hover .fa {
    font-size: 4.6rem;
    color: var(--color-text-a);
}

.audio-title {
    position: absolute;
    left: 1rem;
    bottom: 1rem;

    font-size: 1.4rem;
    white-space: nowrap;

    transition: color 0.6s ease, left 0.6s ease, transform 0.6s ease, background-color 0.6s ease, backdrop-filter 0.6s ease;

    background-color: transparent;
    border-radius: 6px;
    padding: 0.4rem;
    margin-bottom: -0.4rem;
}
.audio-title-play {
    color: var(--color-text-a);
    left: 50%;
    transform: translate(-50%, 0);

    background-color: rgba(32, 31, 37, 0.4);
    backdrop-filter: blur(4px);
}
.audio-title-play i {
    color: var(--color-highlight-a);
}