:root {
    --default-background-color: rgb(30, 31, 34);

    --banner-background-color: rgb(35, 36, 40);

    --banner-element-background-color: rgb(48, 51, 56);
    --banner-element-hover-background-color: rgb(43, 45, 49);

    --default-text-color: rgb(245, 245, 245);

    --button-background-color: rgb(81, 83, 90);

    --marker_default_border_color: rgba(48, 51, 56, 1);
    --marker_default_background_color: rgba(48, 51, 56, 0.2);

    --marker_a_border_color: rgba(255, 145, 0, 1.0);
    --marker_a_background_color: rgba(255, 145, 0, 0.2);

    --marker_b_border_color: rgb(0, 102, 255);
    --marker_b_background_color: rgba(0, 102, 255, 0.2);
}

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
    color: var(--default-text-color);
    font-size: 15px;

    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

html {
    width: 100%;
    height: 100%;
}

body {
    background-color: var(--default-background-color);
    width: max(300px, 100%);
}

.content,.nocontent {
    margin: auto;
    width: min(750px, 95%);
    height: 100%;

    & p, span {
        text-align: justify;
    }

    & .marker {
        display: flex;
        flex-direction: row;

        & .header {
            font-size: 20px;
            padding: 0px;
            font-weight: 600;
        }

        .border {
            width: 5px;
            position: relative;
            display: inline-block;
        }

        .tooltiptext {
            position: absolute;
            z-index: 2;
            width: 200px;
            background-color: var(--banner-background-color);
            border-radius: 5px;
            border-color: var(--marker_a_border_color);
            border-width: 1px;
            border-style: solid;
            padding: 10px 15px 10px 15px;
            top: 0px;
            right: 250%;
            visibility: hidden;
            text-align: left;
        }

        .border:hover .tooltiptext {
            visibility: visible;
        }
    
        .tooltiptext::before {
            content: "";
            position: absolute;
            transform: rotate(45deg);
            background-color: var(--banner-background-color);
            padding: 5px;
            z-index: 1;
            top: 10px;
            left: calc(100% - 5px);
            border-top-color: var(--marker_a_border_color);
            border-top-width: 1px;
            border-top-style: solid;
            border-right-color: var(--marker_a_border_color);
            border-right-width: 1px;
            border-right-style: solid;
        }

        & .marker_content {
            display: flex;
            flex-direction: column;
            width: calc(100% - 5px);
            padding: 2.5px 10px 5px 10px;

            & *:not(:first-child) {
                padding-top: 10px;
            }
        }
    }

    & .marker.start > .border {
        border-top-left-radius: 5px;
    }

    & .marker.end > .border {
        border-bottom-left-radius: 5px;
    }

    & .marker.start {
        margin-top: 15px;
        border-top-right-radius: 5px;
    }

    & .marker.end {
        border-bottom-right-radius: 5px;
    }

    & .marker {
        background-color: var(--marker_default_background_color);

        & .border {
            background-color: var(--marker_default_border_color);
        }
    }

    & .marker.a {
        background-color: var(--marker_a_background_color);

        .border {
            background-color: var(--marker_a_border_color);
        }
    }

    & .marker.b {
        background-color: var(--marker_b_background_color);
        
        .border {
            background-color: var(--marker_b_border_color);
        }
    }
}