/* Remove the navbar's default margin-bottom and rounded borders */ 

.navbar {
  margin-bottom: 0;
  border-radius: 0;
}
.navbar.transparent.navbar-inverse .navbar-inner {
  background: rgba(0,0,0,0.4);
}

/******************/
/*Home*/
/******************/

.jumbotron {
  /* background-image: url("../img/rebe-adelaida-zunQwMy5B6M-unsplash.jpg"); */
  background-image: url("../img/fabian_wohlgemuth.jpg");
  background-color :whitesmoke;
  background-size: cover;
  height: 100vh;
  color:white; 
}

#mainjumbo .main{
  font-size: 150px;
  margin-top: 100px;
  font-style: normal;
  font-family: 'Cormorant Garamond', serif;
}

/* .jumbotron p{ 
  font-size: 35px;
} */

h1{
  margin: 20px;
}

p.info-text{
  font-size: 20px;
}

.row{
  padding-right: 25px;
}

ul.projects{
  font-size: 23px;
  list-style-type: none;
  text-decoration: none;
}
ul.projects_sm{
  font-size: 20px;
  list-style-type: none;
  text-decoration: none;
}
li.projects_sm{
  font-size: 20px;
  list-style-type: none;
  text-decoration: none;
}

/* links */
li{
  list-style-type: none;
  text-decoration: none;
}
a{
  text-decoration: none;
  color: inherit;
}
a:link {
  color:inherit;
}
a:hover{
  color: darkred;
}

/* Add a gray background color and some padding to the footer */
footer {
  background-color: #f2f2f2;
  padding: 25px;
}

/* Ear Trainer Layout */

.ear_item1 { grid-area: one; }
.ear_item2 { grid-area: two; }
.ear_item3 { grid-area: three;}
.ear_item4 { grid-area: four; }
.ear_item5 { grid-area: five; }

.ear-trainer-container {
  display: grid;
  grid-template-areas:
    'one one one one'
    'two two three three'
    'two two four four'
    'two two five five';
  grid-gap: 10px;
  max-width: 100vw;
  background-color: rgb(255, 255, 255);
  color: white;
  padding: 10px;
}

.ear-trainer-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  text-align: left;
  padding: 20px;
  font-size: 30px;
  border-radius: 10px;
}
.wave-code{
  max-width: 800px;
  max-height: 700px;
}

/* SFTP Layout */

.sftp_item1 { grid-area: one; }
.sftp_item2 { grid-area: two; }
.sftp_item3 { grid-area: three;}
.sftp_item4 { grid-area: four; }

.sftp-container {
  display: grid;
  grid-template-areas:
    'one one    one one'
    'two two    three three'
    'four four   three three';
  grid-gap: 10px;
  max-width: 100vw;
  background-color: rgb(255, 255, 255);
  color: white;
  padding: 10px;
}
.sftp-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  text-align: left;
  padding: 20px;
  font-size: 30px;
  border-radius: 10px;
}
.ftp-cli{
  border-radius: 10px;
  max-width: 600px;
  max-height: 700px;
}

/* IRC Layout */

.irc_item1  { grid-area: one; }
.irc_item2 { grid-area: two; }
.irc_item3 { grid-area: three;}
.irc_item4 { grid-area: four; }

.irc-container {
  display: grid;
  grid-template-areas:
    'one one    one one'
    'two two    three three'
    'four four   three three';
  grid-gap: 10px;
  max-width: 100vw;
  background-color: rgb(255, 255, 255);
  color: white;
  padding: 10px;
}
.irc-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  text-align: left;
  padding: 20px;
  font-size: 30px;
  border-radius: 10px;
}
.irc-cli{
  border-radius: 5px;
  max-width: 100%;
  max-height: 700px;
}

.info-text.irc{
  max-width: 800px;
}

/* Android Layout*/

.android-container {
display: grid;
margin: 3rem;
grid-gap: 1px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: .1fr 1fr 1fr 1fr 1fr 1fr .1fr;
    background-color: #fff;
    color: #444;
}

.box {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border-radius: 5px;
    padding: 10px;
    font-size: 150%;
}
.name {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 30px;
    max-height: 100px;
}
.info {
    font-size: 16px;
    grid-column: 1/ 2 ;
    grid-row: 2 / -2;
}
.screenshot {
    grid-column: 2/ -1 ;
    grid-row: 2/-2 ;
}

.pics-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: none;
}
.note {
    grid-column: 1 / -1;
    grid-row: 7 ;
    font-size: 12px;
    font-style: italic;
}  
.android-pic{
  margin:3px;
  padding:3px;
  max-width: 500px;
  max-height: 600px;
  border-radius: 30px;;
}

/* Spreadsheet Parser Layout */
.spreadsheet_item1 { grid-area: one; }
.spreadsheet_item2 { grid-area: two;
                    max-width: 600px; }
.spreadsheet_item3 { grid-area: three;}
.spreadsheet_item4 { grid-area: four; }
.spreadsheet_item5 { grid-area: five; }
.spreadsheet_item6 { grid-area: six; }
.spreadsheet_item7 { grid-area: seven; }

.spreadsheet-container {
  display: grid;
  grid-template-areas:
    'one one one one'
    'two two three three'
    'four four five five'
    'six  six  seven seven';
  grid-gap: 10px;
  max-width: 100vw;
  background-color: rgb(255, 255, 255);
  color: white;
  padding: 10px;
}

.spreadsheet-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  text-align: left;
  padding: 20px;
  font-size: 30px;
  border-radius: 10px;
}
.schematic{
  max-width: 600px;
  max-height: 500px;
}

/* Trivia */ 
.trivia_item1 { grid-area: one; }
.trivia_item2 { grid-area: two;
                    max-width: 600px; }
.trivia_item3 { grid-area: three;}
.trivia_item4 { grid-area: four; }
.trivia_item5 { grid-area: five; }
.trivia_item6 { grid-area: six; }
.trivia_item7 { grid-area: seven; }

.trivia-container {
  display: grid;
  grid-template-areas:
    'one one one one'
    'two two three three'
    'four four five five'
    'six  six  seven seven';
  grid-gap: 10px;
  max-width: 100vw;
  background-color: rgb(255, 255, 255);
  color: white;
  padding: 10px;
}

.trivia-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  text-align: left;
  padding: 20px;
  font-size: 30px;
  border-radius: 10px;
} 
.trivia_screens{
  border-radius: 2%;
  max-width: 600px;
  max-height: 500px;
}

/* Theory */
.theory_item1 { grid-area: one; }
.theory_item2 { grid-area: two; max-width: 500px;}
.theory_item3 { grid-area: three;}
.theory_item4 { grid-area: four; }
.theory_item5 { grid-area: five; }
.theory_item6 { grid-area: six; max-width: 500px;}
.theory_item7 { grid-area: seven; }

.theory-container {
  display: grid;
  grid-template-areas:
    'one one . .'
    'two two three three'
    'four four five five'
    'six  six  seven seven';
  grid-gap: 10px;
  max-width: 100vw;
  background-color: rgb(255, 255, 255);
  color: white;
  padding: 10px;
}

.theory-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  text-align: left;
  padding: 20px;
  font-size: 30px;
  border-radius: 10px;
}

.theory-img{
  max-width: 600px;
  max-height: 800px;
}

/* IRC Layout */

.about_item1  { grid-area: one; }
.about_item2 { grid-area: two; }
.about_item3 { grid-area: three;}
.about_item4 { grid-area: four; }

.about-container {
  display: grid;
  grid-template-areas:
    'one one'
    'two two'    
    'three three';
  grid-gap: 10px;
  max-width: 100vw;
  background-color: rgb(255, 255, 255);
  color: white;
  padding: 10px;
}
.about-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  text-align: left;
  padding: 20px;
  font-size: 30px;
  border-radius: 10px;
}
.watercolor-pic{
  border-radius: 5px;
  max-width: 300px;
  max-height: 500px;
}

.btn{
  width:100px;
  border-color: #2F3E48;
}

.btn-default{
  background-color: #68889E;
  color:#FFF;
}

p.box_head{
  padding: 12px 20px;
}

input[type=submit] {
  width: 30%;
  padding: 12px 10px;
  margin: 10px 0;
  box-sizing: border-box; 
}
.btn:hover {
  background-color: #4CAF50;
}
.btn-default:hover{
  background-color: rgb(230, 81, 81);
  color: white;
}
input[type=text] {
  width: 90%;
  padding: 10px 10px;
  margin: 3px 0;
  box-sizing: border-box;
}
textarea{
  width: 90%;
  height: 100px;
  min-height: 10px;
  max-height: 200px;
  min-width: 90%;
  max-width: 90%;
}
form {
  background-color: snow;
  padding-left: 2%;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
}

/* ML & AI Layout */
.ml-text{
  margin-left: 10px;
  margin-right: 10px;
  max-width: 65rem;
}

.ml-container {
  margin: 5rem;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  }
.ml-pic{
  margin-top:20px;
  margin-bottom:25px;
  padding:5px;
  max-width: 1000px;
  max-height: 1000px;
  border-radius: 10px;;
}
#bayes-portrait{
  max-width: 500px;
}
#kcluster{
  max-width: 600px;
}
#chessboard{
  max-width: 400px;
}
#sym-crypt{
  max-width: 800px;
}
#bach-score{
  max-height: 400px;
  max-width: 600px;
}
#shakespeare-text{
  font-family: 'Crimson Text', serif;
  margin-right: 1rem;
  margin-left: 1rem;
}
#db-cli{
  max-width: 800px;
}
#db-graph{
  max-width: 700px;
}
#nat-spline{
  max-width: 600px;
}
#b-spline{
  max-width: 600px;
}
#b-spline-code{
  max-height: 700px;
}
#best-fit{
  max-width: 600px;
}
/* Future Projects */

.future{
  margin: 20px;
  max-width: 600px;
}