@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

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

.container {
  padding: 10px 10%;
}

.calculator {
  display: flex;
  flex-direction: column;
}


.calculator-left {
  flex-basis: 35%;
}

.calculator-left form {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 5px 0;
}

.calculator-left form input {
  display: flex;
  border: 0;
  outline: none;
  background: #262626;
  padding: 15px;
  margin: 5px 0;
  color: white;
  font-size: 18px;
  border-radius: 6px;
  resize: none;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove spinner buttons in Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.subtitle {
  font-size: 40px;
  font-weight: 600;
  color: white;
}

.subtitle h1 span {
  color: rgb(12, 207, 12);
}

.calculator-left .subtitle {
  margin-bottom: 15px;
}

#years {
  margin-top: 10px;
}

form .btn {
  transition: 0.5s;
}

form .btn:hover {
  background:rgb(12, 207, 12);
  cursor: pointer;
}

.copyright {
  width: 100%;
  text-align: center;
  margin: 75px 0;
  font-weight: 300;
}

.copyright i {
  color: rgb(12, 207, 12);
}