:root{
	color-scheme: light dark;

	--bg-color: light-dark(#121212, #f5f5f5);
	--text-color: light-dark(#eeeeee, #111111);
	--accent-color: light-dark(#4dabf7, #242acf);
	--button-color: linear-gradient(45deg, #630346, #242acf);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] { 
  color-scheme: light;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
  padding-top: 0px;
  margin-top: 0px;
}

nav{
	display: flex;
	position: fixed;
	width: 100%;
	background-color: aquamarine;
	margin: 0px;
	justify-content: right;
}
nav div{
	display: flex;
	width: 10%;
	height: 45px;
	margin-left: 5px;
	float: left;
	background-color: red;
	
}

nav a {
  color: var(--text-color);
  text-decoration: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--accent-color);
}

button {
  background: var(--button-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 4px;
}

h1 { color: linear-gradient(45deg, #ffa8bd, #242acf) };