.hidden {
    opacity: 0;
    filter: blur(3px);
    transition: all 1s;
}
.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}
@media(prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
}
.content {
    text-align: center;
}
.intro-page {
    height: 90vh;
    margin-top: .5rem;
}
.intro-profile-pic img {
    border-radius: 100%;
    max-height: 20rem;
}
.profile-text {
    padding: 0 2rem;
    text-align: center;
}
.profile-text h2, h3 {
    color: #2f4f4f;
}
.profile-buttons {
    display: inline-flex;
    white-space: nowrap;
}
.profile-buttons svg {
    max-height: 2rem;
    max-width: 2rem;
    margin: 1rem;
}
.profile-buttons svg:hover {
    border-radius: 50%;
    box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}
.b-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.stack {
    margin-top: 5rem;
}
.stack h1 {
    margin: 0 auto 4rem;
}
.contact a {
    text-decoration: none;
}
.contact a:hover {
    text-decoration: underline;
    transition: text-decoration 0.5s ease 0.2s;
}
.contact h4 {
    margin-top: 1rem;
}
.carousel {
    width: 100%;
    padding: 1rem 0 5rem;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
}
.carousel-inner {
    display: flex;
    animation: 12s runSlide infinite linear;
    flex-wrap: nowrap;
    min-width: 58rem;
}
.carousel:before,
.carousel:after {
    position: absolute;
    top: 0;
    width: 10rem;
    height: 100%;
    content: "";
    z-index: 10;
}
.carousel:before {
    left: 0;
    background: linear-gradient(to left, rgba(0,0,0,0), var(--bg-color));
}
.carousel:after {
    right: 0;
    background: linear-gradient(to right, rgba(0,0,0,0), var(--bg-color));
}
.item {
    padding: 1rem;
    flex: 0 0 auto;
}
.item svg {
    height: 60px;
    width: 60px;
}