#Title
{
  text-align: center;
  font-size: 5vw;
  font-weight: bold;
  color: rgba(225,211,193,0.7);

  height: 46vh;
  display: flex;
  justify-content: center;   /* keep text horizontally centered */
  align-items: flex-end;     /* push text to bottom */
}

#Description
{
  text-align: center;
  font-size: 1.5vw;
  color: rgb(252,245,235);
  padding: 1vh;
  
  height: 25vh;
  display: flex;
  justify-content: center;   /* keep text horizontally centered */
  align-items: flex-start;
}

#ArrowContainer
{
  display: flex;
  justify-content: center; /* horizontal */
  align-items: flex-start;
  height: 25vh;
  background: none;
}

#Arrow
{
  height: 10vh;
  width: 10vh;
  position: relative;
}

#Arrow_Normal
{
  background-image: url("../assets/others/arrow.png");
}

#Arrow_Highlight
{
  background-image: url("../assets/others/arrow_highlight.png");
}

#Frame
{
  background-color: rgba(252,245,235,0.7);
  padding: 8vh;
  text-align: center;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-bottom: 5vw;
  font-size: 20px;
}

.WebContentGrid1
{
  display: grid;
  grid-template-columns: 7fr 5fr;
}

.WebContentGrid2
{
  display: grid;
  grid-template-columns: 5fr 7fr; /* two equal columns */
}

.WebContentSection
{
  min-height: 30vh;
  vertical-align: middle;
  display: flex;
  align-items: center;
  margin: 5px;
  position: relative;
  transition: background-size 3s ease;
  background-size: 100%;
}

.WebContentSection > *
{
  transition: opacity 0.3s ease;
}

#Animal
{
  background-image: url("../content/Animal.jpg");
  background-repeat: no-repeat;
  background-position: center 30%;
}

#Portrait
{
  background-image: url("../content/Portrait.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

#Landscape
{
  background-image: url("../content/Landscape.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

#AboutUs
{
  background-image: url("../content/AboutUs.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

.WebContentMenu
{
  margin-left: 3.5vw;
  font-size: 2.5vw;
  color: rgb(252,245,235);
  position: relative;
  display: inline-block;
  z-index: 2;
}

.WebContentMenu::after 
{
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 0.25vw;
  background-color: rgb(252,245,235);
  transition: width 0.3s ease;
}

.WebContextHide
{
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background-color: rgb(0, 0, 0);
  z-index: 1;
}


@media (hover: hover) and (pointer: fine)
{
  .WebContentSection:hover .WebContentMenu::after
  {
    width: 100%;
  }

  .WebContentSection:hover .WebContextHide
  {
    opacity: 0;
    cursor: pointer;
  }

  .WebContentSection:hover
  {
    background-size: 110%;
  }
}

@media (max-width: 768px)
{
  #Title
  {
    font-size: 8vh;
  }

  #Description
  {
    font-size: 3vh;
  }

  #Arrow
  {
    height: 10vh;
    width: 10vh;
  }

  .WebContentGrid1
  {
    display: block;
  }

  .WebContentGrid2
  {
    display: block;
  }

  #Frame
  {
    background-color: antiquewhite;
    padding: 5px;
    text-align: center;
    margin: 0px;
  }

  #WebContentMain
  {
    background-color: antiquewhite;
    padding: 5px;
    text-align: center;
    margin: 0px;
  }

  .WebContentMenu
  {
    font-size: 3vh;
  }

  .WebContextHide
  {
    opacity: 0;
  }
}