* {
    box-sizing: border-box;
  }

  body {
      margin: 0;
      min-height: 100vh;
      background-image: url('https://images.unsplash.com/photo-1504253163759-c23fccaebb55?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80');
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
  }

  header {
      font-family: helvetica;
      color: white;
      text-align: center;
      text-shadow: 1px 1px 2px #6b6a6a;
      padding: .75rem;
  }

 main {
    text-align: center;
    flex-grow: 1;
    text-shadow: 1px 1px 2px #6b6a6a;
 }

 form {
     text-align: left;
     font-family: helvetica;
     background-color: #6e848592;
     padding: 1.25rem;
     border-radius: 4px;
 }

 input[type=text] {
     width: 100%;
     margin-top: .5rem;
     margin-bottom: .5rem;
     padding: .3rem 1rem;
     border: none;
     border-radius: 4px;
 }

 #file-input {
    width: 100%;
}

 input[type=file] {
     width: 100%;
     max-width: 25rem;
     margin-top: .5rem;
     margin-bottom: .5rem;
     cursor: pointer;
 }

 input[type=file]::file-selector-button {
     cursor: pointer;
     border: none;
     border-radius: 4px;
     color: #343333;
     padding: 4px;

 }

 input[type=file]::file-selector-button:hover {
     background-color: #cacdcb;
 }

 #button {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
}

input#gen-cloud {
    width: 100%;
    margin-top: .625rem;
    padding: .5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    background-color: #3083e9bf;
}

#collapse {
    width: 100%;
    margin-top: .625rem;
    padding: .5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: grey;
    font-size: .7rem;
}

#collapse:hover {
    background-color: #cacdcb;
}

input#gen-cloud:hover {
    background-color: #2664e9cb;
}

 select {
     width: 100%;
     margin-top: .5rem;
     margin-bottom: .5rem;
     padding: .3rem 1rem;
     border: none;
     border-radius: 4px;
     cursor: pointer; 
 }

 #show-inputs {
    display: none;
    width: 40%;
    max-width: 10rem;
    padding: .5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: grey;
    font-size: .7rem;
 }

 #show-inputs:hover {
     background-color: #cacdcb;
 }

 #show-button-container {
     display: flex;
     justify-content: center;
 }

 footer {
     display: flex;
     justify-content: center;
     color: rgb(94, 91, 91);
     position: sticky;
     margin-bottom: 0;
 }

 @media screen and (max-width: 27rem) {

     #button {
         gap: .5rem;
     }
 }

 @media screen and (min-width: 50rem) {

    #button {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }

     input#gen-cloud {
         height: 2.25rem;
         width: 45%;
         justify-self: center;
         max-width: 15rem;
    }
    
     #collapse {
         font-size: .7rem;
         height: 1.7rem;
         width: 35%;
         justify-self: end;
         align-self: end;
         max-width: 6rem;
    }

     #selects {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         align-items: center;
         gap: 4rem;
     }

     .select-item {
         outline: 1px solid grey;
         border-radius: 4px;
         text-align: center;
     }

     .select {
         margin-left: .5rem;
         width: 25%;
         max-width: 5rem;
     }

 }