/* Portfolio website style sheet, Version 1 design */ 
  
  /*Fonts
Choose body font, currently Times and Arial;
Menlo for all code 
*/
  @font-face{
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face{
    font-family: 'Menlo';
    src: url('fonts/Menlo-Regular.ttf');
    font-weight: normal;
    font-style: normal;
  }
  
/* Main */
  html {
    scroll-behavior: smooth;
    scroll-padding: 175px;
  }
  body {
    background-color: honeydew;
    margin: 0;
    padding: 0;
  }
  hr {
    border-color: darkslategrey;
    color: darkslategrey;
  }

/* Containers */ 

.container { /* Body */
  margin-top: 5px;
  max-width: 750px;
  height: auto;
  margin: auto;
  padding-top: 60px;
  padding-right: 20px;
  padding-left: 20px;
  overflow: scroll;
}

.projectcontainer {
  max-width: 575px;
  height: auto;
  margin-left: 25px;
}
.paracontainer {
  max-width: 500px;
  height: auto;
  margin-left: 25px;
}
.footer{
  padding-top: 3px;
  padding-bottom: 3px;
  background: lightcyan;
  text-align: center;
}

/* Typefaces */
  h1{
    color: crimson;
    text-align: left;
    font-family: 'Roboto', 'menlo', Arial, serif;
    font-size: 70px;
    font-style: normal;
    font-weight: 900;
    line-height: 50px;
  }
h2{
  color: navy;
  font-family: 'Roboto', Arial, serif;
  font-size: 30px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 21px;
  text-align: center;
}
h3{
  color: navy;
  font-family: 'menlo', monospace;
  font-size: 25px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 0;
  text-align: justify;
}
h4{
  color: navy;
  font-family: 'Roboto', 'Arial', serif;
  font-size: 20px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
}
.bubble{
  color: mintcream;  
  background-color: navy;
  padding: 1px 5px;
  margin-right: 2px;
  display: inline;
  text-decoration: none;
  text-align: justify;
}
.lang{
  font-family: 'menlo';
  color: gold;
  font-size: 12px;
  background-color: navy;
  padding: 1px 3px;
  margin-right:2px;
}
p{
  font-family: 'Roboto', 'Arial', serif;
  font-size: 17px;
  color:darkslategrey;
  font-style: normal;
  font-variant: normal;
  font-weight: 300;
  line-height: 17px;
  text-align: justify;
}
ul{
  font-family: 'Roboto', 'Arial', 'Times New Roman';
  font-size: 17px;
  color: darkslategrey;
  font-style:normal;
  font-variant:normal;
  text-align: left;
}
a{
  color: crimson;
  text-decoration: none;
}
a:hover{
  color: maroon;
}

.navbar{
  background-color: darkslategrey;
  color: honeydew;

}
/* Hideable Areas 
see https://www.w3schools.com/howto/howto_js_collapsible.asp
*/
  
  /* Button */
  .colbut {
    background-color: honeydew;
    color: navy;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-family: 'Roboto', 'Arial';
    font-size: 17.5px;
    padding-left: 5px;
  }

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active2, .collapsible:hover {
    background-color: navy;
    color: honeydew;
  }

/* Style the collapsible content. Note: hidden by default */
  .content {
    padding-top: 0 20px;
    padding-left: 20px;
    padding-right: 15px;
    overflow: hidden;
    background-color: azure;
    max-height: 0;
    transition: max-height 0.2s ease-out;
  } 

.column {
  float: left;
  width: 50%;
}


.colbut:after {
  content: "+"; /* Unicode character for "plus" sign (+) */
  font-size: 20.5px;
  color: navy;
  background-color:honeydew;
  float: right;
}

.active2:after {
  content: "—" ;/* Unicode character for "minus" sign (-) */
  background-color: navy;
  color: honeydew;
  float:right;
}

/* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

@media screen and (max-width: 300px) {
  .column {
    width: 100%;
  }
}



/*https://www.w3schools.com/howto/howto_js_filter_elements.asp*/

.container2 {
  overflow: hidden;
}

.filterDiv {
  display: none; /* Hidden by default */
  background-color: honeydew;
  color: navy;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: 'Roboto', 'Arial';
  font-size: 17.5px;
  padding-left: 5px;
  padding-top: 10px;
}


/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  font-family: 'Roboto', 'Arial';
  border: none;
  outline: none;
  padding: 7px 7px;
  background-color: navy;
  color:honeydew;
}


/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: crimson;
}

/* Add a dark background to the active button */
.btn.active {
  background-color: crimson;
  color: gold;
}