/* Travel Calculator CSS */

/* don't forget to validate at https://jigsaw.w3.org/css-validator/ */

body {
  background: #DCDCDC	;
  font-size: 16px;
  height: 100vh; /* trick to make the "page" the full height */
}

input {
    font-size: 2.5em;
    width: 90%;
    color: white;
    background-color: #696969
}


/* minmax funcation used for basic mobile responsive layout */
#travel-calculator-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
    height: 100vh;
}

#travel-calculator-bycar {
    background-image: url("images/car.jpg");
    background-size: cover;
     opacity: 0.75;
}

#travel-calculator-remote {
    background-image: url("images/remote.jpg");
    background-size: cover;
     opacity: 0.75;
}

#travel-calculator-byplane {
    background-image: url("images/plane.jpg");
    background-size: cover;
     opacity: 0.75;
}

img {
    max-width: 100%;
}