* {
    box-sizing: border-box;
}

body { 
    margin: 1.5vw; 
    background: #282b38; /* Or #000000 in hex */ 
    color: #a5b1cd;
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    font-weight: 400;    
}

div.banner {
    background: #2f3445;
    padding-right: 0px;
    padding-left: 0px;
    width: 100%;
    text-align: center;
    color: white;
    outline: solid 1px #a5b1cd;
}

.banner h1,
.banner h2 {
    font-family: 'Playfair Display', 'sans-serif';
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

h2 {
    letter-spacing: -.05vw;
}

div.graph-3d,
div.graph-2d-greeks,
div.graph-payoffs {
    outline: solid 1px #a5b1cd;
    background: #2f3445;
    margin-bottom: 1.5vw;
}

div.graph-format {
    position:absolute;
    width: 55%; 
    display: inline-block;
}

div.ggi-border {
    width: 15%; 
    margin-top: 7vw;
    margin-left: 3vw;
    margin-right: 1vw;
    margin-bottom: 1vw;
    padding: 1vw;
    text-align: justify;
    display: inline-block;
}

div.graph-greek-inputs {
    width: 90%;
    text-align: left;
    float: left;
}

div.psi-border {
    margin-top: 6vw;
    margin-left: 2vw;
    width: 40%;
    display:inline-block;
}

div.graph-3d-figure-box,
#graph_3d_figure {
    height: 100%;
}

div.graph-3d div.graph-format {
    width: 55%;
}

div.graph-2d-greeks div.graph-format, 
div.graph-payoffs div.graph-format {
    width: 75%;
}

div.input-box {
    height: 1.3vw;
}

div.price-surface-inputs {
    float: left;
}

div.pricing-inputs {
    margin-left: 1vw; 
    padding-top: 1vw;
    padding-left: 1vw;
    padding-right: 1vw;
    text-align: left;
    display: inline-block;
}

div.surface-inputs {    
    display: inline-block;
    margin-left: 1vw; 
    margin-bottom: 1vw;
    padding: 1vw;
    text-align: left;
}

div.radio-input {
    padding:0.25vw;
    display: inline-block;
    margin:0.25vw;
    width:30%;
}

div.radio-boxes {
    padding:0.75vw;
    display: inline-block;
    width:100%;
}

div.option-input,
div.direction-input,
div.axis-input {
    width: 33%; 
    display: inline-block
} 

#direction,
#axis {
    display: block;
}

div.type-submit-output {
    font-size: 1.4vw;
    padding: 1vw;
    text-align: left;
    display: inline-block;
}

#spot,
#strike,
#ttm,
#int_rate,
#div_yield,
#imp_vol,
#low_strike,
#mid_strike, 
#high_strike, 
#low_ttm,
#mid_ttm,
#high_ttm,
#ttm_2d,
#ttm_shift {
    background: #a5b1cd;
    font-size: 0.8vw;
}

#submit-button-pricer,
#submit-button-3d,
#submit-button-2d-greeks,
#submit-button-payoffs {
    display:inline-block;
    width: 100%;
    font-size: 1.2vw;
    padding: 0.25vw 0.625vw;
    text-align: center;
    text-decoration: none;
    color: hsl(215, 20%, 95%);
    background: linear-gradient(to bottom, hsl(215, 80%, 60%), hsl(215, 80%, 40%));
}

#calculated-data {
    padding: 0.25vw 1vw;
    font-size: 1.2vw;
    width:100%;
}

div.payoff-input-submit {
    width: 15%; 
    margin-top: 7vw;
    margin-left: 3vw;
    margin-right: 1vw;
    margin-bottom: 1vw;
    padding: 1vw;    
    display: inline-block;
}

div.payoff-inputs {
    width: 90%;
    text-align: left;
    float: left;
}

label.field-labels {
    font-size: 1vw;
    text-align: center;
    font-weight: bold;
}

#hidden-values {
    display: none;
}

@media screen and (orientation: landscape) {
    body {
        font-size: 0.8vw;
    }
    
    input.opt_greek_buttons,
    input.opt_type_buttons,
    input.opt_direction_buttons,
    input.opt_axis_buttons,
    input.y_axis_buttons,
    input.x_axis_buttons,
    input.payoff_type_buttons,
    input.payoff_value_buttons,
    input.payoff_direction_buttons {
        height: 0.8vw;
        width: 0.8vw;
    }

    .banner h1 {
        padding-top: 1vw;
        padding-bottom: 1vw;
        margin-bottom: 1.5vw;
        font-size: 5vw;
        line-height: 1;
    }

    .banner h2{
        font-size: 2.5vw;
        line-height: 1;
        padding-top: 1vw;
        padding-bottom: 1vw;
        margin-bottom: 1.5vw;    
    }

    div.psi-border,
    div.ggi-border,
    div.payoff-input-submit {
        margin-top: 1vw;
    }
  
    div.graph-2d-greeks,     
    div.graph-format,
    div.graph-payoffs,
    div.graph-2d-greeks-box {
        height: 45vw;
    }

    div.graph-3d {
        height: 45vw;
    }

    div.graph-3d div.graph-format {
        height: 45vw;
    }
    
    #graph-2d-greeks,
    #graph-payoffs {
        height: 42vw;
    }
}

@media screen and (orientation: portrait) { 
    body {
        font-size: 0.9vw;
    }

    input.opt_greek_buttons,
    input.opt_type_buttons,
    input.opt_direction_buttons,
    input.opt_axis_buttons,
    input.y_axis_buttons,
    input.x_axis_buttons,
    input.payoff_type_buttons,
    input.payoff_value_buttons,
    input.payoff_direction_buttons {
        height: 0.9vw;
        width: 0.9vw;
    }

    .banner h1 {
        padding-top: 1.5vw;
        padding-bottom: 1.5vw;
        margin-bottom: 2.5vw;
        font-size: 6vw;
        line-height: 1;
    }

    .banner h2{
        font-size: 3vw;
        line-height: 1;
        padding-top: 0.75vw;
        padding-bottom: 0.75vw;
        margin-bottom: 2vw;    
    }

    div.psi-border,
    div.ggi-border,
    div.payoff-input-submit {
        margin-top: 1vw;
    }

    div.graph-2d-greeks,     
    div.graph-format,
    div.graph-payoffs,
    div.graph-2d-greeks-box {
        height: 50vw;
    }
    
    div.graph-3d {
        height: 50vw;
    }

    div.graph-3d div.graph-format {
        height: 45vw;
    }

    #graph-2d-greeks,
    #graph-payoffs {
        height: 47vw;
    }
}

@media only screen 
and (min-device-width: 810px) 
and (max-device-height: 1366px) 
and (orientation: landscape)
and (-webkit-device-pixel-ratio : 2) {
    div.psi-border,
    div.ggi-border,
    div.payoff-input-submit {
        margin-top: 1vw;
    }
  
    div.graph-2d-greeks,     
    div.graph-format,
    div.graph-payoffs,
    div.graph-2d-greeks-box {
        height: 50vw;
    }

    div.graph-3d {
        height: 55vw;
    }

    div.graph-3d div.graph-format {
        height: 52vw;
    }
    
    #graph-2d-greeks,
    #graph-payoffs {
        height: 50vw;
    }
}

@media only screen 
and (min-device-width: 810px) 
and (max-device-height: 1366px) 
and (orientation: portrait)
and (-webkit-device-pixel-ratio : 2) {
    div.psi-border,
    div.ggi-border,
    div.payoff-input-submit {
        margin-top: 1vw;
    }
  
    div.psi-border {
        width: 43%; 
    }

    div.graph-2d-greeks,     
    div.graph-format,
    div.graph-payoffs,
    div.graph-2d-greeks-box {
        height: 50vw;
    }

    div.graph-3d {
        height: 51vw;
    }

    div.graph-3d div.graph-format {
        height: 47vw;
        width: 52%;
    }
    
    #graph-2d-greeks,
    #graph-payoffs {
        height: 50vw;
    }
}

@media only screen 
and (min-device-width: 375px) 
and (max-device-height: 812px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio : 3) { 
    body {
        font-size: 0.6vw;
    }

    input.opt_type_buttons,
    input.opt_direction_buttons,
    input.opt_axis_buttons,
    input.y_axis_buttons,
    input.x_axis_buttons,
    input.payoff_type_buttons,
    input.payoff_value_buttons,
    input.payoff_direction_buttons {
        height: 0.6vw;
        width: 0.6vw;
    }

    #opt_data {
        font-size: 0.6vw;
    }

    input.opt_greek_buttons {
        height: 0.6vw;
        width: 0.6vw;
    }

    div.psi-border,
    div.ggi-border,
    div.payoff-input-submit {
        margin-top: 0;
    }

    div.graph-2d-greeks,     
    div.graph-format,
    div.graph-payoffs,
    div.graph-2d-greeks-box {
        height: 45vw;
    }
    
    div.graph-3d {
        height: 45vw;
    }

    div.graph-3d div.graph-format {
        height: 42vw;
        width: 50%;
    }

    #graph-2d-greeks,
    #graph-payoffs {
        height: 45vw;
    }
}

@media only screen 
and (min-device-width: 375px) 
and (max-device-height: 812px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio : 3) { 
    body {
        font-size: 1.2vw;
    }

    input.opt_type_buttons,
    input.opt_direction_buttons,
    input.opt_axis_buttons,
    input.y_axis_buttons,
    input.x_axis_buttons,
    input.payoff_type_buttons,
    input.payoff_value_buttons,
    input.payoff_direction_buttons {
        height: 1.2vw;
        width: 1.2vw;
    }

    label.field-labels {
        font-size: 1.4vw;
    }

    #opt_data {
        font-size: 0.9vw;
    }

    input.opt_greek_buttons {
        height: 0.9vw;
        width: 0.9vw;
    }

    div.psi-border,
    div.ggi-border,
    div.payoff-input-submit {
        margin-top: 1vw;
    }

    div.graph-2d-greeks,     
    div.graph-format,
    div.graph-payoffs,
    div.graph-2d-greeks-box {
        height: 60vw;
    }
    
    div.graph-3d {
        height: 53vw;
    }

    div.graph-3d div.graph-format {
        height: 46vw;
        width: 50%;
    }

    #graph-2d-greeks,
    #graph-payoffs {
        height: 60vw;
    }

    div.psi-border {
        width: 43%;
    }

    div.ggi-border,
    div.payoff-input-submit {
        width: 20%;
    }

    div.graph-2d-greeks div.graph-format, 
    div.graph-payoffs div.graph-format {
    width: 70%;
    }
}