body {
	background-color: #304050;
	color: #ffffff;
	font-family: Helvetica;
	padding-left: 2.5cm;
	padding-top: 1cm;
}

h1{
	font-size: 2cm;
}

.card1 {
	width: 310px;
	height: 254px;
	margin-left: 250px ;
	margin-top: 50px;
	background-color: #F8FBFE;
	border-radius: 8px;
	z-index: 1;
	position: relative;
	box-shadow: 0px 0px 5px #202020;
   }
   
   .card2 {
	width: 330px;
	height: 254px;
	margin-left: 380px ;
	margin-top: -30px;
	background-color: #F8FBFE;
	border-radius: 8px;
	z-index: 3;
	position: relative;
	box-shadow: 0px 0px 5px #202020;
   }

   .card3 {
	width: 300px;
	height: 154px;
	margin-left: 600px ;
	margin-top: -400px;
	background-color: #F8FBFE;
	border-radius: 8px;
	z-index: 3;
	position: relative;
	box-shadow: 0px 0px 5px #202020;
   }

   .card4 {
	width: 300px;
	height: 100px;
	margin-left: -200px ;
	margin-top: 900px;
	background-color: #F8FBFE;
	border-radius: 8px;
	z-index: 3;
	position: relative;
	box-shadow: 0px 0px 5px #202020;
   }

   .card5 {
	width: 160px;
	height: 100px;
	margin-left: -400px ;
	margin-top: 300px;
	background-color: #F8FBFE;
	border-radius: 8px;
	z-index: 3;
	position: relative;
	box-shadow: 0px 0px 5px #202020;
   }

   .card6 {
	width: 160px;
	height: 100px;
	margin-left: 270px ;
	margin-top: 150px;
	background-color: #F8FBFE;
	border-radius: 8px;
	z-index: 3;
	position: relative;
	box-shadow: 0px 0px 5px #202020;
   }

.tools {
	display: flex;
	align-items: center;
	padding: 9px;
}

.circle {
	padding: 0 4px;
}

.box {
	display: inline-block;
	align-items: center;
	width: 10px;
	height: 10px;
	padding: 1px;
	border-radius: 50%;
}

.red {
	background-color: #ff605c;
}

.yellow {
	background-color: #ffbd44;
}
   
.green {
	background-color: #00ca4e;
}

.card__content{
	padding-left: 0.5cm;
	color: black;
	font-family: consolas;
	z-index: 2;
}