/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body, html {
    height: 100%;
    margin: 0;
  }
  
  .bgimg {
    /* Background image */
    background-image: url('christmas-bokeh-background.jpg');
    /* Full-screen */
    height: 100%;
    /* Center the background image */
    background-position: center;
    /* Scale and zoom in the image */
    background-size: cover;
    /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
    position: relative;
    /* Add a white text color to all elements inside the .bgimg container */
    color: white;
    /* Add a font */
    font-family: "Courier New", Courier, monospace;
    /* Set the font-size to 25 pixels */
    font-size: 25px;
  }

  a:link, a:visited {            /* anchor links, and visited anchor links */
    color: white;
    text-decoration: none;                            /* disable underline */
  }
  a:hover {                                 /* when anchor link is hovered */
    color: rgb(96, 96, 96);
  }
  a:active {                                /* when anchor link is clicked */
    color: rgb(96, 96, 96);
  }
  
  /* Position text in the top-left corner */
  .topleft {
    position: absolute;
    top: 0;
    left: 16px;
  }

  /* Position text in the top-right corner */
  .topright {
    position: absolute;
    top: 0;
    right: 50px;
    text-align: right;
  }
  
  /* Position text in the bottom-left corner */
  .bottomleft {
    position: absolute;
    bottom: 0;
    left: 16px;
  }
  
  /* Position text in the middle */
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  /* Style the <hr> element */
  hr {
    margin: auto;
    width: 40%;
  }

  #menu {
    position: absolute;      /* menu position unaffected by other elements */
    right: 0;                       /* zero pixels from the right boundary */
    background: rgb(239, 239, 239);
    border: 0.15rem solid rgb(0, 0, 0, 0.4);
    visibility: hidden;        /* visibility property supports transitions */
    opacity: 0;      /* opacity + visibility transition = menu fade effect */
    z-index: 1;              /* ensure menu appears over all other content */
  }
  #menuitems {               /* menu is implemented as a flexbox container */
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }
  #menuitems h3 {
    border-top: 0.15rem solid rgb(0, 0, 0, 0.1);  /* light horizontal rule */
  }
  #menuitems .sectrule {
    border-color: rgb(0, 0, 0, 0.25);            /* darker horizontal rule */
  }
  #menuitems .menuhead {
    border-top: none;
  }
  #menuitems h3:hover {
    background-color: rgb(0, 0, 0, 0.1);     /* gray of rollover menuitems */
  }
  .menubutton {
    text-align: right;
    cursor: pointer;            /* indicates it can be clicked like a link */
    user-select: none;            /* user cannot select the button as text */
  }
  #menuitems .alignright {
    text-align: right;            /* right-aligned menu item text (unused) */
  }
  #header h1.menubutton {
    display: none;        /* in default view (landscape), hide menu button */
    border: 0.15rem solid rgb(0, 0, 0, 0);   /* (invisible) alignment shim */
  }