* {
  /* Remove default margins of page body */
  margin: 0 0 0 0;
  /* border: solid red 3px; */
  font-family: sans-serif;
  font-size: large;
}

body {
  background-color: black;
  color: white;
}

div {
  padding: 5px;
}

input {
  padding: 5px;
  background-color: black;
  color: white;
  border: none;
  border-bottom: solid white 1px;
  text-align: right;
}

input:focus {
  border: solid white 1px;
}

select {
  color: white;
  background-color: black;
}

.body {
  display: grid;
  grid-area: body;
  /* border: solid white 3px; */
}

.title {
  grid-area: title;
  /* border: solid yellow 3px; */
  font-size: xx-large;
  text-align: center;
}

.main {
  display: inline-grid;
  grid-area: main;
  grid-template-areas:
    "title title title"
    "logo logo calculator"
    "footer footer footer";
  text-align: center;
  /* border: solid #66f 3px; */
  grid-auto-columns: min-content;
}

.logo {
  grid-area: logo;
  /* border: solid violet 3px; */
  background-image: url(./IMG_3820.JPG);
  height: 560px;
  width: 446px;
  padding: 0px;
}

.calculator {
  display: grid;
  grid-area: calculator;
  grid-template-areas: "text value helper";
  /* border: solid orange 3px; */
  text-align: center;
}

.footer {
  display: grid;
  grid-area: footer;
  font-size: small;
  padding-top: 20px;
}

.admission-text {
  width: 100px;
}

.admission-value {
  width: 100px;
}

.admission-helper {
  width: 200px;
}

@media screen and (max-width: 900px) {
  .main {
    grid-template-areas:
      "title"
      "logo"
      "calculator"
      "footer";
  }
}