#headshot{
  width: 40%;
}

/* noto-sans-jp-regular - latin */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-jp-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-jp-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-jp-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-jp-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-jp-v28-latin-regular.svg#NotoSansJP') format('svg'); /* Legacy iOS */
}


/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair-display-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/playfair-display-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/playfair-display-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/playfair-display-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/playfair-display-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/playfair-display-v21-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}


html {
  background-color: #F5F5F5;
  margin: 20px;
  font-family: "Noto Sans JP", sans-serif; 
}

h1 {
  color: #333333;
  text-align: left;
  font-family: "Playfair Display", serif; 
  margin-left: 45%;
  font-size: 45px; 

}

p {
  color: #333333;
  text-align: left;
  margin-left: 45%;
  margin-right: 13%;
  font-size: 20px; 

}

/*  LINK MAIN TEXT */
 /* unvisited link */
a.regular:link {
  color: #333333;
}

/* visited link */
a.regular:visited {
  color: #333333;
}

/* mouse over link */
a.regular:hover {
  color: darkred;
}

} 


 /*  SIDEBAR */
.main {
  margin-right: : 140px; /* Same width as the sidebar + left position in px */
  padding: 0px 10px;
}
.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  right: 10px;
  overflow-x: hidden;
  padding: 8px 0;
  text-align: right;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 10px;
  display: block;
  color: black;
}

.sidenav a:hover {
  color: #8b0000;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

#play_snake_link {
    font-size: 20px;
    text-align: center;
}


 /*  SNAKE */
canvas {
  border: 1px solid #8b0000;
  position:absolute; 
  top:5px;
  left:0 /* added this */
  height: 95%; 
  width: 95%; /* added this, not sure if it changes anything */
}


/* hollow sm icons */


.socialbtns {
    margin-left: 45%;
    padding: 5px;
    text-decoration: none;
}

.fa-twitter{
  text-decoration: none;
}
.fa-github{
  text-decoration: none;
}
.fa-tumblr{
  text-decoration: none;
}
.fa-envelope{
  text-decoration: none;
}
.fa-linkedin{
  text-decoration: none;
}


/* unvisited link */
a.fa-twitter:link {
  color: #333333;
}
/* visited link */
a.fa-twitter:visited {
  color: #333333;
}
/* mouse over link */
a.fa-twitter:hover {
  color: darkred;
}
/* unvisited link */
a.fa-linkedin:link {
  color: #333333;
}
/* visited link */
a.fa-linkedin:visited {
  color: #333333;
}
/* mouse over link */
a.fa-linkedin:hover {
  color: darkred;
}
/* unvisited link */
a.fa-envelope:link {
  color: #333333;
}
/* visited link */
a.fa-envelope:visited {
  color: #333333;
}
/* mouse over link */
a.fa-envelope:hover {
  color: darkred;
}

/* This is old code 

.socialbtns .fa .fab .fa-twitter {
    width: 40px;
    height: 28px;
    color: #000;
    background-color: blue;
    border: 1px solid yellow;
    padding-top: 12px;
    border-radius: 22px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;
    -o-border-radius: 22px;
}



#id1 {
	  text-align: right;
	  font-size: 7px;
}

.class-center{
  text-align: center;
  font-size: 13px;
  color: darkgrey; 
}

#apple-stock-chart .axis path,
#apple-stock-chart .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

#apple-stock-chart .x.axis path {
  display: none;
}

#apple-stock-chart .line {
  fill: none;
  stroke: purple;
  stroke-width: 1.5px;
}

#apple-stock-chart .overlay {
  fill: none;
  pointer-events: all;
}

#apple-stock-chart .focus circle {
  fill: none;
  stroke: steelblue;
}

*/