/* Set height to 100% for body and html to enable the background image to cover the whole page: */
* {
    margin: 0px;
}


body, html {
    height: 100%
    
    
  }
  
  .bgimg {
    background-color: rgba(0,0,0,.95);
    /* 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: #ffc301;
    /* Add a font */
    font-family: "Courier New", Courier, monospace;
    /* Set the font-size to 25 pixels */
    font-size: 25px;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bgimg::before {
    content: "";
    background-image: url('/img/IMG_0882.JPG');
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.55;
  }
  
  /* Position text in the top-left corner */
  .topleft {
    position: absolute;
    top: 0;
    left: 16px;
  }
  
  /* 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: 20px;
    width: 90%;
  }

  a {
    color: #ffc301;
    text-decoration: none;
    margin: 15px;
  }

  @media screen and (max-width: 700px){
    .bgimg {
    background-color: rgba(0,0,0,.95);
    /* 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: #ffc301;
    /* Add a font */
    font-family: "Courier New", Courier, monospace;
    /* Set the font-size to 25 pixels */
    font-size: 25px;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    .bgimg::before{
    content: "";
    background-image: url('/img/20210515142349_IMG_0858-01.jpeg');
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.55;
    }

    .middle {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 20px;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    .middle h1 {
        font-size: 28px ;
    }

    a {
        margin: 15px;
        font-size: 20px;
      }
    img {
        justify-content: center;
        width: 160px;
    }
  }

  @media only screen and (min-width: 700px) and (max-width: 912px){
    .bgimg {
    background-color: rgba(0,0,0,.95);
    /* 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: #ffc301;
    /* Add a font */
    font-family: "Courier New", Courier, monospace;
    /* Set the font-size to 25 pixels */
    font-size: 25px;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    .bgimg::before{
    content: "";
    background-image: url('/img/20210515142349_IMG_0858-01.jpeg');
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.55;
    }

    .middle {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 35px;
        font-weight: bold;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    .middle h1 {
        font-size: 65px ;
    }

    a {
        margin: 15px;
        font-size: 30px;
      }
    img {
        justify-content: center;
        width: 220px;
    }
  }