body.main {
	background: url(/images/page-background.png) no-repeat center fixed;
	background-color: #262262;
	background-size: contain;
	color: black;
	font-family: Arial;
	font-size: 20px;
}

:root {
        --blue: #262262;
        --red: #bf1e2e;
        --white: #f4f4f4;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        font-family: 'Courier New', monospace;
        background-color: var(--blue);
        color: var(--white);
        line-height: 1.6;
        position: relative;
        overflow-x: hidden;
    }
    /* Background noise texture */
    body::before {
        content: "";
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4/fv/AwAI/AL+ItRx7gAAAABJRU5ErkJggg==');
        opacity: 0.15;
        pointer-events: none;
        z-index: 1;
    }
    header {
        text-align: center;
        padding: 1rem 1rem;
        background: var(--red);
        position: relative;
        z-index: 2;
    }
    header img {
        max-width: 240px;
        height: auto;
        filter: drop-shadow(2px 2px 0 var(--blue));
    }
    main {
        padding: 2rem 1rem;
        max-width: 900px;
        margin: auto;
        position: relative;
        z-index: 2;
    }
    h1 {
        font-family: 'Bebas Neue', sans-serif;
        color: var(--red);
        font-size: 3rem;
        margin-bottom: 1rem;
        transform: rotate(-1deg);
        text-shadow: 2px 2px var(--blue);
        transition: transform 0.3s ease;

    }
    h1:hover {
        transform: rotate(1deg) scale(1.02);
    }
    p {
        margin-bottom: 1rem;
        font-size: 1.1rem;
    }
    a {
        color: var(--red);
        text-decoration: none;
    }
    a:hover {
        color: var(--white);
        text-decoration: none;
    }
    .cta {
        display: inline-block;
        background: var(--red);
        color: var(--white);
        padding: 0.75rem 1.5rem;
        text-decoration: none;
        font-weight: bold;
        border-radius: 3px;
        transform: rotate(-2deg);
        box-shadow: 2px 2px var(--blue);
        transition: all 0.3s ease;
    }
    .cta:hover {
        background: #a41825;
        transform: rotate(2deg) scale(1.05);
    }
    footer {
        text-align: center;
        padding: 1.5rem;
        font-size: 0.9rem;
        background: #1b1b42;
        margin-top: 2rem;
        position: relative;
        z-index: 2;
    }
    @media (max-width: 600px) {
        h1 {
            font-size: 2rem;
        }
        header img {
            max-width: 180px;
        }
    }

    @keyframes myAnimation {
    0% {color: white};
    25% {color: red;}
    50% {color: blue;}
    75% {color: yellow;}
    100% {color: green;}
    }
    .badgediscount {
        color: var(--red);
        animation-name: myAnimation;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

.three-columns-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: no-wrap;
  gap: 1.5rem;
  color: #f5f5f5;
  }

.three-columns {
    padding: 2.5rem 1rem;
    background: var(--blue);
    color: #f5f5f5;
  }

.column-left {
  flex: 3 1 0;
  min-width: 250px;
}
.column-right {
  flex: 7 1 0;
  min-width: 300px;
}


  .column p {
    font-size: 0.98rem;
    line-height: 1.6;
  }


    /* Shopping Styles */

    /* Department Layout */
.department_teaser_container {
    width: 50%px;
    margin: auto;
}
.department_teaser {
    display: inline;
    text-align: center;
    position: relative;
}
.department_image {
    opacity: 1;
    display: inline;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;   
}
.department_middle {
  transition: .2s ease;
  opacity: 0;
  position: absolute;
  top: -300%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.department_teaser:hover .department_image {
  opacity: 0.3;
}

.department_teaser:hover .department_middle {
  opacity: 1;
}

.department_text {
  background-color: var(--red);
  color: white;
  border: solid 1px white;
}


    /* Product Layout */
.product_container {
    background-color: var(--blue);
}
.product_teaser {
    display: inline-block;
    text-align: center;
}
.main_product_image {
    width: 50%;
    height: auto;
}
.product_thumb {
    height: 100px;
    width: auto;
}
.add_to_cart_button {
    border: solid 1px white;
    color: white;
    background: var(--red);
    padding: 2px;"
}
.cart_select {
    border: solid 1px white;
    color: white;
    background: var(--red);
    padding: 2px;"
}
.input {
    border: solid 1px white;
    color: white;
    background: var(--red);
    padding: 2px;"
}





.product_detail_href {
    color: white;
    text-decoration: none;
}
.product_detail_href:hover {
    hover: var(--red);
}
.more_link {
    display: inline;
    color: blue;
    text-decoration: none;
}




/* Cart and Check out layout*/


.checkout_row {
    content: "";
    display: table;
    clear: both;
}
.checkout_row_column {
    float: left;
    width: 50%;
}










/* final thingybobs */


ul {
  padding-left: 2rem;  /* increase this value for more indent */
}

@media (max-width: 768px) {
  .three-columns-inner {
    flex-wrap: wrap;        /* allow stacking */
    flex-direction: column; /* stack vertically */
  }
}