@import url('https://fonts.googleapis.com/css2?family=Cabin&family=Cabin+Condensed&family=Dancing+Script:wght@600&family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/*
Main css sheet, contains most of the universal style elements
Exceptions: The technical aspects of the Navbar & FlexBox 
*/

:root{
  --backgroundColor: rgba(255, 255, 255, 0.75);

  --navColor: rgb(82, 50, 25);
  --navText: white;

  --navHoverColor: #555;
  --navHoverText: white;

  --barColor: rgba(111,85,62);
  --barText: white;

  --footerColor: rgba(79,94,99);
  --footerText: rgba(255, 255, 255, 0.75);

  --contentBackground: #fff;
  --contentBorder: #f2f2f2;
  
  --h1Text: white;
  --h2Text: #282828;
  --pText: white;
  --rateText: #282828;
  --bodyText: #666;
}

html,
body{
  margin: 0;
  height: 100%;
}

header{
  margin: 0;
}

body {
  background: url('/images/SolidWood.jpg') var(--backgroundColor) center/cover fixed;
  background-blend-mode: screen;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  padding-top: 50px;
  min-height: 100vh;
  box-sizing: border-box;
}

main{
  background-size: cover;
  background-blend-mode: screen;
  margin: 0;
}

h1 {
  text-align: center;
  font-family: 'Montserrat', cursive;
  font-size: 1rem;
}

p {
  text-align: center;
}

a {
  text-align: center;
}


/*SVG Graphics*/
.svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-logo {
  fill: black;
}

.svg-logo:hover{
  fill: #67869b;
}


/*Review Carosel*/
#customer-reviews {
  text-align: center;
  max-width: 850px;
  margin: 20px auto;
  background-color: var(--contentBorder);
  padding: 5px 20px 20px 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.review-carousel {
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow-x: auto;
}

.review {
  flex: 1;
  min-width: 200px; /* ORIGINAL CODE: flex-basis: 48%; This is for having a 2 by 2 layout. */
  padding: 15px;
  border-radius: 5px;
  background-color: var(--contentBackground);
  box-sizing: border-box; /* Ensure padding is included in the width */
}

 /* Add shadows on hover */
 .review-carousel:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.review img {
    max-width: 100%;
    height: auto;
    width: 100px; /* Set a specific width for consistency, adjust as needed */
    height: 100px; /* Set a specific height for consistency, adjust as needed */
    object-fit: cover; /* Maintain aspect ratio while covering the specified dimensions */
    border-radius: 50%; /* For a circular shape, adjust as needed */
    margin-bottom: 10px;
}

.review p {
  margin-bottom: 10px;
}

.author {
  font-style: italic;
  color: var(--bodyText);
}

/*Footer*/
footer {
  background-color: var(--footerColor);
  color: var(--footerText);
  text-align: center;
  width: 100%;
  padding: 10px;
}

footer p {
  color: var(--footerText);
  line-height: 3;
  margin: 0;
}

footer a {
  color: wheat;
  text-decoration: none;
}

footer a:hover {
  color: var(--footerText);
}

/* Responsive styles */
@media (max-width: 600px) {
  footer {
      padding: 20px;
  }
}