* {
  box-sizing: border-box;
  font-family: sans-serif;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

/* The wrapper contains all of the page's content besides the footer, which is pushed to the bottom of the page */
.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 130px;
  overflow: auto;
}

.container {
  max-width: 50%;
}

/* The footer is positioned at the bottom of the page */
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 100px;
  background: white;
}

/* The code styles the text at the bottom of the footer */
.footer > .bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px;
  background: white;
}

.navbar {
  padding: 5px;
  margin: 0;
}

/* This CSS styles the project icon in the navbar */
.nav-project {
  position: absolute;
  bottom: 5px;
  left: 150px;
  width: 35px;
  color: white;
}

/* Adding styles to the aside and filter form */
.project-form {
  margin-top: 50px;
}

select {
  display: block;
  width: 100%;
  padding: 8px;
  color: #8e979f;
  outline: none;
}

#table-area th {
  text-align: center;
}

#table-area th:first-child,
#table-area th:nth-child(2),
#table-area th:nth-child(6) {
  min-width: 70px;
}

.loader {
  margin-top: 50px;
}

.margin-top-50 {
  margin-top: 50px;
}

.margin-top-100 {
  margin-top: 100px;
}

.margin-left-100 {
  margin-left: 10px;
}

/* The styles for the parallax */
.project {
  position: relative;
  height: 550px;
  padding: 20px;
  margin: 0;
  background: white;
  background-image: url("../images/landing.jpg");
  background-attachment: fixed;
  background-position: bottom center;
  background-size: cover;
}

.project h1 {
  margin-top: 150px;
  font-size: 0.1rem;
  animation: title forwards linear;
}

.project p {
  font-size: 2rem;
  opacity: 0;
  animation: subtitle forwards linear;
}

.project-sub {
  position: relative;
  height: 250px;
  padding: 10px;
  margin: 0;
  background: white;
  background-image: url("../images/landing.jpg");
  background-attachment: fixed;
  background-position: bottom center;
  background-size: cover;
}

.project-sub h1 {
  margin-top: 20px;
  font-size: 0.1rem;
  animation: title forwards linear;
}

.project-sub p {
  font-size: 2rem;
  opacity: 0;
  animation: subtitle forwards linear;
}

.title {
  font-size:45px;
}

.predict-button {
  font-size:30px;
}

/* input placeholder color changes */
.form-control::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #8e979f;
  font-size:20px;
}

.form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: #8e979f;
}

.form-control:-ms-input-placeholder {
  /* IE 10+ */
  color: #8e979f;
}

.form-control:-moz-placeholder {
  /* Firefox 18- */
  color: #8e979f;
}

  /* Meet the Team */

.model-report {
  height: 90%;
  width: 90%;
}

.model-img {
  height: 90%;
  width: 75%;
}

/* media queries which will only be activated at specific screen sizes */
@media (max-width: 800px) {
  #table-area td {
    font-size: 1em;
  }
}

@media (max-width: 500px) {
  #table-area thead {
    display: none;
  }


  .project h1 {
    animation: smaller-title forwards linear;
  }
}


/* keyframe animations which will be used to animate the title */
@keyframes title {
  from {
    opacity: 0;
  }

  to {
    font-size: 7.5rem;
    opacity: 1;
  }
}

@keyframes smaller-title {
  from {
    opacity: 0;
  }

  to {
    font-size: 5.5rem;
    opacity: 1;
  }
}

@keyframes subtitle {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}