personal-portfolio/assets/variables.scss

// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
// $font-size-root: 20px;

$font-inter: 'Inter', sans-serif;
@use 'vuetify' with (
  $body-font-family: $font-inter,
);

p a {
    color: rgb(var(--v-theme-primary));
    text-decoration: none;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: rgb(var(--v-theme-primary));
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }

    &:hover::before {
        transform-origin: left;
        transform: scaleX(1);
    }
}

.v-overlay__scrim {
    background: rgb(var(--v-theme-background)) !important;
    opacity: 0.9 !important;
}

.link {
    color: inherit;
    text-decoration: none;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
        color: rgb(var(--v-theme-primary));
    }
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s;
}
.slide-left-enter-from {
  opacity: 0;
  transform: translate(50px, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-enter-from {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate(50px, 0);
}