:root {
    --text: #000000;
    --background: #00FF00;
    --outline: #000000;
    --shadow: #00EE00;
}

input[type="file"]::file-selector-button {
    background-color:var(--background);
    color: var(--text);
    border-radius:20px;
    box-shadow:var(--shadow) 4px -3px inset;
    font-size: 1.0rem;
    font-weight:400;
    padding:0.15rem 1rem;
    border:1px solid var(--outline);
}

input[type="file"]::file-selector-button:active {
  transform: scale(1.025);
}
/* input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
} */

/* THIS IS DONE ONLY ON SMALL SCREENS */
@media (max-width: 980px) {  /* My iPhone 7 width must be 980px.  Setting value to 0-979px this is not done, 980px-inf. it is. */

  input {
    border-radius:20px;
    font-weight:300;
    font-size: 1.0rem;
    /* padding:0.15rem 1rem; */
  }

  input[type="file"]::file-selector-button {
    border-radius:20px;
    box-shadow:var(--shadow) 4px -3px inset;
    font-weight:300;
    /* font-size: 1.5rem;
    padding:0.15rem 1rem; */
  }
}