/* TYPOGRAPHY */
/* Anything to do with Typesetting
and stuff like this */

h1,h2,h3,h4,h5,h6,b,strong{
    font-family:        var(--fontfamily);
    font-weight:        var(--fontweight);
    line-height:        var(--lineheight);
    hyphens:            var(--hyphens);
    color:              var(--color);
    text-transform:     var(--texttransform);
    margin:             0;
}

h1{font-size:           6rem}
h2{font-size:           5.5rem}
h3{font-size:           5rem}
h4{font-size:           4.5rem}
h5{font-size:           4rem}
h6{font-size:           3.5rem}

p,a,li,label,button,th,td,input,select,textarea{
    font-family:        var(--fontfamily);
    font-weight:        var(--fontweight);
    line-height:        var(--lineheight);
    hyphens:            var(--hyphens);
    color:              var(--color);
    font-size:          2rem;
    margin:             0;
}

input,select,textarea {
    display:            block;
    box-sizing:         border-box;
    height:             4rem;
    width:              100%;
    margin:             .5rem;
    padding:            .5rem 0 .5rem 1rem;
    background:         0 0;
    border:             var(--opaquecolor) 1px solid;
    border-radius:      .5rem;
}

textarea{
    height:             12rem;
}

input[type='submit']{
    height:             auto;
}

input[type='checkbox'],input[type='radio']{
    height:             2rem;
    width:              2rem;
}

select{
    cursor:             pointer;
}

input:focus, select:focus{
    outline:                none;
}

select:focus{
    text-decoration:        underline;
    text-underline-offset:  .5rem;
}

/*Webkit*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance:   none;
  margin:               0;
}

/*Firefox*/
/* input[type=number] {
    -moz-appearance: textfield;
} */

/* p{columns:              55rem;} */

p,h1,h2,h3,h4,h5,h6,span,li,label{
    cursor:             default;
}

span,em,b,strong{
    font-family:        inherit;
    font-size:          inherit;
}

b,strong{
    font-weight:        600;
    color:              var(--color);
}

.description p{
    hyphens:            auto;
}

.description h1, .description h2, .description h3, .description h4, .description h5, .description h6{
    font-family:        var(--paragraph);
    font-weight:        500;
    hyphens:            auto;
}

code{
    position:           relative;
    display:            block;
    background:         #111;
    color:              #ddd;
    font-size:          1.8rem;
    line-height:        150%;
    z-index:            1;
    padding:            8rem 2rem 2rem;
    border-radius:      1rem;
    overflow:           hidden;
}

code::before{
    content:            '';
    position:           absolute;
    height:             6rem;
    width:              100%;
    top:                0;
    left:               0;
    border-bottom:      1px solid #222;
}

code > div{
    height:             100%;
    overflow:           auto;
}

code > div::-webkit-scrollbar-track {background: transparent}
code > div::-webkit-scrollbar-thumb {background: #222;}

code > button.clipboard{
    cursor:             pointer;
    position:           absolute;
    top:                1rem;
    right:              2rem;
    width:              3rem;
    height:             3rem;
    background:         transparent;
    border:             none;
}

code > p.caption{
    position:           absolute;
    top:                1rem;
    font-size:          2.4rem;
}

code em{
    color:              #9aff00;
}

code u, code s{
    text-decoration:    none;
    color:              #ff2700;
}

code s{
    color:              #ffa600;
}

.hoverheading {
    display:            flex;
    justify-content:    center;
    opacity:            .025;
    font-size:          30rem;
    top:                calc(50% - 15rem);
    white-space:        nowrap;
}