src/styles/App.css
.App > div {
	padding-left: 10rem;
	padding-right: 10rem;
}

.App.light {
	color: #000;
	background-color: #f5f5f5;
	transition: all 0.5s;
}

.App.light .light {
	color: #fff;
	background: linear-gradient(to bottom left, #1da1f2, #6253e8);
	box-shadow: none;
	transition: all 1s;
}

.dark {
	box-shadow: 30px 20px 5px #232135;
	background-color: #181721;
	padding-top: 100px;
	padding-bottom: 100px;
	color: #fff;
	transition: all 0.5s;
}

h2 {
	font-size: calc(1vw + 1rem);
	font-weight: 500;
}

.dark:last-of-type {
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: calc(1vw + 1.1rem);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}

.arrow {
	background-color: #232135;
	height: 60px;
	width: 60px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: all 0.5s;
}

.arrow svg {
	color: #6253e8;
}

.light .arrow{
	background-color: #f5f5f5;
	transition: all 0.5s;
}

@media only screen and (max-width: 800px) {
	.App > div {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}

@media only screen and (max-width: 418px) {
	.dark:last-of-type {
		font-size: calc(1vw + 0.8rem);
	}
}
