@media (min-width: 769px) {
  /* Adjusts  positioning of button to align with form inputs on large screen sizes */
  .button__calculate {
    position: relative;
    top: 38%;
  }
}

/* On smaller screens display fuel prices widget and remove navbar fuel widgets*/
@media (max-width: 1087px) {
  .column__fuel-widget {
    max-width: 105px;
    background-color: #cb4b16;
    color: #e4e2ff;
    font-weight: 700px;
    border-radius: 5%;
    display: flex;
  }

  .navbar-end {
    display: none;
    font-weight: 700px;
  }

  .navbar-menu{
    /* Colors background of nav-bar dropdown menu on smaller screen sizes */
    background-color: #cb4b16; 
  }
}
/* On bigger screen sizes hide fuel prices widget */
@media (min-width: 1088px) {
  .section__fuel-widget {
    display: none;
  }
}

html {
  height: 100%;
}

body {
  /* Before I added canvas rules the rule below helped to ensure that background color/image took up entire screen */
  /* min-height: 100%; */
  /* margin-top: 5%; */
  color: #e4e2ff;
  font-family: "Roboto", sans-serif;
}

a {
  color: #f7741a;;
  background-color: transparent;
}
a:hover {
  color: #cb4b16;
}
.title,
.label,
.navbar {
  color: #e4e2ff;
  font-family: Hack, monospace;
}

.navbar {
  /* background-color: #daeafb; */
  background-color: #f7741a;
}

.navbar-end {
  margin-left: 0px;
  background-color: #cb4b16;
}


.navbar-burger, .navbar-burger:hover{
  color:#2c2d40;
}

.section__title--top {
  text-align: center;
  padding-bottom: 20px;
}

.form__columns {
  background-color: #35364b;
  border-radius: 10px;
}

.form__inputs {
  margin-bottom: 5%;
}

.input,
.textarea,
#fuel-type {
  background-color: #2c2d40;
  color: #e4e2ff;
}

.input::placeholder {
  color: #e4e2ff;
  opacity: 1;
}
/* .section__paragraph--top {
  margin-bottom: 5%;
} */

.div__button {
  padding-right: 3%;
}

.section__cards {
  display: none;
}

.section__cards--paragraph {
  line-height: 1.5em;
  background-color: #2c2d40;
  border-radius: 5px;
  padding-top: 2%;
  padding-bottom: 2%;
}

.swal-modal {
  background-color: #2c2d40;
}

.swal-overlay {
  background-color: rgba(203, 75, 22, 0.45);
}

.swal-text {
  color: #e4e2ff;
  font-family: "Roboto", sans-serif;
  line-height: 1.3;
}

.swal-button {
  background-color: #f7741a;
}

.section__cards--fuel-savings {
  margin-top: 3%;
}

/* .card {
  background-color: #af90a9;
} */

.modal-card-foot,
.modal-card-head,
.modal-card-title {
  background-color: #2c2d40;
  color: #e4e2ff;
}

.modal-card-body {
  background-color: #35364b;
}

hr {
  width: 20%;
  margin: 24px auto 24px auto;
}

.button {
  background-color: #f7741a;
  color: white;
}
.button__calculate {
  display: block;
  margin: 0 auto 0 auto;
}

.button__recalculate {
  margin-right: auto;
  margin-left: auto;
  margin-top: 5%;
  display: block;
}

.span__output {
  color: #f7741a;
}

.box,
strong,
.content h1 {
  background-color: #35364b;
  color: #e4e2ff;
}
/* Colors, resizes and repositions the info. icon on calculator cards */
.icon {
  color: #f7741a;
  font-size: 0.5em;
  position: relative;
  bottom: 10px;
  right: 5px;
  cursor: pointer;
}

/*Keeps Footer text fixed to bottom of page */
.footer__text {
  position: fixed;
  bottom: 0px;
  left: 10px;
}

/* ---- reset ---- */
/* body{ 
  margin:0; font:normal 75% Arial, Helvetica, sans-serif; 
}  */

/* Particles.js Canvas */
canvas {
  display: block;
  vertical-align: bottom;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-transition: opacity 0.8s ease, -webkit-transform 1.4s ease;
  transition: opacity 0.8s ease, transform 1.4s ease;
}

/* ---- particles.js container ---- */
#particles-js {
  width: 100%;
  height: 100%;
  z-index: -10;
  top: 0;
  left: 0;
  position: fixed;
  /* background-color: #333333; */
  background-color: #14151c;
  /* background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); */
  /* background-image: linear-gradient(to top, #ebbba7 0%, #cfc7f8 100%); */
  /* background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%); */
  /* background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}