:root{
	--primary-color: rgb(74, 107, 255);
	--secondary-color: rgb(255, 107, 107);
	--dark-color: rgb(45, 52, 54);
	--light-color: rgb(245, 246, 250); 
	--grey-color: rgb(127, 140, 141);
}
body{
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: rgb(248, 249, 250);
    color: rgb(18, 18, 18);
    line-height: 1.6;
    /* max-width: 800px; */
	max-width: 800px;
    margin: 0 auto;
    padding: 32px;
}
h1{
	color: rgb(0, 123, 255);
	font-size: 2.5rem;
	margin-bottom: 40px;
	position: relative;
	padding-bottom: 16px;
	text-align: center;
}
h1::after{
	content: '';
	background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
	width: 100px;
	height: 4px;
	position: absolute;
	bottom: 0px;
	left: 50%;
	border-radius: 2px;
	transform: translateX(-50%);
}
.container{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	padding: 0;
}
.box{
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	text-align: center;
	background-color: white;
	padding: 1.5rem;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
	color: var(--dark-color);
}
.box:hover{
	transform: translateY(-5px);
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
	color: var(--primary-color);;
}

.text{
	font-size: 1.3rem;
	font-weight: 600;
	transition: color 0.3s ease;
}
a{
	display: block;
	text-decoration: none;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--dark-color);
}
a:hover{
	color: var(--primary-color);
}
.emoji{
	font-size: 2rem;
	margin-bottom: 0.5rem;
	display: block;
}
footer{
	text-align: center;
	margin-top: 3rem;
	color: var(--grey-color);
	font-size: 0.9rem;
}
@media(max-width:600px){
	body{
		padding: 1rem;
	}
	h1{
		font-size: 2rem;
	}
}
@media(max-width:700px){
	.container{
		grid-template-columns: 1fr;
	}
}