@font-face {
	font-family: "inter";
	src: url("/inter/thin.ttf") format("opentype");
	font-weight: 100;
}
@font-face {
	font-family: "inter";
	src: url("/inter/thin-italic.ttf") format("opentype");
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: "inter";
	src: url("/inter/extra-light.ttf") format("opentype");
	font-weight: 200;
}
@font-face {
	font-family: "inter";
	src: url("/inter/extra-light-italic.ttf") format("opentype");
	font-weight: 200;
	font-style: italic;
}

@font-face {
	font-family: "inter";
	src: url("/inter/light.ttf") format("opentype");
	font-weight: 300;
}
@font-face {
	font-family: "inter";
	src: url("/inter/light-italic.ttf") format("opentype");
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "inter";
	src: url("/inter/regular.ttf") format("opentype");
	font-weight: 400;
}
@font-face {
	font-family: "inter";
	src: url("/inter/regular-italic.ttf") format("opentype");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "inter";
	src: url("/inter/medium.ttf") format("opentype");
	font-weight: 500;
}
@font-face {
	font-family: "inter";
	src: url("/inter/medium-italic.ttf") format("opentype");
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: "inter";
	src: url("/inter/semi-bold.ttf") format("opentype");
	font-weight: 600;
}
@font-face {
	font-family: "inter";
	src: url("/inter/semi-bold-italic.ttf") format("opentype");
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: "inter";
	src: url("/inter/bold.ttf") format("opentype");
	font-weight: 700;
}
@font-face {
	font-family: "inter";
	src: url("/inter/bold-italic.ttf") format("opentype");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "inter";
	src: url("/inter/extra-bold.ttf") format("opentype");
	font-weight: 800;
}
@font-face {
	font-family: "inter";
	src: url("/inter/extra-bold-italic.ttf") format("opentype");
	font-weight: 800;
	font-style: italic;
}

@font-face {
	font-family: "inter";
	src: url("/inter/black.ttf") format("opentype");
	font-weight: 900;
}
@font-face {
	font-family: "inter";
	src: url("/inter/black-italic.ttf") format("opentype");
	font-weight: 900;
	font-style: italic;
}

body {
	font-family: "inter", sans-serif;
	color: #333;
}

.container {
	width: 90%;
	max-width: 1024px;
	margin: 0 auto;
}

img {
	max-width: 100%;
}

:root {
	--text-color: #333;
	--header-background: linear-gradient( 45deg, 
							rgba(   0%,  90%,  75%, .70),
							rgba(  75%,  50%, 100%, .99)
							),
						linear-gradient( 135deg,
							rgba(  0%, 20%,100%, .6),
							rgba(  0%, 20%, 10%, .3)
							);
}

* {
	outline: none;
}

body {
	min-height: 100dvh;
	min-width: 320px;
}

a {
	text-decoration: none;
	color: var(--text-color);
}
h1 { font-weight: 400; margin: .5rem 0; font-size: 3rem; }
h2 { font-weight: 400; margin: .5rem 0; font-size: 2rem; }
h3 { font-weight: 400; margin: .5rem 0; font-size: 1.5rem; }

p { line-height: 1.75rem; margin: 0; }

header {
	padding-top: 1rem;
	background: var(--header-background);
}

header h3 {
	display: inline;
}

.right-menu {
	float: right;
	margin-top: .25rem;
}

.right-menu > * {
	margin-left: 1rem;
}

.light {
	background: #f8fcff;
	padding-top: .25rem;
}

.topic {
	margin-top: 1rem;
}

.center {
	text-align: center;
	margin-top: 1rem;
}

.brand {
	margin-top: 6rem;
	margin-bottom: 0;
	font-size: 5rem;
	font-weight: 600;
	padding: 0;
}

.slogan {
	margin: 0;
	padding: 0;
	font-size: 2rem;
}

main {
	min-height: 60rem;
}

main h3 {
	width: 17rem;
	max-width: 100%;
	color: dodgerblue;
	background: linear-gradient( 45deg, turquoise, purple);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

footer {
	background: #666;
	color: white;
	padding: 1rem 0;
}

table {
	width: 100%;
	border: .1rem solid #1DB;
	border-radius: 1rem;
	background: white;
}

th {
	text-align: left;
	padding-left: 1rem;
	padding-right: 1rem;
	line-height: 2rem;
}

td {
	padding-left: 1rem;
	line-height: 1.8rem;
	border-top: .1rem solid #eee;
}

.box {
	border: .075rem solid #eee;
	border-radius: 1rem;
	box-shadow: 0 .05rem .05rem #aaa,
				0 0 .1rem #aaa;
	padding: 1rem 1.25rem;
	background: white;
	margin-bottom: 1rem;
}

.product-list {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 460px) {

.product-list {
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}
	
}

@media (min-width: 768px) {

.product-list {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 1rem;
}
	
}

.duo {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {

.duo {
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}

}

.trio {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {

.trio {
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 1rem;
}
	
}

.address-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
}