*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	text-size-adjust: none;
}
@media (min-width: 800px) {
  html {
    font-size: calc(14px + 100vw * 0.0025);
  }
}
@media (min-width: 1600px) {
  html {
    font-size: 18px;
  }
}

body {
	display: flex;
	flex-flow: column nowrap;
	min-height: 100vh;
	margin: 0;
	background:
		linear-gradient(135deg, rgba(240, 240, 255, .5), rgba(255, 255, 255, 1)) fixed,
		url(../img/background.png) center / cover no-repeat fixed;
	color: #333;
	line-height: 1.4;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Asap', 'Open Sans', sans-serif;
	font-weight: 600;
	line-height: 1.2;
}

h1 { font-size: 1.6em; text-align: center; margin-top: 0; color: #034EA2; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }

img {
	display: block;
	max-width: 100%;
	height: auto;
}

strong {
	font-weight: 600;
}

a {
	color: #2162de;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 1em;
}


/* ----- header ----- */

.logo {
	max-width: 400px;
	margin: 0 auto;
}


/* ----- main ----- */

main {
	flex: 1 1 auto;
}

main .inner {
    max-width: max-content;
}


.product__title {
	margin-top: 2em;
}

.product__item {
	display: grid;
	grid-template-columns: 1fr 22em;
	gap: 0 2em;
    margin: 0 -.4em;
    padding: .2em .4em;
    border-radius: 2px;
}

.product__item:hover,
.product__item:focus-within {
	background: rgba(0, 0, 0, .05);
}

.product__links table {
	border-collapse: collapse;
	/* width: 100%; */
}

.product__links table th,
.product__links table td {
	padding: 0;
}

.product__links table td:not(:last-child) {
	padding-right: 1em;
}

@media (max-width: 800px) {

	.product__item {
		grid-template-columns: 1fr;
	}

	.product__item + .product__item {
		margin-top: .5em;
	}

	/*.product__name {
		font-weight: 600;
	}*/
}


/* ----- footer ----- */

footer {
	text-align: center;
}

footer p {
	margin: 0;
	font-size: .9em;
}