@import url('https://fonts.googleapis.com/css?family=Vollkorn');
@import url('https://fonts.googleapis.com/css?family=Kreon:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Sue+Ellen+Francisco');
@import url('https://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i');

@font-face {
  font-family: 'karelia';
  src: url('KareliaTrial-Outtakes.otf') format('otf');
}

body {
font-family: 'Vollkorn', serif;
font-size: 3vw;
  line-height: 4.5vw;
  color: black;
  /*overflow: hidden;*/
  background-color: white;
  /*background-image: url("img/patent_collage-04_3.png");*/
  background-size: cover;
  height: 100vh;
}

/*body.cv {
  overflow: scroll;
  background-image: none;
  color: white;
}*/

div.nav {
  /*z-index: 0;*/
  position: fixed;
  /*transform: rotate(-90deg);*/
  height: 100vh;
width: 40vw
}

div.bio {
  max-width: 60vw;
  max-height: 100vh;
  /*z-index: 1;*/
  padding-left: 40vw;
}

p.bio {
  font-family: 'Vollkorn', serif;
  font-size: 0.6em;
  color: black;
  line-height: 1.6em;
  text-align: right;
  vertical-align: baseline;
}

/*#top, #bottom, #left, #right {
	background: gold;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 1vw;
		}
		#left { left: 0; }
		#right { right: 0; }

	#top, #bottom {
		left: 0; right: 0;
		height: 1vw;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }*/

a {
  text-decoration: overline;
  color: inherit;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  font-size: 2.5vw;
/*transition: all 0.1s ease 0s;
-moz-transition: all 0.1s ease 0s;
-webkit-transition: all 0.1s ease 0s;
-o-transition: all 0.1s ease 0s;
-ms-transition: all 0.1s ease 0s;*/
}

/*.extra {
  font-weight: 600;
  text-decoration: none;
  font-size: 1vw;
  margin-right: 1vw;
  font-weight: bold;
  color: DarkSlateGrey;
  line-height: 1vw;
}*/

a:hover {
  /*font-family: 'Just Me Again Down Here', cursive;*/
  text-decoration: line-through;
  font-size: 2.5vw;
  /*transform: scale(0) skew(-20deg);*/
 }

 a.bio {
   font-size: 0.8em;
   color: black;
   line-height: 1.6em;
 }

/* a.extra:hover {
   font-weight: bold;
   font-size: 1vw;
 }*/

/*span.tiny {
  font-size: 1vw;
  display: none;
  display: inline-flex;
  line-height: 1em;
  max-width: 50px;
vertical-align: text-top;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

iframe > * {
  overflow: hidden;
}*/

span.underline {
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  font-size: 2.8vw;
}

/*
div.nav {
max-width: 1200px;
text-align: center;
display: flex;
max-width: 1200px;
margin: 0 auto;
position:fixed;
left:0;
transform: rotate(-90deg);
}*/

/*div.hiddenlink {
  width: 25px;
  height: 25px;
}*/


/*#draggable {
  top:50vh;
  left:50vw;
  width: 10vw;
  height: 20vh;
}

#draggable1 {
  top:15vh;
  left:30vw;
  width: 1vw;
  height: inherit;
}

#draggable2 {
  top:60vh;
  left:20vw;
  width: 1vw;
  height: inherit;
}

img.contact {
  width: 25vw;
  height: inherit;
}

img.cv {
  width: 15vw;
  height: inherit;
}

img.pf {
  width: 20vw;
  height: inherit;
}*/

/**{border: 1px, solid, black;}
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }*/

/*div.ui-widget-content {
  width: 50vw;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
}*/

/*iPhone6*/
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body {
      font-size: 5vw;
      line-height: 7vw;
    }

    p.bio {
      font-size: 5vw;
      line-height: 7vw;
    }
    a {
      font-size: 4vw;
    }
    div.bio {
      max-width: 80vw;
      padding-left: 20vw;
    }
}

/*iPhone X*/
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  /*and (-webkit-min-device-pixel-ratio: 2)*/
  {
    body {
      font-size: 5vw;
      line-height: 7vw;
    }
    p.bio {
      font-size: 5vw;
      line-height: 7vw;
    }
    a {
      font-size: 4vw;
    }
    div.bio {
      max-width: 80vw;
      padding-left: 20vw;
    }

  }

  /*iPad mini*/
  @media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
    body {
      font-size: 3vw;
      line-height: 4.5vw;
    }
    a {
      font-size: 2.5vw;
    }
    div.bio {
      max-width: 60vw;
      padding-left: 40vw;
    }

}