*{
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
	}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.header{
font-family: "Roboto", sans-serif;
background-color: #708090;
color: whitesmoke;
height: 40px;
padding-top: 8px;	
}

.footer{
font-family: "Roboto", sans-serif;
background-color: indigo;
color: whitesmoke;	
}

.copyright{
font-family: "Roboto", sans-serif;
background-color: #0000FF;
color: whitesmoke;	
}

.navbar{
background-color: #A9A9A9;	
}

body a{
text-decoration: none;
color:black;
}

.login{
background-color: #FF0000;
border-radius: 5px;
font-weight: bold;
color: white;
margin-top: 4px;
height: 35px;
width: 90px;
padding-top: 5px;
padding-left: 10px;
}

.login a{
	color: white;
}

.detail{
	background-color: #191970;
	border-radius: 5px;
	color: whitesmoke;
	font-weight: bold;
	height: 30px;
	padding-left: 10px;
	padding-top: 3px;
	width: 80px;	
}

.detail a{
	color: white;
}

.app1{
	color: red;
	
}

.app2{
	background-color: #000080;
	color: blue;
}

.app3{
	background-color: #FF0000;
	color: white;
}


.font-sans{
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

nav ul li a:hover{
font-family: Roboto, sans-serif;
color: skyblue;
font-size: 14px;
background-color: orange;
margin-bottom: 5px;
}