@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --mobile: #deb1a1;
  --tablet: #ece2e4;
  --desktop: #ebd0bc;
  --omaover2: rgba(253, 218, 125, 0.9);
  --overblack: rgba(0, 0, 0, 0.7);
  --overwhite: rgba(255, 255, 255, 0.7);

  --oma11: hsl(15, 68%, 35%);
  --oma22: hsl(44, 97%, 84%);
}

body {
  background-color: var(--mobile);

  font-size: 16px;
  font-family: "Montserrat", sans-serif;

  @media only screen and (min-width: 481px) {
    background-color: var(--tablet);
  }
  @media only screen and (min-width: 769px) {
    background-color: var(--desktop);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Caveat Brush", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
}

strong {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
}

section {
  max-width: 1920px;
  margin: 0 auto;
}

/* boxshadow */
/* -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); */

.prod-card {
  /* boxshadow */
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
}

.intro {
  height: 80vh;
}

#navMenu {
  backdrop-filter: blur(8px);
  transform: translateX(-100%);
  overflow: hidden;

  transition: transform 0.3s ease-out;
}

.contact-card {
  backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.6);
  /* boxshadow */
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}

.newsletter,
.owner,
.son,
.daughter {
  /* boxshadow */
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
}

/* Team Cards */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .owner,
  .son,
  .daughter {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: max-content 1fr;
    gap: 0 16px;
    place-items: center;
  }

  .team-photo {
    grid-column: 1 / 1;
    grid-row: 2 / 2;
    height: 100%;
  }

  .team-title {
    grid-column: 1 /1;
    grid-row: 1 / 2;
  }

  .team-info {
    grid-column: 2 / 2;
    grid-row: 1 / span 2;
    padding-right: 8px;
  }
}