:root {
    --navigationcolor: #5C88DA;
    --backgroundcolor: #6593e9;
    --textcolor:#101820;
}

main{
    margin: auto;
    margin-top: 144px;
    padding: 24px;
    color:black;
}

h3{font-size: 22px;}
h4{font-size: 18px;}

p {font-size: 18px; color:black;}

.font-name{font-weight: 200; font-size: 96px; padding-top: 72px; padding-bottom: 72px;}

.text-row-1-3-2 {
    width: 100%;
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 3fr 2fr;
    padding: 0;
}

.column{padding-bottom: 24px;}

.image{background-color: var(--textcolor);}

.type-tester{
    padding-bottom: 48px; max-width: 67%;
}

.tt{display: inline-flex; width: 100%; padding-bottom: 18px; padding-top: 18px;}

.sample {
    margin-top: 60px;
    font-size: 48px;
    line-height: 120%;
}

.fw-1{
    font-weight: 1;
}
.fw-100{
    font-weight: 100;
}
.fw-200{
    font-weight: 200;
}
.fw-300{
    font-weight: 300;
}
.fw-400{
    font-weight: 400;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}
.fw-700{
    font-weight: 700;
}
.fw-800{
    font-weight: 800;
}
.fw-900{
    font-weight: 900;
}

.px-120{
    font-size: 120px;
}

.px-96{
    font-size: 96px;
}

.px-54{
    font-size: 54px;
}

.px-48{
    font-size: 48px;
}

.px-32{
    font-size: 32px;
}

.px-20{
    font-size: 20px;
    line-height: 125%;
}


.type-tester-size-change{
    display: inline-flex;
    background-color: var(--navigationcolor);
    border: none;
    gap: 12px;
    padding: 12px 18px;
}

.type-tester-fs-text{padding: 0; margin: 0;}

.range-fs{
    accent-color: var(--textcolor);
    border: none;
    -webkit-appearance: none;
    width: 200px;
    height: 3px;
    border-radius: 0.5px;
    padding: 0;
    background: var(--textcolor);
    outline: none;
    padding: 0;
    margin: auto;
}

select {
    border: none;
    background-color: var(--navigationcolor);
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 18px;
    padding-right: 80px !important;
    margin-right: 12px;
    box-shadow: none;
    text-shadow: none;
    outline-style: none;
    position: relative;
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

select:not([multiple]) {
    padding-right: 1.2em;
    background-repeat: no-repeat;
    background-position: calc(100% - 0.9em) 1.0em;
    background-size: 0.85em auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
}

.type-tester-input{
    font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 01, "ss04" 0, "kern" 0;
    border: none;
    outline: none;
    line-height: 120%;
}

.long-tester{max-width: 100%;}
.range-fs-long{width: 150px;}

@media (max-width: 1000px){.long-tester{display: block;}}


@media (max-width: 700px){
    .font-name{font-size: 48px;}
    .text-row-1-3-2{display: block;}
    .image{padding: 0; }
    .p-descriptor{font-size: 9pt !important;}

    .no-transform-for-mobile{display: grid !important; gap: 18px;}
    .non-last-in-column{padding-bottom: 18px;}

    .type-tester{font-size: 16px; max-width: 100%;}
    .type-tester-fs-text{font-size: 16px;}
    .range-fs{width: 120px;}
    select{padding-right: 36px !important;}

}