/* Global Styles */

body {
    background-color: #F5F5DC; /* Beige */
  }
  
  /* Inventory Form Styles */
  
  #inventory-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  /* Responsive Styles for Small Devices */
  
  @media (max-width: 768px) { /* 576 small 768 medium */
    #inventory-form {
      grid-template-columns: 1fr;
    }
  }
  
  /* Anuncios Column Styles */
  
  /* #anuncios {
    position: relative;
    float: right;
    width: 20%; 
  }   */
  
  /* Responsive Styles for Mobile Devices in Portrait Orientation */
  
  @media only screen and (orientation: portrait) and (max-width: 768px) {
    #anuncios {
      position: relative;
      float: none;
      width: 100%; /* full width for mobile devices */
      margin-top: 20px; 
    }
  }  
  
  .anuncios-vertical {
    height: 20%;
    /* position: fixed; */
    padding-top: 20px;
    top: 10 px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .my-btn {
    border: solid;
    border-radius: 12px;
    border-style: outset;
  
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #EEEEEE;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  
  }
  
  .my-btn:hover {
    background-color: #444;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  }
  
  .my-add {
    /* animation: pulsate 1.5s infinite alternate;  /*not working yet oa*/
     box-shadow: 0 0 .2rem ,
               0 0 .2rem darkorchid,
               0 0 1rem darkorchid,
               0 0 0.4rem darkorchid,
               0 0 0.8rem darkorchid,
               inset 0 0 0rem darkorchid; 
   }
  
   .my-carousel  {
    border-color: rgba(0, 0, 0, 0.50);
    border-style: solid;
    border-radius: 6px;
    border-spacing: 3px;
  }
  
  .tv-base-old {
    color: rgba(0, 0, 0, 0.25);
    text-align: center;
    font-weight: 600;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
   }
  
   .tv-base { /*not working yet*/
    background-image: url("/tv-screen.png");
   }
  
   .col-ver {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* or set a specific height */
  }
  
  .tv {
    background-image: url("../img/tv_tall_base-removebg.png");
    background-repeat: no-repeat;
    background-size: 90% auto;
    background-position: bottom;
  }