/* Whole WebPage Layout */
html {
    height: 100%;
    width: 100%;
    background-image: url('appearance/back.jpeg') ;
    /* ^^^
    background-image requires a url (image) which can then be displayed in the 'background' of anything
    */
    background-size: contain;
  }
  
  /* Heading Format */
  h1 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Main Text Format For User */
  .info {
    color: #171616;
    border-style: outset;
    /* ^^^
    a type of border style
    */
    display: flex;
    justify-content: center;
    align-items: center;
    /* ^^^
    This CSS code uses the display: flex; property, which is a layout property that allows elements to align and distribute space within a container. justify-content: center; centers the content horizontally within the container, and align-items: center; centers the content vertically within the container. This combination of properties ensures that the image is positioned at the center of its container.
    */
    background-color: #b3b3b3;
  }
  
  /* Bulb Image's Background Border Format */
  #border {
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('appearance/thoughts.png');
    position: absolute;
    bottom: 0px;
    background-position-x: center;
    
    background-repeat: no-repeat;
    height: calc(100% - 200px);
    width: 100%;
  }
  
  /* Positioning Of Light Bulb Object */
  #myImage {
    position: absolute;
    top: 10%;
    left: 51%;
    /* ^^^ position property 'absolute' allows 'top', 'right' or 'left' to be used,
    allowing more flexibilty in positioning the bulb.
    */
  }