/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Variables */
:root {
    --primary-clr: #fff;
    --body: #fff;
    --primary-font: 'Montserrat';
}

/* Base reset-ish */
* { box-sizing: border-box; }
body { 
    margin: 0;
    background: url('img/home-background.jpg') no-repeat center/cover;
    height: 100vh;
    color: var(--body);
}

/* Headers */
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat'; font-weight: 500; color: var(--primary-clr);}

div.menu h1 {text-align: center; font-size: 1.7em;}
div.menu h1::after {display: block; width: 20%; content:''; border-bottom: 2px solid var(--primary-clr); margin: 15px auto 50px;}

/* Site Wrapper */
.page {
      min-height: 90vh;
      display: flex;
      align-items: center;            /* vertical centering */
      justify-content: center;        /* horizontal centering */
}
.page div {padding: 25px; flex: 0 1 auto;}

/*Flexbox responsive containers*/
.flex-container {display:flex; flex-wrap: wrap;}
.flex-tile {flex:1; padding: 5px 10px}
.flex-tile.one-up {flex: 1 0 99%;}
.flex-tile.two-up {flex: 1 0 49%;}
.flex-tile.three-up {flex: 1 0 30%;}
.flex-tile.four-up {flex: 1 0 23%;}
@media (max-width:760px){.flex-container.product-menu {flex-direction:column;} .flex-tile {padding:10px;}
	.flex-tile.two-up {flex: 1;}}

/* Site Container */
.container {
    width: 100%;
    max-width: 1200px;
}
@media(max-width: 1200px) {
    .container {max-width: none;}
}

/* Header container */
.site-header{
    padding-top: 0px;  
}

/* Logo link wrapper (optional but nice for click area) */
.site-logo{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo image */
.site-logo img {
  width: min(500px, 100%);  /* max 500px but scales down on mobile */
  height: 50px;
  display: block;           /* removes inline-img baseline spacing */
}

/* Product Menu */
.menu {width: 100%; max-width: 1000px; margin: 0 auto; padding: 0;}
.menu a {
    font-family: var(--primary-font);
    font-size: 1.2em;
    font-weight: 500;
    color: #fff;
}

div.product-menu {
    width: 100%;
    padding: 0;
}

div.product-menu > div {
    padding: 10px;
    margin: 2px;
    list-style-type: none;
    border: 0px solid var(--primary-clr);
    height: 350px;
}
@media(max-width:760px) {
    div.product-menu > div {height: 150px;}
}

div.product-menu a {text-decoration: none; margin: 5px; transition: all 0.2s ease-in-out;}
div.product-menu a:hover {transform: scale(1.03); box-shadow: 2px 2px 10px rgba(0,0,0,0.4);}

div.product-menu .link {padding: .4em; margin-top: 265px;}
@media(max-width:760px) {
    div.product-menu .link {margin-top: 120px;}
}

a.shots {
    background: linear-gradient(to bottom,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 100%), url('img/menu-advanced-wellness-shots.jpg') no-repeat center/cover;
}
/* div.shots:hover {background: linear-gradient(to bottom,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.7) 100%), url('img/menu-advanced-wellness-shots.jpg') no-repeat center/cover;
} */
a.drips {
    background: linear-gradient(to bottom,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 100%), url('img/menu-advanced-infusion-drips.jpg') no-repeat center/cover;
}
/* div.drips:hover {
    background: linear-gradient(to bottom,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.7) 100%), url('img/menu-advanced-infusion-drips.jpg') no-repeat center/cover;
} */
a.peptides {
    background: linear-gradient(to bottom,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 100%), url('img/menu-peptides.jpg') no-repeat center/cover;
}
/* div.peptides:hover {
    background: linear-gradient(to bottom,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.7) 100%), url('img/menu-peptides.jpg') no-repeat center/cover;
} */