/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/

/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
	all: unset;
	display: revert;
}

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

* {
	margin: 0;
	padding: 0;
}
/*
    Remove list styles (bullets/numbers)
    in case you use it with normalize.css
  */
ol,
ul {
	list-style: none;
}

/* Removes spacing between cells in tables */
table {
	border-collapse: collapse;
}

/* Revert the 'white-space' property for textarea elements on Safari */
textarea {
	white-space: revert;
}

/*
  1. Use a more-intuitive box-sizing model.
*/

/*
    2. Remove default margin
  */

/*
    3. Allow percentage-based heights in the application
  */
html,
body {
	height: 100%;
}
/*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
/*
    6. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
/*
    7. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
	font: inherit;
}
/*
    8. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}
/*
    9. Create a root stacking context
  */
#root,
#__next {
	isolation: isolate;
}

b {
	font-weight: 700;
}

a {
	cursor: pointer;
}

body {
	min-height: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start;
	background: url("./bg.jpg") center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	color: #FFF;
	font: 400 14px/1.3 "Raleway", sans-serif;
	padding: 6em 0;
	text-align: center !important;
}

img#logo {
	width: min(400px, 70vw);
	margin: 0 auto 20px;
}

p {width: min(600px, 80vw);}

p#slogan {
	font-weight: 700;
	font-size: 1.2em;
}

p#text {
	width: min(600px, 80vw);
	margin: 40px auto 0;
	font-size: 36px;
	font-weight: 700;
}

p#contact {
	margin: 20px auto;
}

footer {
	padding: 1em;
	font-size: 0.9em;
	text-align: center;
}

#products {
	display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 20px auto;
	width: min(700px, 80vw);
	img {width: 100%; height: auto; display: block; object-fit: cover; border-radius: 16px;}
}