body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(to right, #642b73, #c6426e); /* Replace with your gradient image if needed */
  color: white;
   background: url('dashboardimages/bg.png') no-repeat center center;
  background-size: cover;
  height: 100vh;
}

.header {
	/*background: #d09b79;*/
	background: #fff;
	color: maroon;
	text-align: center;
	padding: 15px;
	font-size: 30px;
	font-weight: bolder;
	border-bottom: 4px solid #004aad;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.logo {
  width: 25%;
  height: auto;
  padding-top:60px;
}

.buttons {
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.button {
  padding: 20px 30px;
  border-radius: 10px;
  font-size: 20px;
  color:maroon;
  text-decoration:none;
  font-weight: bold;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  text-align: center;
  vertical-align:middle;
  cursor: pointer;
  max-height:100px;
  min-height:100px;
  padding-top: 70px;
}


.button{

}	



@property --angle {
	syntax: '<angle>';
	inherits: true;
	initial-value: 0deg;
}

.button {
	--angle: 0deg;
	padding: 40px;
	/* background: linear-gradient(#cf0d00, #d99000) padding-box, conic-gradient(from var(--angle), #dfdfdf, #004aad) border-box;  */
	/* background: linear-gradient(#cf0d00, #d99000) padding-box, conic-gradient(from var(--angle), #dfdfdf, #004aad) border-box; */
	background: linear-gradient(#f1f7ff, #f0cdb6) padding-box, conic-gradient(from var(--angle), #990000, #f0ffff) border-box;
	border: 4px solid transparent;
	border-radius: 16px;
	max-width: 400px;
	animation: rotate-gradient 3s infinite linear;
	padding-top: 75px;
}

@keyframes rotate-gradient {
	from { --angle: 0deg; }
	to { --angle: 360deg; }
}

 .button:hover{
	background:#000;
} 


 .button.blue {
  background-color: #b7e6e7;
} 

.button.yellow {
  background-color: #ede0ff;
  /* color: #5d2000; */
 
}

.button.red {
  background-color: #fae0b1;
}

.small-text {
  font-size: 16px;
}

.footer {
  text-align: center;
    padding: 15px;
    background: #002250;
    font-size: 14px;
    color: orange;
    position: fixed;
    bottom: 0;
    width: 100%;
}
