:root { color-scheme: light; supported-color-schemes: light; }
@media (prefers-color-scheme: dark) {   /*  target devices or user preferences that have a dark color scheme set. */
  :root { color-scheme: light; }        /* sets the color-scheme property of the HTML document, usually the <html> tag to light. */
}
* { min-height: 0; min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }

body { 
    font-size: 16px;  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
    color: white; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 100vw; min-height: 100vh;
    background: #3C51AE;
    background: linear-gradient(180deg, rgba(60, 81, 174, 1) 0%, rgba(39, 41, 90, 1) 100%);
}
main { display: inline-block; text-align: center; }
picture { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
picture img { width: 200px; }
p {  }

.text-uppercase { text-transform: uppercase; }

.icons-container { display: flex; align-items: center; justify-content: center; gap: 0 30px; }
.icons-container > * { transition: scale 300ms, filter 300ms; }
.icons-container:has(:hover) :not(:hover) { transform: scale(0.8); filter: blur(2px);