/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  font-family: Arial, sans-serif; /* Set a default font family */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit; /* Ensure form elements inherit the font */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

@font-face { font-family: AlpengeistJF; src: url('/fonts/AlpengeistJF.ttf'); }

body {
  background-color: #060503;
  font-size: 100%;
}

#mainContent {
  width: 80%;
  min-height: 800px;
  margin: 0 auto;
  border: 1px solid #000;
  background-color: #cbb990;
}

.mainHeader {
  width: 100%;
  background-image: url("/imgs/wall-of-bricks.jpg");
  background-repeat: no-repeat;
  background-color: #000;
  display: flex; 
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

#logo {
  margin: 60px 0 0 60px;
  padding: 0;
}

.contact-info-wrapper {
  display: flex;
  justify-content: flex-end; /* Align the containing element to the right */
  padding-right: 20px; /* Add space from the edge of the page */
}

.contact-info {
  text-align: left; /* Left-align the text inside the element */
  color: white !important;
  font-size: 1.5rem !important; /* Increase the font size and use !important */
  font-weight: 900 !important; /* Make the font weight heavier and use !important */
  line-height: 2 !important; /* Increase line height for more spacing between lines */
  padding-right: 20px; /* Padding inside the element */
  margin-right: 20px; /* Margin to add space from the right edge of the page */
  max-width: 300px; /* Increase the width of the container */
}

.contact-info p {
  margin: 0;
}

.contact-info a {
  color: white !important;
  text-decoration: none;
  font-weight: bold;
}

.contact-info a:hover {
  text-decoration: underline;
}

.contact-info .social-icon {
  width: 32px !important; /* Increase icon size and use !important */
  height: 32px !important;
  vertical-align: middle;
  margin-right: 10px; /* Space between icons */
  display: inline-block; /* Make icons inline */
}

/* Responsive adjustments */
@media only screen and (max-width: 600px) {
  .contact-info {
    font-size: 1rem !important; /* Increase the font size and use !important */
    padding-right: 10px; /* Smaller padding on smaller screens */
  }
  .contact-info .social-icon {
    width: 15px;
    height: 15px;
  }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
  .contact-info {
    font-size: 1rem;
    padding-right: 15px;
  }
  .contact-info .social-icon {
    width: 15px;
    height: 15px;
  }
}

.mainWrapper {
  padding: 0;
  margin: 0;
}

.rowContents {
  height: 400px;
  padding: 0;
  margin: 0;
}

.product {
  position: relative;
  height: 400px;
  width: 100%;
}

.productWriteup {
  width: 40%;
  background: rgba(203, 185, 144, 0.5);
  border-radius: 25px;
  padding: 10px 40px;
  font-size: 1vw;
  line-height: 1vh;
  vertical-align: middle;
}

.productWriteup h1 {
  text-decoration: underline;
  text-decoration-color: red;
  font-family: AlpengeistJF;
  font-size: 1vw;
  line-height: 1vh;
  padding-top: 60px;
  margin: 0;
  padding: 0;
}

.productWriteup p span {
  font-size: 1em;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #mainContent {width: 100%;}
  .mainHeader {background-size: 300px;}
  .mainHeader #logo {width: 100px;margin: 5px 0 0 10px;}
  .rowContents {height: 220px;}
  .product {height: 220px;}
  .productWriteup {width: 80%;height: 220px;margin: auto 0;padding: 0 20px;font-size: 2.4vw;line-height: 1.5em;}
  .productWriteup h1 {font-size: 2em;line-height: 1em;padding-top: 20px;line-height: 1vh;}
  .productWriteup p span {font-size: 2em;line-height: 1em;padding:0;margin:0;}
  .contact-info {
    font-size: 0.8rem;
    padding-right: 15px;
  }
  .contact-info .social-icon {
    width: 15px;
    height: 15px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  #mainContent {width: 100%;}
  .mainHeader {background-size: 500px;}
  .mainHeader #logo {width: 200px;margin: 5px 0 0 30px;}
  .rowContents {height: 300px;}
  .product {height: 300px;}
  .productWriteup {width: 80%;height: 300px;margin: auto 0;padding: 0 30px;font-size: 2.4vw;line-height: 1.5em;}
  .productWriteup h1 {font-size: 2em;line-height: 1em;padding-top: 20px;line-height: 1vh;}
  .productWriteup p span {font-size: 2em;line-height: 1em;}
  .contact-info {
    font-size: 0.8rem;
    padding-right: 15px;
  }
  .contact-info .social-icon {
    width: 15px;
    height: 15px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #mainContent {width: 100%;}
  .mainHeader {background-size: 700px;}
  .mainHeader #logo {width: 300px;margin: 10px 0 0 40px;}
  .rowContents {height: 320px;}
  .product {height: 320px;}
  .productWriteup {width: 60%;height: 320px;margin: auto 0;padding: 0 40px;font-size: 2vw;line-height: 1.5em;}
  .productWriteup h1 {font-size: 2em;line-height: 1em;padding-top: 30px;line-height: 1vh;}
  .productWriteup p span {font-size: 2em;line-height: 1em;}
  .contact-info {
    font-size: 0.8rem;
    padding-right: 15px;
  }
  .contact-info .social-icon {
    width: 15px;
    height: 15px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  #mainContent {width: 80%;}
  .mainHeader {background-size: 800px;}
  .mainHeader #logo {width: 300px;margin: 10px 0 0 60px;}
  .rowContents {height: 400px;}
  .product {height: 400px;}
  .productWriteup {width: 60%;height: 400px;margin: auto 0;padding: 0 40px;font-size: 1.8vw;line-height: 1.5em;}
  .productWriteup h1 {font-size: 2em;line-height: 1em;padding-top: 30px;line-height: 1vh;}
  .productWriteup p span {font-size: 2em;line-height: 1em;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  #mainContent {width: 80%;}
  .mainHeader {background-size: 800px;}
  .mainHeader #logo {width: 300px;margin: 10px 0 0 60px;}
  .rowContents {height: 400px;}
  .product {height: 400px;}
  .productWriteup {width: 40%;height: 400px;margin: auto 0;padding: 0 40px;font-size: 1.2vw;line-height: 1.5em;}
  .productWriteup h1 {font-size: 2em;line-height: 1em;padding-top: 60px;line-height: 1vh;}
  .productWriteup p span {font-size: 2em;line-height: 1em;}
}

/* Below this is the footer section of the CSS. */
footer {
  width: 100%;
  clear: both;
  text-align: center;
  padding: 40px 0;
}