:root{
    --font-family: 'Roboto', sans-serif;

    --border-radius-norm: 8px;
}
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #f1f1f1;
        --color: #1c1c1c;




	}
}
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1c1c1c;
        --color: #f1f1f1;




        /*NavBar*/
        --acrylic-tint: rgba(44,44,44,.15);
        --light-border-color: hsla(0, 0%, 0%, 20%);
	}
}

*{
    font-family: var(--font-family);
    scroll-behavior: smooth;
}

html{
    background-color: var(--background-color);
}
html, body{
    margin: 0;
    padding: 0;
    color: var(--color);
}

main{
    backdrop-filter: blur(16px);
    height:100%;
    width:100%;
    position:fixed;
    z-index: -1;
}
header {
    position: sticky;
    top: 10px;
    z-index: 1000;
    box-shadow: 0px 8px 16px hsla(0, 0%, 0%, .14);
    margin: 0 10px;
}

nav{
    padding:20px 40px;

    background-color: var(--acrylic-tint);
    backdrop-filter: blur(60px);
    -moz-backdrop-filter: blur(60px);
    border: 1px solid var(--light-border-color);

    border-radius: var(--border-radius-norm);
}