index.css

body{
	width:auto; height:97.5vh;
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center; 
}

#container{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	overflow-x:hidden;
}

.card{
	box-sizing:border-box;
	margin:0px; padding:3.5% 5%;
	width:33.3%; height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:flex-start; 
}

.title{
	font-family: 'Big Shoulders Display', cursive;
	color:hsl(0, 0%, 95%);
}

.body{
	color:hsla(0, 0%, 100%, 0.75);
	font-family: 'Lexend Deca', sans-serif;
}

[class*="learn"]{ 
	border-radius:26px;
	width:auto; height:auto;
	background-color:hsl(0, 0%, 95%);
	font-family: 'Lexend Deca', sans-serif;
	margin-top:60px;
}

.learn1{color:hsl(31, 77%, 52%)}
.learn2{color:hsl(184, 100%, 22%)}
.learn3{color:hsl(179, 100%, 13%)}

.learn1:hover{ background-color:hsl(31, 77%, 52%); color:hsl(0, 0%, 95%); cursor:pointer; border:2px white solid;}
.learn2:hover{ background-color:hsl(184, 100%, 22%); color:hsl(0, 0%, 95%); cursor:pointer; border:2px white solid;}
.learn3:hover{ background-color:hsl(179, 100%, 13%); color:hsl(0, 0%, 95%); cursor:pointer; border:2px white solid;}

/*Desktop*/
@media screen and (max-width:1440px)
{
	#container{
		width:70%; height:75%;
		border-radius:10px;
	}

	.title{
		font-size:35px;
	}

	[class*="learn"]{
		padding:13px 27px;
	}
}

/*Mobile*/
@media screen and (max-width:375px)
{
	#container{
		width:100%; height:100%;
		border-radius:10px;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:flex-start;
	}

	img{
		width:35px; height:25px; 
	}

	.card{
		width:100%; height:33.3%;
		padding:2% 10%;
	}

	.title{
		font-size:20px;
	}

	.body, [class*="learn"]{
		font-size:12px;
	}

	[class*="learn"]{
		margin:0px;
		padding:8px 10px;
	}
}