:root { --background: #3b2a55; --background2: #140f18; --background3: #3b2e40; --foreground: #937da2; --accent: #7441a0; } /* CSS OVERRIDES ------------------------------------------ */ html { background-image: url(assets/pattern.png); animation: scrolling 30s linear 1; animation-direction: forward; animation-iteration-count: infinite; background-color: var(--background) ; } body { color: var(--foreground); font-family: sans-serif; font-size: 14.5px; } a { color: var(--accent); } h1, h2, h3, h4, h5, h6 { margin: 5px; } /* LAYOUT ------------------------------------------ */ .flex { display: flex; } .box { background-color: var(--background2); border-radius: 24px; padding: 10px; margin: 15px; margin-left: auto; margin-right: auto; } /* CONTAINERS ------------------------------------------ */ .c-main { width: 15%; padding: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ELEMENTS ------------------------------------------ */ .c-element { margin: 20px; } .e-profile { width: 100%; /* padding: 12px; */ margin: 10px; border: 2px dashed var(--background3); border-radius: 15px; } .e-profile_icon { width: 28px; filter: invert(25%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%); margin: 3px; } .e-icon { width: 28px; filter: invert(25%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%); margin: 3px; } .e-profile_icon:hover { filter: invert(50%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%); transform: scale(1.3); } @media only screen and (device-width: 1000px), only screen and (max-width:1000px) { .c-main { width: 85%; } } @-webkit-keyframes scrolling { from { background-position: 0 0; } to { background-position: -300px 300px; } }