body {
    margin:0;
    overflow-x:hidden;
    font-family:sans-serif;
}

section {
    min-height:100vh;
    box-sizing:border-box;
    display:flex;
}

section:has(#intro_container) {
    align-items:center;
    justify-content:center;
}

section.single_col {
    border-top:1px dotted #CCC;
    padding:10px;
    box-sizing:border-box;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

section.single_col div {
    max-width:800px;
}

.txt_column {
    width:50%;
    padding:10px;
    border-top:1px dotted #CCC;
    box-sizing:border-box;
}

h3 {
    font-size:1em; color:#CCC;
}

pre {
    white-space:pre-wrap;
    padding-bottom:1.5em;
}

code {
    color:#333;
}

code a {
    color:inherit;
    font-weight:bold;
    text-decoration:none;
    outline:none;
}

code a:hover {
    text-decoration:underline;
}

code b {
    color:black;
}

code .comment {
    color:#CCCCCC;
}

pre:not(:last-child) {
    border-bottom:1px dotted #CCCCCC;
}

.example_container {
    width:50%;
    background-color:#CCC;
    position:relative;
    overflow:hidden;
    min-height:100vh;
    padding:10px; box-sizing: border-box;
    border-top:1px dotted white;
    color:#FFFFFF;
    user-select:none;
}

.child {
    position:absolute;
    background-color:white;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    text-align:center;
    align-items:center;
    justify-content:center;
    color:#CCC;
    box-sizing: border-box;
    padding:10px;
}

#intro_container {
    background-color:#CCC;
    position:relative;
    overflow:hidden;
    user-select:none;
    max-width:500px;
    width:75vh;
    aspect-ratio:1/1;
    border-radius:50%;
}

#intro_circle {
    position:absolute;
    width:150px; height:150px;
    border-radius:50%;
    background-color:white;
    left:50%; top:50%;
    transform:translate(-50%, -50%);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#CCC;
    font-size:18px;
}

#intro_circle small {
    font-size:0.24em;
}

.vertical-dash {
    position:absolute;
    height:100%; width:0; top:0; left:50%;
    border-left:1px dotted white;
    transform:translateX(-50%);
}

.horizontal-dash {
    position:absolute;
    width:100%; height:0; left:0; top:50%;
    border-top:1px dotted white;
    transform:translateY(-50%);
}

#example02 .child , #example04 .child {
    transform:translateY(-50%);
    aspect-ratio:1/1;
}

#example03 {
    background-color:#CCC;
    border-top:1px dotted white;
}

#example04 .child {
    background-color:transparent;
    color:white;
    border:3px solid white;
    font-size:15px;
}