@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap);

@font-face {
  font-family: Montserrat;
  src: url(Montserrat-Regular.otf);
}
@font-face{
  font-family: liberata;
  src: url(LiberataBook.otf);
}


html{
  background-color: #fffff0;
}

div.test{
  display: block;
}

body{
  margin: 0;
}

.text{
  margin-left: 5%;
  margin-right: 5%;
}

/*Headers*/
h1{
  font-size: 30px;
  font-family:Montserrat;
  color: black;
  float: left;
  margin: 0;
  padding: 6px;
}
h2{
  font-size: 40px;
  font-family: Montserrat;
}
h3{
  font-size: 30px;
  font-family: Montserrat;
}
h4{
  font-size: 27px;
  font-family: Montserrat;
}
p{
  font-size: 18px;
  font-family: Noto Sans TC;
}
code.txt {
  font-size: 15px;
}
code.head {
  font-size: 20px;
}

.noNewLine {
  font-size: 18px;
  font-family: liberata;
}

/*list*/
ol.a{
  font-family: Noto Sans TC;
  list-style-type: decimal;
  font-size: 18px;
}

/* top bar */
div.title{
  height: 100px;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: #FFF;
  margin-right: 0px;
  padding: 0;
}

div.diff-color{
  width: 100%;
  background color: #FFF;
  height: 800px;
}

a.frontOption{
  padding: 10px;
  margin-left: 5%;
  margin-right: 5%;
  width: 20%
}

a.frontOption:hover{
  color: none;
 }

div.steps{
  background-color: lightgrey;
  padding: 2px;
}
div.text-block{
  padding: 2px;
}

.container{
  position: relative;
  float: left;
  height: 50px;
}

.container .btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: 0;
}

/*images*/
img.img1{
  float:right;
}
img.img2 {
  padding: 20px;
}

div.questions{
  background-color: #add8e6;
  width: 100%;
  padding: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
}

/* Image Gallery */
div.gallery {
  margin: 10px;
  border: 1px solid #ccc;
  width: 180px;
  float: left;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  float: left;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
div.desc {
  padding: 15px;
}

/*Clickable image*/
div.imglink{
  margin-right: 0;
  border: 1px solid #ccc;
  float: left;
  margin-top: 10px;
  margin-bottom:10px;
}
div.imglink img{
  float: left;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
div.imglink:hover{
  border: 1px solid #777;
}

  /*Drop Down Menu*/
  ul{
  width:100%;
  float:left;
  font-family:Montserrat;
  list-style:none;
  padding:0;
  border:none;
  font-size:120%;
  margin: 0;
  }

  li a{
    display: block;
    padding: 8px;
  }

  a.menu{
  text-decoration:none;
  color: black;
  display: block;
  text-align: left;
}

div.link{
  padding: 10px;
  border-left: solid;
  border-color: black;
  border-width: 6px;
  background-color: rgb(230,230,230);
}
div.link a{
  color: blue;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.56;
}

  a:hover {
  color:darkgrey;
  position: relative;
  }

  .dropdown {
      position: relative;
      display: inline-block;
      float: left;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: rgba(255,255,255);
      width: 100%;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }

  .dropdown:hover .dropdown-content {
      display: block;
  }

.dropdownP{
  height: 40px;
  width: 100%;
  background-color: grey;
  display: inline-block;
  position: relative;
  margin-top: 10px;
}
@media screen and (max-width: 600px) {
  .dropdown {
    display: none;
  }
}