body {
  font-family: "Gudea", sans-serif;
}

.title{
    font-family: 'Russo One', sans-serif;
    font-size: 600%;
}

.navBar{
  background-color: white;
  overflow: hidden;
  position: absolute;
  min-height: 60px;
  position: fixed;
  width: 100vw;
  z-index: 10;
  top: 0px;
  border-bottom: 2px solid #5A77FA;
  transition: all 0.5s ease;
  padding-left: 20px;
}

.navBar {
  background-color: white;
  overflow: hidden;
  /* position: absolute; */
  min-height: 60px;
  position: fixed;
  width: 100vw;
  z-index: 10;
  top: 0px;
  border-bottom: 2px solid #5A77FA;
  transition: all 0.5s ease;
}

/* Floats each item to the left with padding of 14 & 16 px.
 Removes the underline with text decoration = none.*/
.navBar a {
  padding-left: 20px;
  top: 5px;
  position: relative;
  margin: auto;
  font-family: "Gudea", sans-serif;
  text-decoration: none;
  color: black;
  text-align: center;
  min-width: 100px;
  height: 50px;
  margin-right: 10px;
  float: left;
  line-height: 50px;
  border-radius: 20px;
  cursor: pointer;

  transition: all 0.4s ease;

  /*Original style*/
  float: left;
}

#canvas_div img{
  display:none;
}

.navBar .icon {
  display: none;
  text-align: center;
}

#canvas_div{
  text-align: center;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: solid 1px #5A77FA;
}

/*Small screen styles*/
@media (max-width: 800px){
  #canvas_div {
    padding-bottom: 0px;
  }

  #canvas_div canvas{
    display:none;
  }
  #canvas_div img{
    display:block;
    width: 100vw;
  }

  /*The navBar class will be changed to 'navBar responsive' using JS. This chunk of CSS makes the menu icon stay where it is by making the position absolute within it's parent 'right top corner'. Without this, the icon will get kicked around when the items are collapsed and expanded*/
  .navBar.responsive {
    position: fixed;
    transition: all 0.5s ease;
  }

  .navBar.responsive a.icon {
      transition: all 0.5s ease;
      position: absolute;
      right: 0;
      top: 0;
  }

  /*Removes the originally set float and brings them to view*/
  .navBar.responsive a {
      float: none;
      display: block;
      text-align: left;
      transition: all 0.5s ease;
  }

  .navBar a{
    display: none;
  }

  /*Brings the menu icon into view and floats it to the right*/
  .navBar a.icon {
    display: block;
    float: right;
    transition: all 0.5s ease;
  }
}

.navBar a:hover{
    background-color: #9ca5cc;
    transition: all 0.4s ease;
}

#spacer{
    height: 55px;
}

/*Footer*/

#footer{
    background-color: #444444;
    color: #a0a0a0;
    min-height: 400px;
  
    font-family: "Gudea", sans-serif;
  }
  #footer-heading{
    color: #707070;
  }
  #footer-left-col{
    padding-top: 25px;
    padding-left: 25px;
    width: 45vw;
    margin-left: 5vw;
  }
  #footer-right-col{
    padding-left: 25px;
    width: 45vw;
    text-align: left;
  }
  .footer-logo{
    background-color: white;
    height: 200px;
    width: 200px;
    border-radius: 100px;
    margin-top:50px;
  }
  .remove-link-decoration{
    display:block;
    text-decoration: none;
    color: #a0a0a0;
  }
/*End Footer*/

/*Content*/
.content {
  margin: 20px;
  /* text-align: center; */
  padding: 5vw;
}
.content .dual_column {
  padding-left: 5vw;
  width: 35vw;
  display: inline-block;
  font-size: 120%;
  text-align: center;
}

.content .dual_column img {
  border-radius: 5px;
}
/*Small screen styles*/
@media (max-width: 800px){
  .content .dual_column{
    display:block;
    width: auto;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .content .dual_column img {
    border-radius: 5px;
    min-width: 85vw;
  }
}
.content ul {
  list-style-type: none;
  list-style: none;
}
/*End Content*/

/*Tutorial Page*/
.tutorial_content{
  margin-top: 5%;
  margin-left: 5%;
  margin-right: 5%;
}

.tutorial_content .content h2 {
  margin-top: 20px;
}

.tutorial_content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  max-height: 400px;
  border-radius: 5px;
}

.tutorial_content .highlight pre {
  padding: 10px;
  border-radius: 5px;
}

/*End Tutorial Page*/

.scene_card {
  width: 200px;
  padding: 5px;
  border-radius: 5px;
  border: solid 1px grey;
  display:inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
  transition: all 0.5s ease;
}

.scene_card:hover {
  background-color: #a0a0a0;
  transition: all 0.3s ease;
}

.scene_card_link {
  text-decoration: none;
  color: #444444;
}

.scene_card_preview{
  /* width: 200px; */
  max-height: 120px;
}

.scene_card div {
  max-width: 150px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}