* { --active-text-color-light: white; --active-text-color-dark: rgb(95, 87, 79); --active-theme: rgb(133, 197, 219); --active-theme-highlight: rgb(90, 161, 218); --active-theme-active: rgb(72, 142, 200); --active-theme-disabled: rgb(226, 245, 251); --active-user-transitionSpeed: 0.2s; --active-font-size-12: 12px; --active-font-size-14: 14px; --active-font-size-16: 16px; --active-font-size-20: 20px; --active-font-size-24: 24px; --active-font-size-28: 28px; --active-font-size-32: 32px; } body { color: var(--active-text-color-light); margin: 0; font-size: var(--active-font-size-14); font-family: monospace; background-color: #ebeef1; } .backgroundImage { position: fixed; left: 0; right: 0; z-index: -1; display: block; width: 100%; height: 100%; background-image: url("./backgroundImage.png"); transform: scale(1.1); filter: blur(6px); background-position: center; background-repeat: no-repeat; background-size: cover; } a { color: var(--active-text-color-dark); text-decoration: none; } .content { max-width: 500px; min-width: 200px; margin: 40px auto; background-color: rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 16px; } .profileContainer { text-align: center; .profileFlex { display: flex; justify-content: space-around; } img { display: block; margin: 0px auto; width: 100px; height: 100px; border-radius: 50%; } .wiggly { display: block; margin: auto; width: fit-content; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.65, -0.55, 0.65, 2.45); transform: translateZ(0); &:hover { img { /* transform: scale(1.1); */ animation: wobble 0.5s ease-in-out infinite alternate; } } } .profileImage { display: block; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.65, -0.55, 0.65, 2.45); transform: translateZ(0); border-radius: 8px; color: white; a { color: white; } &:hover { img { transform: scale(1.1); animation: wobble 0.5s ease-in-out infinite alternate; } } } p { margin: 0px 10px; } } .linkContainer { display: flex; flex-direction: column; gap: 10px; margin: 20px 10px; } .linkSplit { display: flex; gap: 10px; } @media screen and (max-width: 360px) { .linkSplit { flex-direction: column; } } .link { width: 100%; color: var(--active-text-color-dark); background-color: var(--active-text-color-light); border-radius: 12px; font-size: var(--active-font-size-16); margin: auto; text-align: center; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.64, -0.57, 0.67, 2.43); backface-visibility: hidden; transform: translateZ(0); &:hover { transform: scale(1.025); animation: wobbleSlight 0.5s ease-in-out infinite alternate; } p { padding: 16px; margin: 0; font-weight: 600; } } @keyframes wobble { 33% { transform: rotate(5deg); } 66% { transform: rotate(-5deg); } } @keyframes wobbleSlight { 33% { transform: rotate(2deg); } 66% { transform: rotate(-2deg); } }