@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400&display=swap');

/*Global variables*/
:root
{
    --light1a: 240,228,215;
    --light1b: 193,176,159;
    --dark1a:  91,116,153;
    --dark1b:  75,91,115;
    --med1a:   173,175,153;
    --med1b:   142,148,114;
    --dark2a:  109,72,100;
    --dark2b:  61,40,55;
}

html
{
  width: 100vw;
  height: 100vh;
}

/*Shared style elements*/
body
{
  background-color: rgb(var(--light1b));
  overflow-x: hidden;
}



.titlebar,.topbar
{
  position: fixed;
  left:0;
  top:0;
  width:100%;
  height:10%;
}

.topbar
{
  background-image: linear-gradient(to bottom, rgb(var(--dark1b)), rgb(var(--dark1a)));
  background-color: rgb(var(--dark1a));
  min-height:6vw;
  z-index: 1;
}

.titlebar
{
  z-index: 2;
  width:auto;
}

.navigation
{
  background-color: rgb(var(--med1b));
  font-family: 'Libre Baskerville', serif;
  text-transform: uppercase;
  letter-spacing: .2ch;
  z-index: 1;
  font-size: max(2vh, 1.3vw);
  border-width:.15em;
  border-style:solid none none none;
  border-color:black;
  padding-left: max(25.25vh, 16vw);
  min-height: 2.5vw;
  top:max(7vh, 4.5vw);
  box-shadow: 0 1vh 1vh rgba(0,0,0,.5);
  position: fixed;
  left:-0.25vw;
  height:4%;
  width:calc(100% + .5vw);
  box-sizing: border-box;
}

.navigation a
{
  box-sizing: border-box;
  color: rgb(var(--dark2b));
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 0 1ch 0 1.28ch;
  border-style: solid;
  border-width: 0 2px 0 0;
  border-color:black;
  text-align: center;
  top:50%;
  transform: translateY(-50%);
  transition: background-color .2s, color .125s;
}

.current
{
  background-color: rgb(var(--med1a)) !important;
  color: rgb(var(--dark2a)) !important;
}

.navigation a:hover
{
  background-color: rgb(var(--med1a));
  color: rgb(var(--dark2a));
  transition: background-color .4s, color .25s;
}

.navigation a:first-of-type
{
  border-style: solid;
  border-width: 0 2px 0 0;
  border-radius: 1.5ch 0 0 1.5ch;
}

.navigation a:last-of-type
{
  border-style: none;
  border-radius: 0 1.5ch 1.5ch 0;
}

#about::after
{
  content: "About";
}

#history::after
{
  content: "History";
}

#interment::after
{
  content: "Interment";
}

#contact::after
{
  content: "Contact";
}

.logo
{
  position: relative;
  height:13.5vh;
  min-height:8.66vw;
  z-index:3 !important;
  filter: drop-shadow(0 1vh 1vh rgba(0,0,0,.5));
}

.sitetitle
{
  position: absolute;
  height:80%;
  min-height: 5.2vw;
  z-index: 0;
  top:0;
}

#mainbody
{
  position:absolute;
  top:max(12.6vh, 8.5vw);
  left:max(1.125vh, .75vw);
  z-index:0;
  width:calc(100% - max(2.25vh, 1.5vw));
  background-color: rgb(var(--light1a));
  border-radius: 2vh;
  font-family:sans-serif;
  box-sizing: border-box;
  scroll-behaviour: smooth;
}

#mainbody a
{
  color: rgb(var(--dark1b));
  font-style: italic;
  letter-spacing: .1ch;
  font-weight: bolder;
  text-decoration: none;
  font-variant: small-caps;
}

#mainbody a:hover
{
  color: rgb(var(--dark1a));
  font-style: italic;
  letter-spacing: .1ch;
  text-decoration: underline;
  background-color: rgba(var(--light1b),.15);
  border-radius: 0.5ch;
}

#mainbody a:visited
{
  color:rgb(var(--dark2a));
}

#mainbody::after
{
  position: absolute;
  content: "";
  bottom: -2vh;
  height: 2vh;
  width: 1px;
}

#mainbody div::after {
    content: "";
    display: table;
    clear: both;
}

#mainbody div:not(:last-of-type)
{
    border-style: none none none solid;
    border-width:0.5vh;
    border-color: rgb(var(--dark1b));
    box-sizing: border-box;
    margin-left: 7%;
}
#mainbody div:nth-last-of-type(2n)
{
    margin-bottom:2.5%;
}

#mainbody p
{
  box-sizing: border-box;
  width:100%;
  padding:0 8% 0 1%;
  font-family:'Lora', serif;
  text-align:justify;
  margin:0.75% 0;
  font-size: max(1.85vh, 0.901875vw);
}

#mainbody h1
{
  font-family: 'Libre Baskerville', serif;
  text-transform: uppercase;
  font-size: max(3vh, 1.95vw);
  color: rgb(var(--dark2a));
  letter-spacing: .25ch;
  margin-left:4%;
}

#mainbody img.across
{
  min-width:100% !important;
  max-width:100% !important;
  margin: 2.5% 0 1.25% 0;
  height:33vh;
  object-fit: cover;
  border-width : 1vh 0;
  border-style: solid;
  border-color: rgb(var(--dark2a));
  border-top-color: rgb(var(--dark1b));
  box-sizing: border-box;
}

#mainbody img.across:first-of-type
{
  height:33vh;
  margin-top: 0;
  margin-bottom: 1.25%;
  border-width: 0 0 1vh 0;
  border-radius: 2vh 2vh 0 0;
  background-color: black;
  
}

#mainbody .infotable
{
    padding:0 8% 0 1%;
    width:100%;
    border-collapse:collapse;
    
}

#mainbody .infotable td
{
    font-family: 'Lora', serif;
    text-align:right;
    border-style: none solid solid none;
    border-width:0 0.5vh 0.1vh 0;
    border-color: rgb(var(--dark1b));
    padding:0.5vh 0.75vh 0.5vh 0;
    width:14ch;
}

#mainbody .infotable td+td
{
    width:calc(100% - 14ch);
    border-width:0 0 0.1vh 0;
    border-style: none none solid none;
    border-color: rgb(var(--dark1b));
    text-align:left;
    padding:0.5vh 0 0.5vh 0.75vh;
}

#mainbody .pricelist
{
    width: 75%;
}

#mainbody .pricelist legend
{
    font-weight: bold;
}

#mainbody .pricelist table
{
    width:100%;    
}

#mainbody .pricelist td
{
    border-width:0.1vh;
    border-style:solid;
    text-align: center;
    padding:0;
    width:66%;
}

#mainbody .pricelist td+td
{
    border-width:0.1vh;
    border-style:solid;
    width:auto;
    text-align:center;
    padding:0;
}

#mainbody .pricelist .sep
{
    line-height:0.5vh; 
    background-color: rgb(var(--dark2a));
    border:none;
}

#mainbody .pricelist .notes
{
    background-color: rgb(var(--dark1b));
    color: rgb(var(--light1a));
}

#mainbody .pricelist div p
{
    font-style: italic;
    font-size: smaller;
}

#mainbody .inlineimage
{
    width:auto;
    max-width:40%;
    height:auto;
    float:left;
    margin: 0 2vh 0 0;
    border-radius:2vh;
    border-width:calc(0.25vh + 0.15vw);
    border-style:solid;
    border-color: rgb(var(--dark2a));
    clear:both;
    filter: drop-shadow(0 1vh 1vh rgba(0,0,0,.5));
    
}

#mainbody .right
{
    float:right;
    margin: 1vh 0 1vh 2vh;
    border-color: rgb(var(--dark1b));
}

#mainbody .innerDisplay
{
    width:99%;
    height: 0;
    border-style: solid;
    border-width:0;
    border-color: rgb(var(--dark2a));
    transition: height .2s, border-width .2s;
}

#mainbody .innerDisplayOpen
{
    width:99%;
    height: 65vh;
    border-style: solid;
    border-width:calc(0.25vw);
    border-color: rgb(var(--dark2a));
    transition: height .2s, border-width .2s;
}

#contactLink::after
{
    content:"contact@hopedalevillagecemetery.org";
}

#footer
{
  text-align: center;
  box-sizing: border-box;
  width:100%;
  margin: 1.25% 0 -2.5% 0;
  padding:0.25vmax;
  bottom:0px;
  border-radius: 0 0 2vh 2vh;
  background-color: rgb(var(--dark1a));
  border-top: 1vh solid rgb(var(--dark1b));
  font-size: max(1vh, .66vw);
}

.printheader
{
    display: none;
}


@media screen and (pointer: coarse), (hover: none) /*Styles for mobile devices*/
{
  #mainbody p
  {
    text-indent: 0;
    text-align:left;
    margin:1.25% 0;
    font-size: 2.5vh;
  }
  #mainbody .inlineimage
  {
      min-width:100%;
      max-width:100%;
      filter:none;
  }
    @media (orientation: portrait) /*Styles for portrait (tall) mode*/
    {
      .topbar
      {
        min-height: auto;
        max-height: auto;
        height:10vh;
        background-image: none; /*linear-gradient(to bottom, rgb(var(--med1b)), rgb(var(--med1a)));*/
        background-color: rgb(var(--med1b));
        box-shadow: none;
        border-style: solid;
        border-width: 0 0 2px 0;
        border-color:black;
      }

      .logo
      {
        width: auto;
        height:9vh;
        margin:0.25vh 0 0 0.5vh;
        filter: drop-shadow(0 .25vh .5vh rgba(0,0,0,.5));
      }

      .sitetitle
      {
        width: auto;
        height:9vh;
        margin-top:0.5vh;
        content: url("../images/hvctitlemobile.svg");
        /*filter: drop-shadow(0 .25vh .5vh rgba(0,0,0,.5));*/
      }

      .navigation
      {
        top:auto;
        bottom: 0;
        height:9vh;
        padding:0;
        box-sizing: content-box;
        font-family: 'Noto Emoji', sans-serif;
        text-align: center;
        background-color: rgb(var(--dark2b));
      }

      .navigation a
      {
        font-size: 5.5vh;
        text-align: center;
        border:none;
        padding: 0.25vh 4vw calc(4vh - 4px) 4.5vw;
        top:0;
        transform: none;
        color:rgb(var(--light1b));
      }

      .navigation a:hover
      {
        background-color: transparent;
        color: rgb(var(--light1b));
        transition: none;
      }

      .current
      {
        background-color: rgb(var(--dark1b)) !important;
        color: rgb(var(--light1a)) !important;
      }

      .navigation a:first-of-type
      {
        border:none;
        border-radius: 0;
      }

      .navigation a:last-of-type
      {
        border:none;
        border-radius: 0;
      }

      #about::before
      {
        content: "🏠";
      }

      #about::after
      {
        display: inline-block;
        position: absolute;
        text-align:right;
        text-indent:0.25ch;
        left:50%;
        top:auto;
        bottom: 1.5ch;
        transform: translateX(-50%);
        content: "home";
        font-size: 6pt;
      }

      #history::before
      {
        /*content: "📖";*/
        content: "📚";
      }

      #history::after
      {
        display: inline-block;
        position: absolute;
        left:50%;
        top:auto;
        bottom: 1.5ch;
        text-indent:0.25ch;
        transform: translateX(-50%);
        content: "history";
        font-size: 6pt;
      }

      #interment::before
      {
        content: "🪦";
      }

      #interment::after
      {
        display: inline-block;
        position: absolute;
        left:50%;
        top:auto;
        bottom: 1.5ch;
        transform: translateX(-50%);
        text-indent:0.25ch;
        content: "interment";
        font-size: 6pt;
      }

      #contact::before
      {
        content: "✉";
      }

      #contact::after
      {
        display: inline-block;
        position: absolute;
        left:50%;
        top:auto;
        bottom: 1.5ch;
        transform: translateX(-50%);
        text-indent:0.25ch;
        content: "contact";
        font-size: 6pt;
      }

      #mainbody::after
      {
        position: absolute;
        content: "";
        bottom: -12vh;
        height: 12vh;
        width: 1px;
      }

      #mainbody p
      {
        padding:1% 6%;
      }

      #mainbody h1
      {
        text-align: center;
        letter-spacing: .33ch;
        margin-left:0;
      }
      
      #mainbody .infotable
      {
        width:93%;
      }
      
      #mainbody .infotable td
      {
        width:auto;
      }
      
      #mainbody .infotable td+td
      {
        width:100%;
      }
      
      #mainbody .mobile
      {
          display:block;
          width:95%;
      }
      #mainbody .mobile td
      {
        display:block;
        width:100%;
        border-style: none;
        text-align:center;
        font-style: italic;
        font-size:larger;
      }
      #mainbody .mobile td+td
      {
          display:block;
          width:100%;
          text-align:center;
        font-style: normal;
        font-size:inherit;
      }
      #mainbody .pricelist
      {
        width:92%;
        margin-left:-2%;
      } 
      
      #mainbody legend
      {
          font-size: x-large;
      }
      
      #contactLink::after
      {
        content: "E-Mail Us";
      }
      #footer
      {
        margin-bottom:-6%;
        color: rgb(var(--light1a));
        padding:0.5vmax;
      }
    
    }
    @media (orientation: landscape) /*Styles for landscape (wide) mode*/
    {

    }
}

@media print /*Styles for printing*/
{

    body
    {
      background-color: white;
      color: black;
      display: table;
      table-layout: fixed;
      height: auto;
    }

    .topbar, .navigation, .logo, .sitetitle
    {
      background-color: white;
      visibility: hidden;
      display: none
    }

    .printheader
    {
        display: table
    }

    .printtitle
    {
      width:100%;
      padding-bottom: 0.5cm;
    }

    #mainbody
    {
      position: initial;
    }
    
    #mainbody h1
    {
        text-align: center;
        letter-spacing: .33ch;
        margin-left:0;
        font-size:18pt;
    }
    
    #mainbody p
    {
        font-size:12pt;
        margin-bottom:8pt;
    }
    
    #mainbody div:not(:last-of-type)
    {
        border-style:none;
    }
    
    #mainbody img.across
    {
        display:none;
        position:none;
    }
    #footer
    {
        display:none;
        position:none;
    }
}