@font-face {font-family: century-gothic; src: url('../font/centurygothic.ttf');}
body {font-family: "century-gothic"; max-width: 1100px; margin: 0 auto; padding-left: 6%; padding-right: 6%;}

.title {margin-top: 80px; margin-bottom: 100px;}
.title h1 {font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 58px; text-transform: uppercase; margin: 0; text-align: center;}

.category {margin-bottom: 80px;}
.category h2 {font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 40px; text-transform: uppercase; margin-top: 0; margin-bottom: 40px; text-align: center;}
.category .buttons {display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; position: relative;}
.category .buttons div {flex: calc(33.333% - 20px); max-width: calc(33.333% - 20px);}
.category .buttons div a {background-color: black; border-radius: 30px; border: 1px solid black; color: white; font-size: 18px; text-decoration: none; padding: 18px 30px; display: block; transition: all 0.3s; text-align: center;}
.category .buttons div a:hover {background-color: inherit; color: black;}

@media(max-width:767px){
	.title h1 {font-size: 42px;}
	.category h2 {font-size: 30px;}
	.category .buttons {gap: 20px;}
	.category .buttons div {flex: calc(50% - 10px); max-width: calc(50% - 10px);}
	.category .buttons div a {font-size: 16px; padding: 16px 20px;}
}