/* Landscape phones and down */
@media (max-width: 30em) {
    html {
      font-size: 0.8em;
    }
}
@media (max-width: 1050px) {
    body div.content {
      margin-left: 10em;
    }
}
@media (max-width: 800px) {
    body div.content {
      margin-left: 0;
    }
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(/font/Montserrat.ttf);
}

html {
  background-image:url(../images/desk-background.webp);
  /* Image Source: https://pixabay.com/en/web-design-coding-web-developing-2906159/ */
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

body {

  /* Center and scale the image nicely */
  /*background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  margin: 0;

  font-family: 'Montserrat', sans-serif;

  font-size: 100%;

  height:100%;
  overflow: scroll;
}

div.content {
  position: relative;
  text-align: center;
  z-index: 2;
  margin: 0;
  margin-left: 30em;
}

div.vcard {
  display: block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;

  background-color: #231F20;
  color: #F2F2F2;
  padding: 3em 2em 3em 2em;
  width: 27em;

  margin-top: 5em;

  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
}

div.vcard .vcard-secondary p {
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}

div.vcard.vcard-large {
  min-width: 27em;
  max-width: 50em;
}

div.vcard.vcard-large {
  margin-top:80em;
  margin-bottom: 10em;
  min-width: 25em;
  width: 50%;
  max-width: 50em;
}

div.vcard a {
  text-decoration: none;
  color: inherit;
}

div.vcard .vcard-title {
  color: #F36318;
  font-size: 1.75em;
}

div.vcard .emph {
  color: #F36318;
}

div.vcard .vcard-main {
  margin-bottom: 5em;
}

div.vcard .vcard-main p {
  margin: 0.1em 0.1em 0.1em 0;
}

div.vcard .vcard-main .vcard-subtitle {
  padding-left: 0.1em;
}

div.vcard .vcard-secondary {
  text-align: right;
}

div.vcard.vcard-secondary .vcard-main {
  margin-bottom: 2em;
}

div.vcard dt {
  font-weight: bold;
}

div.vcard dd {
  margin-bottom: 1.1em;
  margin-left: 0;
}