html {
  font-family: 'DIN Next W01 Medium';
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
	margin: 0;
    scroll-behavior: smooth;
}

.flex {
	display: flex; /* or inline-flex */
	flex-wrap: wrap;
}

@media (max-width: 1280px) 
{
.flex 
{
flex-direction: column;
flex-wrap: wrap;
}
}

.flex-item {
	position: relative;
	background-color: #a2e08a;
	width: auto;
	margin: 10px;
	padding: 10px;
	font-size: calc(12px + .35vw);
	line-height: 150%;
	border: 1px solid black;
	border-radius: 10px;
	max-width: 33%;
}

@media (max-width: 1280px) 
{
.flex-item 
{
	width: 100%;
	max-width: 90vw;
}
}


.taskID {
	position: relative;
	left: 0px;
	top: 0px;
	font-size: calc(6px + .35vw);
}

.deleteTask {
	position: absolute; 
	bottom: 5px; 
	right: 5px; 
	border: 1px solid black; 
	border-radius: 0.5vw; 
	padding: 5px; 
	background: #fff; 
	font-family: 'DIN Next W01 Light';
	font-size: calc(6px + .35vw);
	line-height: 100%; 
}


.timekeeperTime 
{
	position: absolute; 
	top: 7px;
	right:30px;
  color: red;
  animation: time-pulse 3s infinite ease-out;
opacity: 0.4;
}

@keyframes time-pulse {
  0% {
  	opacity: 1;

  }
  50% {
  	opacity: 0.4;
  }
  100% {
  	opacity: 1;
  }
}


.heart 
{
	position: absolute; 
	top: 9px;
	right: 10px;
  color: red;
  animation: heart-pulse 3s infinite ease-out;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}

@keyframes heart-pulse {
  0% {
    transform: scale(0); /* scaling to 0 */
  }
  50% {
    transform: scale(1); /* increasing the size */
  	opacity: 1;
  }
  100% {
  	opacity: 0;
  }
}