astrosketch/astrosketch.css

body{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), var(--theme-3);
}
canvas{
    width:100%;
  }

  #outputWindow{
    display: none;
  }

  #img{
    display:none;
  }
  .astroContainer{
 
    font-size:16px;
    text-align:center;
    align-items: center;

    /* flex-wrap: wrap; */
    /* {# width: 100%; #} */
  }

  .astroContainer hr{
 
        border:0; 
        height:20px; 
        background:url("/images/divider.gif") 0 0; 
    
  }
  .astroFlex{
    margin-top: 20px;
    display: flex;
    flex: 1;
  }
  .astrotext{
    order:1;
    text-align: left;
  }
  .astroContainer figure{
    order:2;
    margin: auto;
    padding-left: 30px;
  }
  
  .astroContainer label{
    font-size:16px;
    font-family:IBM;
    /* {# margin:10px; #} */
  }
  
  .astroContainer button{
    width:auto;
    height:auto;
    font-size:20px;
  }
  .astroContainer form{
    font-size:16px;
  }
  .astroContainer input{
    font-size:10px;
    /* {# margin: 0 auto !important; #} */
    
  }
  input::file-selector-button{
    font-size:18px;
    
  }
  
  .astroContainer input[type=checkbox]{
    /* {# margin:15px; #} */
  }
  
  .centerButton {
    width:auto;
    text-align:center;
    margin: auto;
    justify-content:center;
    /* {# max-width:200px; #} */
  }
  #dl{
    display:none;
    font-size: 16px;
    text-align: center;
    margin: 15px;
  }
  #result{
     text-align:center; 
     font-size:22px;
     display:none;
  }
  .settings{
  
    font-size:16px !important;
    max-width:400px;
    text-align:center;
    margin:auto;
  }
  
  .field-row{
    margin-top:20px;
    margin-bottom:20px;
    width: 100%;
    /* flex-wrap: wrap; */
  }

  .flexwrap{
    display:flex;
    flex-wrap: wrap;
    width:auto;
    text-align:center;
    justify-content:center;
  }

  .invert, .grayscale{
    display: flex;
    float:left;
    margin: 10px;
  }
  
  .checkboxContainer{
    /* margin:10px; */
    margin-bottom: 10px;
    margin-top: 10px;
  }
  #submitButton{
    margin-bottom:20px;
  }

  @media only screen and (max-width: 800px) {

    .invert, .grayscale{
        float:none; 
       
      }
      .checkboxContainer{
        margin: 0px;
      }
      .left-box{
        padding-right: 5px;
        padding-left: 5px;
      }
  }