.inner-content{
    max-width: 40rem;
    margin-inline: auto;
}
.inner-content article{
    margin-bottom: var(--space-sm);
}
.inner-content article a{
    text-decoration: none;
}
.content-wrapper > *:not(:last-child), .child-spacing > *:not(:last-child){
    margin-bottom: var(--space-sm);
}
.child-spacing--level-2 > *:not(:last-child){
    margin-bottom: var(--space-xs);
}
.marked{
    background-color: rgba(255, 255, 0, .5);
}
img{
    width: 100%;
    height: auto;
}
svg.open-blank-icon{
    width: .7em;
    height: .7em;
}
svg.open-blank-icon path {
  fill: none;
  stroke: currentColor;
  stroke-miterlimit: 100;
  stroke-width: 10
}
.ws-nowrap{
    white-space: nowrap;
}
.display{
    padding: clamp(2rem, 1.694rem + 1.53vw, 3rem) clamp(1.25rem, 1.0206rem + 1.1472vw, 2rem);
    border: 1px solid rgba(0, 0, 0, .2);
}
.display p{
    font-size: clamp(1.5rem, 0.765vw + 1.347rem, 2rem);
    font-weight: 700;
    text-align: center;
    color: #333;
}
pre {
    background-color: #f9f9f9;
    padding: 1.2em 1.5em;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, .2);
}
.input-wrapper{
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.input-wrapper input{
    flex-grow: 1;
}
#check-builder-btn{
    min-width: 9.375rem;
    max-width: unset;
    
}
#check-builder-btn.active{
    position: relative;
    color: transparent;
}
@keyframes sh-spin {
    0%{
        transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotateZ(360deg);
    }
}
#check-builder-btn.active::after{
    content: '';
    width: 1.5em;
    height: 1.5em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.35 0 5.675-2.325T20 12q0-.175-.003-.353t-.022-.341q-.067.667-.53 1.104q-.464.436-1.137.436h-2.539q-.698 0-1.195-.496t-.497-1.193v-.845h-3.385v-1.69q0-.697.498-1.198q.497-.501 1.195-.501h.846v-.77q0-.728.476-1.146t1.137-.482q-.673-.26-1.38-.392T12 4Q8.65 4 6.325 6.325T4 12v.289q0 .134.02.288H8.5q1.42 0 2.402.983q.983.982.983 2.393v.855H9.346v2.73q.616.222 1.286.342T12 20'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    animation: sh-spin 4s linear infinite;
}
#builder-result {
    margin-top: var(--space-xs);
    padding-left: .8em;
    border-left: 3px solid var(--color-primary);
}
#builder-result.error {
    color: red;
}
#video-container{
    position: relative;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--color-primary);
}
#video-container.video-added::after{
    content: "";
    background-color: white;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
}
#video-container button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:0;
    background-color:transparent;
    border:none;
    cursor: inherit;
}
nav.post-navigation {
    display: flex;
    justify-content: space-between;
    column-gap: var(--space-sm);
    row-gap: var(--space-xs); 
    flex-wrap: wrap;
}
nav.post-navigation a{
    white-space: nowrap;
}
/* RESPONSIVE */
@media (max-width: 480px){
    .inner-content .display p{
        text-align: left;
    }
    .input-wrapper{
        flex-direction: column;
        align-items: stretch;
    }
}