html, body {
width:100%;
height:max-content;
padding:0;
margin:0;
color:black;
cursor:default;
}
body {
display:flex;
flex-direction:column;
align-items:center;
gap:3ch;
font-family:sans-serif;
margin-bottom:10vh;
}
h1, h3 {
max-width:90%;
text-align:center;
}
h3 {
margin:0;
}
#top {
display:grid;
grid-template-columns:auto max-content;
width:105ch;
max-width:90%;
min-height:30vh;
}
.tophalf_container {
display:flex;
flex-direction:column;
gap:1ch;
}
.tophalf {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:1ch;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
#top_hp {
background-image:url('high_pass.png');
}
#top_lp {
background-image:url('low_pass.png');
}
#top_bp {
background-image:url('inv_op_amp_bandpass.png');
}
.text_row {
width:105ch;
max-width:90%;
text-align:justify;
}
.value_input {
display:grid;
grid-template-columns:5ch 10ch 3ch auto;
font-size:150%;
}
.value_input input {
align-self:end;
text-align:right;
font-size:inherit;
color:inherit;
padding:0;
border:none;
background:aliceblue;
}
.value_input input.is_result, .value_input input.is_result+div {
color:forestgreen;
}
.value_input input:focus {
border:none;
outline:none;
}
.value_input div:first-child {
text-align:right;
}
.value_input input, .value_input input+div {
background:aliceblue;
}
.value_input * {
height:100%;
}
#voltage_gain {
font-size:150%;
}
#cc {
position:fixed;
bottom:0;
background:white;
}