style.css

body{
    margin: 0;
    padding: 0;
    Background: background:linear-gradient(to bottom right ,#355c7d,#6c5b7b,#c06c84);
}
}
table{
Overflow-y :auto;
}
.lemon{
	background-color: #fff44f;
}
.watermelon{
	background-color: #FF80AA;
}
.orange{
	background:linear-gradient(to bottom right,#0575e6,#021b79);
}
.blue{
	background:linear-gradient(to bottom right ,#093028,#237a57);
}

.light{
	background-color: #bebebe;
}
.blue1{
background-color: #6BCAE2;
}
.gradient{
	background: linear-gradient(to bottom right,black,grey)
}
.ui{
	background:linear-gradient(to bottom right ,#355c7d,#6c5b7b,#c06c84);
}
@media only screen and (max-width: 800px){
	span{
		padding: 0;
		font-size: 2em;
	}
}

ul{
	display: flex;
	font-size: 0.6em;
	margin: 0px;
}
a{
	color:#f5f5f6;
	text-transform: uppercase;
	text-decoration: none;
}
li{
	list-style: none;
	padding: 10px;
}
@media only screen and (max-width: 800px){
	footer{
		padding: 0;
		font-size: 0.6em;
	}
}
@media only screen and (max-width: 800px){
	ul{
		padding: 0;
		font-size: 0.4em;
	}
}
.n{
font:5%;
}
.border{
	border:5px solid white;
}
.purple{
	background-color: #b19cd9;
}
.none{
	border: none;
}
.grey{
	background-color: grey;
	}
.red{
	background-color: #ff6961;
}
.container{
	display: flex;
	align-items: center;
	justify-content:left;
	margin-left: auto; 
}
.push{
margin-left: auto; 
}
.text{
	color:white;
	text-align: center;
	font-size: 1em;
}
td,tr{
	border: 1px solid black;
}
td{
	color:black;
	font-weight: bold;
	/*padding:10px;*/
	transition: all 1s;
}
td:hover{
	transform: scale(1.1); 
}

.yellow{
	background-color: yellow;
}
.zone2>table{
	display: flex;
	flex-wrap: wrap;
}
@media only screen and (max-width: 1000px)
{
	table{
		overflow-x: auto;
	}
}

.flex{
	display: flex;
}

.zone3{
	border:1px solid #bbb;
	cursor: pointer;
        display:flex;
	/*display: inline-block;*/
	/*margin: 40px 60px;*/
	font-size: 1.5em;
	padding: 15px 40px;
	border-radius: 4px;
	transition: all 0.3s ; 
}
.zone{
	border:1px solid #bbb;
	cursor: pointer;
	display: flex;
	/*margin: 40px 60px;*/
	font-size: 2em;
	padding: 15px 40px;
	border-radius: 4px;
	transition: all 0.3s ; 
}
.zone:hover{
	box-shadow: grey 0px 5px 15px;
}
.black{
	background: black;
	color: white;
}
.pink{
	background-color: #FF476F;
}
.green{
	background-color: #76FC90;
}
.orange2{
	background-color: #FED8B1;
}
span{
display: flex;
font-size: 2em;
}
footer{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}
.period{
	color: white;
	border:none;
}
.group{
	color: white;
	border:none;
}