body {
    margin: 0;
    font-family: "Courier New", Courier, mono;
    font-size: 14px;
    background-color: white;
}

.E {
    font: bold 13pt "Courier New", Courier;
    overflow: auto;
}

.q,
input,
button {
    font: bold 14px arial;
}

header {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #444;
    text-decoration: none;
    font-variant: small-caps;
    text-transform: capitalize;
    background-color: #F8E71C;
    ;
    height: 44px;
    line-height: 40px;
}

.main {
    display: flexbox;
    align-items: center;
    padding-left: 20px;
    max-width: 1000px;
    background: white;
    margin-left: auto;
    margin-right: auto;
    height: calc(100vh-100px);
    font: normal 19px stix, consolas, monospace;
}

#OT {
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#passaggi,
#sistema {
    font-family: stix, Serif, Times, arial, Georgia, "Palatino Linotype";
    font-size: 19px;
    color: #000;
    font-weight: normal;
    line-height: 165%;
    margin-right: 10px;
}


img {
    max-width: 100%;
    height: auto;
    /* display:block; */
}

.conta {
    display: inline-block;
    cursor: pointer;
}

#out,
p,
.x {
    font-family: stix, Serif, Times, arial, Georgia, "Palatino Linotype";
    font-size: 19px;
    color: #000;
    font-weight: normal;
    line-height: 165%;
    margin-right: 10px;
}

img.p4 {
    padding-bottom: 4px;
}

img.p6 {
    padding-bottom: 6px;
}

img.p8 {
    padding-bottom: 8px;
}

img.p10 {
    padding-bottom: 10px;
}

img.p12 {
    padding-bottom: 12px;
}

h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 11pt;
    letter-spacing: 2px;
    color: indianred;
    line-height: 150%;
    font-weight: bold;
    text-align: justify;
    border-bottom: 2px solid indianred;
    font-variant: small-caps;
    text-decoration: underline;
    display: inline;
}

.sub {
    font: bold 18px consolas, monospace;
    color: teal;
    text-decoration: none;
}

h3 {
    font: bold 18px consolas, monospace;
    color: firebrick;
    text-decoration: none;
}

.AES {
    background: #FF9;
    padding: 3px;
    border-bottom: 2px solid black;
}

img.ARIQUADRO {
    border: 2px solid indianred;
    padding: 8px;
    background: #FF9;
}

img.AFORMULA {
    vertical-align: middle;
    padding-bottom: 8px;
}

.AEVIDENZIATO {
    background: #FF9;
    padding: 3px;
}

.ASOTTOLINEATO {
    border-bottom: 2px solid black;
}

.bg {
    background: teal;
    color: white;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
}

input,
.q,
#output {
    font: bold 14px arial;
    color: black;
}

a.jk:link {
    color: red;
    text-decoration: none;
}

a.jk:visited {
    color: red;
    text-decoration: none;
}

a.jk:hover {
    color: red;
    border-bottom: 3px solid red
}

a.kj:link {
    font-family: monospace;
    color: #055;
    font-weight: bold;
    font-size: 17px;
    text-decoration: none;
}

a.kj:visited {
    font-family: monospace;
    color: #055;
    font-weight: bold;
    font-size: 17px;
    text-decoration: none;
}

a.kj:hover {
    font-family: monospace;
    color: #055;
    font-weight: bold;
    font-size: 17px;
    ;
    border-bottom: 4px solid #055;
}

/* --- ESERCIZI --- */
a {
    text-decoration: none;
}

h2 {
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    text-align: left;
    font-size: 13pt;
    letter-spacing: 3px;
    color: #454;
    /* line-height: 150%; */
}

.flex-container {
    display: flex;
    flex-direction: column;
}

.flex-container>div {
    max-width: 700px;
    margin: 5px;
    padding-left: 10px;
}


.flex-container>div:hover {
    background: #F8E71C;
}

/* --- -------- --- */

.circle {
    font-family: Consolas, monospace, "Courier New", Courier, mono;
    font-weight: bold;
    font-size: 17px;
    background: teal;
    color: white;
    padding: 2px 7px;
    border-radius: 50%;
}

.circle2 {
    font-family: Consolas, monospace, "Courier New", Courier, mono;
    font-weight: bold;
    font-size: 17px;
    background: teal;
    color: white;
    padding: 2px 3px;
    border-radius: 50%;
}

table,
td,
th {
    border: 1px solid;
}

table {
    max-width: auto;
    border-collapse: collapse;
    font: bold 16px consolas, monospace;
}

.f {
    overflow-x: auto;
    overflow-y: hidden;
}

math,
.ma-block {
    display: inline-block;
    text-align: left;
}

/* STRIKE! */
.j {
    background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}

.yellow {
    border: 2px solid crimson;
    background: #FF9;
    padding: 12px;
    display: inline-block;
}

/* ----------- MEDIA ------------------------- */
@media only screen and (max-width: 480px) {

    
    .main {
        padding-left: 5px;
    }

    a.kj:link,
    hover,
    visited {
        font-family: consolas, monospace;
        color: #055;
        font-weight: bold;
        font-size: 17px;
        ;
        border-bottom: 4px solid #055;
    }

    a.jk:link,
    visited,
    hover {
        color: red;
        border-bottom: 3px solid red
    }

}