:root {
    --font-sans: 'Noto Sans', sans-serif;
    --line-height: 1.6;
    
    --light-page-background: #fefefe;
    --dark-page-background: hsl(100 7% 8%);
    
    --light-text: hsl(85 8% 16%);
    --dark-text: hsl(85 8% 84%);
    
    --light-gradient: linear-gradient(to right, #434cce, #ad3bc4);
    --dark-gradient: linear-gradient(to right, #7a81e7, #c67be4);
    
    --page-background: var(--light-page-background);
    --text: var(--light-text);
    --main-gradient: var(--light-gradient);
}

 /*  */
@media (prefers-color-scheme: dark) {:root {
    --page-background: var(--dark-page-background);
    --text: var(--dark-text);
    --main-gradient: var(--dark-gradient);
}}

html[data-theme="light"] {
    --page-background: var(--light-page-background);
    --text: var(--light-text);
    --main-gradient: var(--light-gradient);
}

html[data-theme="dark"] {
    --page-background: var(--dark-page-background);
    --text: var(--dark-text);
    --main-gradient: var(--dark-gradient);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    line-height: var(--line-height);
    color: var(--text);
    corner-shape: squircle;
    overflow: visible;
}

html {
    background-color: var(--page-background);
}

#UNDER-CONSTRUCTION {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    height: 100vh;
}

h1 {
    font-size: 4rem;
  background-image: var(--main-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

p {
    font-size: 1.5rem;
}