@import '../public/stylesheets/variables';

div.App {
  max-height: 100vh;
  max-width: 100vw;
  line-height: 1.25em;
  padding: 1em;

  a {
    color: map-get($colors, 'text-input')
  }

  h1 {
    font-size: 2em;
    padding: 1em 0;
  }

  h3 {
    font-size: 1.25em;
    padding: 0.5em 0;
  }

  h5 {
    font-size: 1.1em;
    padding: 0.1em 0;
    font-weight: 800;
  }

  div.PhonoChangeApplier--gui {
    display: grid;
    width: 100%;
    place-items: center center;
    grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
    
    div {
      max-width: 100%;
      max-height: 85vh;
      margin: 1em;
      overflow-y: scroll;
    }
  }

  div.PhonoChangeApplier--latl {
    display: flex;
    flex-flow: row wrap;
    
  }

  button.form, input[type="submit"].form, input[type="button"].form {
    height: 2em;
    border-radius: 0.25em;
    border-color: transparent;
    margin: 0.2em auto;
    width: 10em;
  }

  button.form--add, input[type="submit"].form--add, input[type="button"].form--add{
    background-color: greenyellow;
    color: black;
  }
  
  button.form--remove, input[type="submit"].form--remove, input[type="button"].form--remove {
    background-color: red;
    color: white;
  }
}