fieldset {
    margin: 0;
    padding: 0;
}

form.photon {
    float: left;
}

form.photon>fieldset {
    border: 1px solid #ccc;
    padding: .5em;
}

form.photon input {
    background-color: #fff;
    border: none;
    -moz-border-radius: 4px;
    /* Mozilla / Firefox */
    -webkit-border-radius: 4px;
    /* Safari / Chrome */
    border-radius: 4px;
    /* CSS3 */
    margin-right: 1em;
    padding: .5ex;
}

form.photon fieldset#params {
    width: 39.5em;
}

form.photon fieldset#info {
    width: 60em;
}

form.photon fieldset.buttons {
    border: none;
    text-align: right;
    margin-top: 1em;
}

form.photon>fieldset>label {
    display: inline-block;
    width: 9em;
}

form.photon>fieldset>input {
    margin-bottom: .5em;
}

form.photon>fieldset>input:last-child {
    margin-bottom: 0;
}

.canvasHolder {
    float: left;
    margin-bottom: 2em;
    margin-right: 2em;
}

#log {
    background-color: hsl(233, 11.1%, 15.9%);
    -moz-border-radius: 4px;
    /* Mozilla / Firefox */
    -webkit-border-radius: 4px;
    /* Safari / Chrome */
    border-radius: 4px;
    /* CSS3 */
    color: #eee;
    height: 75vh;
    margin-bottom: 1em;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5em;
    width: 100%;
}
/* media querries fow chat height on different standard resolutions */
@media only screen and (max-width: 1920px) {
    #log {
     height: 70vh;
    }
}

@media only screen and (max-width: 1600px) {
    #log {
     height: 65vh;
    }
}

@media only screen and (max-width: 1366px) {
    #log {
     height: 60vh;
    }
}

@media only screen and (max-width: 1024px) {
    #log {
     height: 26vh;
    }
}
  
@media only screen and (max-width: 768px) {
    #log {
        height: 27vh;
    }
}
  
  @media only screen and (max-width: 360px) {
    #log {
      height: 25vh;
    }
  }