@charset "UTF-8";

@media (max-width: 599px){
    ul#pages li{
      display: inline-block;
      list-style-type:none;
      width:100%;
      padding:0;
      margin-right:10px;
      margin-bottom:10px;
    }
	img#drone-logo { width: 100%; height: auto;}
	
	span#top-menu{
		display: none;
	}

}

@media (min-width: 600px) and (max-width: 999px){
    ul#pages li{
      display: inline-block;
      list-style-type:none;
      width:400px;
      padding:0;
      margin-right:10px;
      margin-bottom:10px;
    }
    img#drone-logo { width: 75%; height: auto;}
}

@media (min-width: 1000px){
    ul#pages li{
      display: inline-block;
      list-style-type:none;
      width:400px;
      padding:0;
      margin-right:10px;
      margin-bottom:10px;
    }
	img#drone-logo { width: 50%; height: auto;}
}


body{
  font-family: sans-serif;
  width: 96%;
  margin: 10px;
  padding: 0;
}

nav{
    margin: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
}

span.number{
    font-size: smaller;
}

span.number::before{
    content: "[";
}

span.number::after{
    content: "]";
}

span.title{
 }

time{
    font-size: smaller;
}

h1{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
}

h1#work_title, p#num-date{
	display: inline-block;
}

h2{
    margin-bottom: 0;
    padding-bottom: 0;
}

h2+p{
    margin-top: 0;
    padding-top: 0;
}

h3{
    margin-bottom: 0;
    padding-bottom: 0;
}

h3+p{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

a:link{
  font-weight: bold;
  text-decoration: none;
  color:#000000;
}

a:hover{
  color:#CC0000;
}

ul#pages{
  padding:0;
}

ul#pages li img{
  width: 100%;
  height: auto;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
}

div#instruction{
  padding: 5px;
}

div#control {
    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: center;
}

canvas{
    width: 100%;
    margin: 0;
    padding: 0;
}

#canvas_black{
    background-color: #000000;
}

#canvas_white{
    background-color: #ffffff;
    border: 1px solid #000000;
}

#stop_btn,
#move_btn,
#clear_btn,
#reset_btn,
#button1,
#button2,
#button3,
#button4 {
    font-size: 28px;
}

footer{
  margin-top: 0px;
}

#copyright{
  font-size: smaller;
}