:root {

    --primary-color: #9666ee;

}

 
/* Mobile */
body {
	height: auto;
	color: #21201f;
	background-color: #f2f2f2;
	margin: 1em auto;
	width: 90vw;
	max-width: 40em;
	padding: 0 1em;
}



h1 {

	font-weight: bold;
	text-align: end;
	font-size: 1.5em;

}

.g1{ color: #2f5d50;}
.g2{ color: #23443b;}
.r1{ color: #7a1e2e;}
.y1{ color: #c7a44a;}
.p1{ color: #9666ee;}

 

 .navbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 20px;
	flex-direction: column;
	gap: 10px;
}



a {

	color: #21201f;

}



a:hover {
  background-color: #9666ee;
  color: #e6e1d6;

}



.navbar a {
	padding: 5px 10px;

}



::selection {
	color: #f2f2f2; 
	background-color: #9666ee;

}

/* 768px and up */
@media (min-width: 768px){
body{
	width: 80vw;
	margin: 1.5em auto;
	padding: 0.2em;
}

h1{
	font-size: 2em;
}

.navbar{
	flex-direction: row;
	padding: 30px;
}
}

/* 1024px and up*/
@media (min-width: 1024px){
body{
	width:40em;
	margin: 2em auto;
	padding 0;
}

h1{
	font-size: 1.5em;
}

.navbar{
	padding: 30px;
}
}

/* 1440px and up*/
@media (min-width: 1440px){
body{
	width: 50em;
	margin: 3em auto;
}

h1{
	font-size: 1.5em;
}

.navbar{
	padding: 30px;
}
}
}