/* General Styles */
* {
    box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.4;
  font-size: 17.5px;
}

/* Base Header Styles */
header {
  position: relative;
  text-align: left;
  background-size: cover;
  height: auto;
}

.top-image {
  position: relative;
  overflow: hidden;
}

.top-image img:first-child {
  width: 100%;
  height: auto;
  display: block;
}

#site-logo {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  max-width: 250px;
  height: auto;
  z-index: 10;
  background-color: #36454F; /* match header background */
  border-radius: 8px; /* soften the square shape */
  padding: 1px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  #site-logo {
    max-width: 160px;
    left: 10px;
  }

  .top-image img:first-child {
    max-height: 100px;
    object-fit: cover;
  }

  .top-image {
    max-height: 100px;
  }

  nav a {
    margin: 0 3px;
    font-size: 14px;
    padding: 4px 6px;
  }
}

/* Navigation */
nav {
  display: flex;
  justify-content: center;
  background-color: #353739;
  padding: 10px 0;
  
}

nav a {
  margin: 0 15px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: #007BFF;
}

/* Top Image */
.top-image img {
  width: 100%;
  height: auto;
}

/* Content Section */
.content {
  max-width: 790px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Footer */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #FFFFFF;
  color: black;
  font-size: 12px;
}

.footer a {
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}
        .article-list {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
        .article-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            padding-bottom: 15px;
        }
        .article-item img {
            width: 150px;
            height: auto;
            margin-right: 15px;
            border-radius: 5px;
        }
        .article-content {
            flex: 1;
        }
        .article-title {
            font-size: 18px;
            font-weight: bold;
            margin: 0 0 10px;
            text-decoration: underline;
        }
        .article-title:hover {
            text-decoration: none;
        }
        .article-description {
            margin: 0;
            color: #555;
            font-size: 18px;
        }
        .article-separator {
            border-top: 1px dashed #000;
            margin: 20px 0;
        }
/* Responsive image styling */
.responsive-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* Centers the image */
}
/* CSS for the container list */
    .aff-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 20px;
    }

    /* Individual section styling */
    .aff {
      display: flex;
      flex-wrap: wrap;
      align-items: center; /* Center content vertically */
      justify-content: center; /* Center horizontally */
      gap: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      padding: 10px;
      border-radius: 8px;
    }

    .aff img {
      width: 100%;
      max-width: 300px;
      height: auto;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-right: 10px;
    }

    .aff .aff-content {
      flex: 1;
      text-align: left;
    }

    .aff table {
      width: 100%;
      background-color: #ffffff;
      border-spacing: 0;
      padding: 4px;
      border-radius: 4px;
    }

    .aff a {
      text-decoration: underline;
      color: #007BFF;
      font-weight: bold;
    }

    .aff a:hover {
      text-decoration: none;
    }

    .dottedline {
      border-top: 1px dashed #000;
      margin-top: 10px;
    } 
h1 {
    margin-top: 0; /* Ensures no extra space above the <h1> */
  margin-bottom: 10px; /* Adds 20 pixels of space below the <h1> */
}

h2 {
  margin-top: 0; /* Ensures no extra space above the <h2> */
  margin-bottom: 0; /* Adds 20 pixels of space below the <h2> */
  color: #475e71;
}   
h3 {
  margin-top: 0; /* Ensures no extra space above the <h3> */
  line-height: 1.2; /* Adjust line height if necessary */
  margin-bottom: 2px; /* Reduce this value */
}   
h4 {
  margin-top: 0; /* Ensures no extra space above the <h4> */
  margin-bottom: 0; /* Adds 20 pixels of space below the <h4> */
}  
p {
  margin-top: 0; /* Removes default space above <p> */
}
button {
    display: block; /* Forces the button to be a block element */
    margin: 0 auto; /* Centers the button horizontally */
    padding: 10px 15px; /* Adjust padding for better responsiveness */
    font-size: 14px; /* Adjust font size for smaller screens */
}
.imagesale {
    text-align: center; /* Centers the content inside the div */
    margin: 20px 0; /* Adds spacing around the image */
}

.imagesale img {
    max-width: 100%; /* Ensures the image is responsive */
    height: auto; /* Maintains aspect ratio */
    display: inline-block; /* Ensures the image is treated as an inline element for centering */
}
/* Adjust <br> spacing */
br {
  display: block; /* Ensures <br> acts as a line break */
  line-height: 1.2; /* Adjusts vertical space created by <br> */
  margin: 0; /* Removes any default margin */
}
/* amabutton.css */

.amazon-buttons-container {
    display: inline-flex; /* Align buttons horizontally */
}

.amazon-button {
    background-color: green !important; /* Button background color */
    color: white !important; /* Button text color */
    text-decoration: none !important; /* Remove underline */
    padding: 10px 20px !important; /* Padding for button size */
    font-size: 14px !important; /* Text size */
    border-radius: 5px !important; /* Rounded corners */
    margin-right: 10px !important; /* Add space to the right of each button */
    border: none !important; /* No borders */
    display: inline-block !important; /* Make <a> behave like a button */
    text-align: center !important; /* Center the text */
    cursor: pointer !important; /* Pointer cursor on hover */
    transition: background-color 0.3s ease !important; /* Smooth hover effect */
}

.amazon-button:last-child {
    margin-right: 0 !important; /* Remove margin for the last button */
}

.amazon-button:hover {
    background-color: #93C47D !important; /* Change background color on hover */
}
.video-container {
  position: relative;
  width: 100%;  /* Full viewport width */
  padding-bottom: 56.25%;  /* Maintains 16:9 aspect ratio based on viewport width */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}/* amazonscratch.css */
.paapi5-pa-ad-unit {
    border: 1px solid #eee;
    margin:2px;
    position: relative;
    overflow: hidden;
    padding: 22px 20px;
    line-height: 1.1em;
}

.paapi5-pa-ad-unit * {
    box-sizing: content-box;
    box-shadow: none;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    outline: 0;
    padding: 0;
}

.paapi5-pa-ad-unit.pull-left {
    float: left;
    margin-right: 20px; /* Adds space to the right of the image */
    margin-bottom: 10px; /* Adds space below the image */
}

.paapi5-pa-ad-unit.pull-right {
    float: right;
}

.paapi5-pa-ad-unit a {
    box-shadow: none !important;
}

.paapi5-pa-ad-unit a:hover {
    color: #c45500;
}

.paapi5-pa-product-container {
    width: 180px;
    height: 210px;
}
/* fixed width and height of product image to 150px */
.paapi5-pa-product-image {
    display: table;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    text-align: center;
}

.paapi5-pa-product-image-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.paapi5-pa-product-image-link {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.paapi5-pa-product-image-source {
    max-width: 150px;
    max-height: 150px;
    vertical-align: bottom;
}

.paapi5-pa-percent-off {
    display: block;
    width: 32px;
    height: 25px;
    padding-top: 8px;
    position: absolute;
    top: -16px;
    right: -16px;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    background-color: #a50200;
    background-image: -webkit-linear-gradient(top, #cb0400, #a50200);
    background-image: linear-gradient(to bottom, #cb0400, #a50200);
}

.paapi5-pa-ad-unit.hide-percent-off-badge .paapi5-pa-percent-off {
    display: none;
}

.paapi5-pa-product-details {
    display: inline-block;
    max-width: 100%;
    margin-top: 11px;
    text-align: center;
    width: 100%;
}

.paapi5-pa-ad-unit .paapi5-pa-product-title a {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #0066c0;
    text-decoration: none;
    margin-bottom: 3px;
}

.paapi5-pa-ad-unit .paapi5-pa-product-title a:hover {
    text-decoration: underline;
    color: #c45500;
}

.paapi5-pa-ad-unit.no-truncate .paapi5-pa-product-title a {
    text-overflow: initial;
    white-space: initial;
}

.paapi5-pa-product-offer-price {
    font-size: 13px;
    color: #111111;
}

.paapi5-pa-product-offer-price-value {
    color: #AB1700;
    font-weight: bold;
    font-size: 1.1em;
    margin-right: 3px;
}

.paapi5-pa-product-list-price {
    font-size: 13px;
    color: #565656;
}

.paapi5-pa-product-list-price-value {
    text-decoration: line-through;
    font-size: 0.99em;
}

.paapi5-pa-product-prime-icon .icon-prime-all {
    background: url("https://images-na.ssl-images-amazon.com/images/G/01/AUIClients/AmazonUIBaseCSS-sprite_2x_weblab_AUI_100106_T1-4e9f4ae74b1b576e5f55de370aae7aedaedf390d._V2_.png") no-repeat;
    display: inline-block;
    margin-top: -1px;
    vertical-align: middle;
    background-position: -192px -911px;
    background-size: 560px 938px;
    width: 52px;
    height: 15px;
}

.paapi5-pa-product-offer-price,
.paapi5-pa-product-list-price,
.paapi5-pa-product-prime-icon {
    display: inline-block;
    margin-right: 3px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .paapi5-pa-ad-unit .paapi5-pa-product-prime-icon .icon-prime-all {
        background: url("https://images-na.ssl-images-amazon.com/images/G/01/AUIClients/AmazonUIBaseCSS-sprite_2x_weblab_AUI_100106_T1-4e9f4ae74b1b576e5f55de370aae7aedaedf390d._V2_.png") no-repeat;
        display: inline-block;
        margin-top: -1px;
        vertical-align: middle;
        background-position: -192px -911px;
        background-size: 560px 938px;
        width: 52px;
        height: 15px;
    }
}

/* css for mobile devices when device width is less than 441px*/
@media  screen and (max-width: 440px) {
    .paapi5-pa-ad-unit {
        float: none;
        width: 100%;
    }

    .paapi5-pa-product-container {
        margin: 0 auto;
        width: 100%;
    }

    .paapi5-pa-product-details {
        text-align: center;
        margin-top: 11px;
    }
    
    .xcontainer {
            width: 90%;
            max-width: 1200px;
            margin: auto;
            background: white;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .xheader {
            text-align: center;
            background: #475e71;
            padding: 20px;
        }
        .xheader img {
            max-width: 100%;
            height: auto;
        }
        .xcontent {
            padding: 20px;
            line-height: 1.6;
        }
        .xarticle-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .xarticle-item {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .xarticle-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
        .xarticle-content {
            padding: 15px;
        }
        .xarticle-title {
            font-weight: bold;
            font-size: 18px;
            margin-top: 10px;
        }
        .xarticle-description {
            font-size: 14px;
            color: #555;
            margin-top: 5px;
        }
        .xfooter {
            text-align: center;
            padding: 20px;
            background: #333;
            color: white;
        }
        .xfooter a {
            color: lightgray;
            text-decoration: none;
            margin: 0 10px;
        }
@media screen and (max-width: 768px) {
  nav a[href] {
    margin: 0 4px !important;
    font-size: 17px !important;
    padding: 6px 6px !important;
    letter-spacing: -0.2px !important;
  }
}