* {box-sizing: border-box;}

html {height: 100%; scroll-behavior: smooth;}
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  position: relative;
  margin: 0;
  padding-bottom: 6em;
  min-height: 100%;
  line-height: 1.5em;
}

h1, h2 {font-family: 'Noto Sans JP', sans-serif;}

p {padding-top: 1em;}

nav {
  position: fixed;
  left: 0;
  top: 0px;
  height: 3em;
  width: 100%;
  color: #fff;
  background-color: rgba(0,0,0,0.8);
  margin: 0;
  margin-top: -10px;
  padding: 0 0 10px 0;
  z-index: 10;
}
nav a {
  text-decoration: none;
  color: white;
}
nav a:hover {color:red}
nav ul {list-style-type: none}
nav ul li {
  display: inline;
  margin-top: 0;
  padding-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  border-right: 1px dotted #999;
}
nav ul li a img {vertical-align: text-bottom;}
nav ul li:last-child {border-right:none}

#main{
  margin-top: 3em;
  padding: 0 2em 0 2em;/*20px;*/
  padding-bottom: 100px;
}

header picture img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

header video {
  width: 100%;
  height: 100%
}

section {
  margin-top: 4em;
  margin-bottom: 2em;
  border-top: 1px solid #999;
}

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
}

/* Creating a CSS Dropdown Menu */

/* The container <div> - needed to position the dropdown content */
.dropdown {
    cursor: pointer;
    position: relative;
    display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 10em;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 20;
}
/* Links inside the dropdown */
.dropdown-content a {
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: .5em 2em .5em 1em;
    text-decoration: none;
    border-bottom: 1px solid gray;
    display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Slideshow CSS
https://www.w3schools.com/howto/howto_js_slideshow.asp */
    .mySlides {
      display: none;
    }
    img {
      vertical-align: middle;
    }

    /* Slideshow container */
    #project div {margin: 0 25% 0 20%;}
    .slideshow-container {
      /*width: 100%; play with scale to alter layout*/
      margin: auto; /*centers the content*/
      /* try playing with placement:
      float: left;
      float: right;
      */
    }

    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @keyframes fade {
      from {
        opacity: 0.4;
      }
      to {
        opacity: 1;
      }
    }
    /* End Slideshow CSS */

    /* Vanilla JS Draggable Div
    https://www.w3schools.com/howto/howto_js_draggable.asp */
#mydiv {
position: absolute;
z-index: 10;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}

#mydivheader {
padding: 5px;
cursor: move;
z-index: 20;
background-color: red;
color: #000;
}

/* Adding Media Queries */
@media screen and (max-width: 600px) {
  body {
    background-color: black;
    color: white;
  }
}
