/* Applies to the entire body of the HTML document (except where overridden by more specific
selectors). */
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* =========================== High level items ================================ */

html {
  margin: 0;
  margin-top: 0;
  padding: 0;
  height: 100%;
}

body {
    margin: 0px 0px;
    margin-top: 0;
    background-color: rgb(255,255,255);
    font-family: "Poppins-Regular", sans-serif;
    font-size: 14px;
    text-align: center;
    color: rgb(51,51,51);
    padding: 0px;
    border-collapse: collapse;
  }

  h1 {
    margin-top: 0;
    margin: 30px;
    font-family: "Poppins", sans-serif;
    font-size: 40px;
    text-align: center;
    color: rgb(51,51,51);
  }

  h2 {
    margin: 25px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    text-align: center;
    color: rgb(100,100,100);
    line-height: 0.8;
  }

  /* ============================================== Landing Page ========== */

  .landing-page{
    background-color: rgb(35,35,35);
    height: 100vh;
  }

  .landing-page-content{
    position: relative;
      top: 45%;
      transform: translateY(-50%);
  }

  .landing-page-heading{
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    font-weight: 200;
    color: white;
    letter-spacing: 0.6rem;
  }

  .landing-page-sub-heading{
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 200;
    margin-top: 15px;
    color: rgb(150,150,150);
  }

  /* =========================================== Main page ============ */

  .main-page{
    display: none;
  }

  /* =============================================== Top Banner ============ */

  .top-banner{
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: white;
    margin: 0px;
    background-color: rgb(51,51,51);
    text-align: center;
  }


    /* =============================================== Menu Button ============ */

  .menu-button-container
  {
    text-align: right;
    margin: 4px 0;
  }

  .menu-button
  {
    width: 50px;
    margin-right: 10px; 
    display: inline-block;
    text-align: right;
  }

  /* =============================================== Room Selection Grid ============ */

  .room-selection-grid
  {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
  
    .room-selection-box
    {
      background-color: rgb(242,242,242);
      width: 120px;
      height: 120px;
      border-radius: 5px;
      margin: 5px;
      display: inline-block;
      text-align: center;
      padding-top: 0px;
    }
  }

  .room-selection-box-icon
  {
   width: 70px;
   margin-top: 10px;
   display: inline-block;
  }

  .fullPrice
  {
    color: rgb(170,170,170);
    /*text-decoration: line-through;*/
    font-size: 11px;
  }

   /* End of Room Selection Grid */


  /* =============================================== Shopping Basket ================ */

.shopping-basket-container
  {
 
    text-align: center;


  }

  .shopping-basket
  {
    background-color: rgb(229,229,229);
    width: 780px;
    height: 200px;
    border-radius: 5px;
    margin: 40px, 40px;
    display: inline-block;
    text-align: left;

  }

  .shopping-basket-left
  {

    width: 600px;
    display: inline-block;
  }

  .shopping-basket-right
  {
  
    width: 120px;
    display: inline-block;
    text-align: center;

  }

  .shopping-basket-heading
  {
    margin-top: 0;
    margin: 30px;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    text-align: left;
    color: rgb(51,51,51);
  }

  .shopping-basket-contents
  {
    margin-top: 0;
    margin: 30px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    text-align: left;
    color: rgb(51,51,51);
  }

  .shopping-basket-price
  {
    margin-top: 0;
    margin: 30px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    text-align: left;
    color: rgb(100,100,100);

  }

  .shopping-basket-next-button
  {
    border: none;
    color: rgb(255,255,255);
    background-color: rgb(51,51,51);
    padding: 10px 30px;
    text-align: left;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 100px;
    display: inline-block;

  }

    .shopping-basket-next-text
    {
      position: relative;
      top: 50%;
      /*transform: translateY(-50%);*/
      display: inline-block;
    }

    .right-arrow-icon
    {
      position: relative;
      width: 30px;
      top: 50%;
      transform: translateY(20%);
      margin-left: 20px;
    }


  .homepage
  {
    visibility: visible;
  }

  .room-selection-page
  {
    display: none;
  }

  /* =========================== Legacy =================== */





  .room{
    margin-top: 3px;
    font-family: "Poppins-regular", sans-serif;
    font-size: 16px;
    text-align: center;
    color: rgb(100,100,100);
  }

  .price{
    margin-top: 3px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    text-align: center;
    color: rgb(160,160,160);
  }

  .best-seller{
    margin: 40px;
    background-color: white;
    text-align: center;
    color: black;
    border-style: solid;
    border-color: rgb(51,51,51);
    border-width: 2px;
    border-radius: 5px;
    padding: 20px;
  }

  .OurBestSellers{
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    text-align: centre;
    padding: 20px;
  }



  .centred-list
  {
    text-align: center;
  }

  ul.my-centred-list
  {
    color: rgb(100,100,100);;
    display: inline-block;
    text-align: left;
    line-height: 2.0;
  }


  .myDiv {
    margin: 0px;
    background-color: rgb(51,51,51);
    text-align: center;
    color: rgb(255,255,255);
  }

  .button {
    border: none;
    color: rgb(255,255,255);
    background-color: rgb(51,51,51);
    padding: 15px 100px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }


  .scrolling-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
   
    .card {
      display: inline-block;
      padding: 8px;
      font-size: 16px;
    }
  }

/* ========================================== Bottom Banner ============== */
  
  .bottom-banner{
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: white;
    margin: 0px;
    background-color: rgb(100,100,100);
    text-align: center;
    padding: 20px;
  }


/* =============================== Test items ===================== */

.side-by-side-box-left
  {
    background-color: rgb(200,0,0);
    width: 800px;
    height: 120px;
    border-radius: 5px;
    margin: 5px;
    display: inline-block;
    text-align: center;
    padding-top: 0px;
  }
 
  .side-by-side-box-right
  {
    background-color: rgb(100,0,0);
    width: 200px;
    height: 120px;
    border-radius: 5px;
    margin: 5px;
    display: inline-block;
    text-align: center;
    padding-top: 0px;
  }

  .surrounding-box
  {
    background-color: rgb(200,200,180);
    width: 1100px;
    height: 200px;
    border-radius: 5px;
    margin: 5px;
    display: inline-block;
    text-align: center;
    padding-top: 0px;
  }