[data-unit="tab-container"] {
    font-size: 0;
    letter-spacing: 0;
    margin: 2rem 0;
    text-align: left;
}

    [data-unit="tab-container"] input[type="radio"] {
        display: none;
    }

    [data-unit="tab-container"] input + label {
        width: 33%;
    }

    [data-unit="tab-container"] input:checked + label {
        background: #e8daf7;
        color: black;
        font-weight: bolder;
    }

    [data-unit="tab-container"] input#tabPhoto:checked ~ .line {
        left: 0;
    }

    [data-unit="tab-container"] input#tabPhoto ~ [data-unit="photo-section"] {
        display: none;
        opacity: 0;
    }

    [data-unit="tab-container"] input#tabPhoto:checked ~ [data-unit="photo-section"] {
        display: block;
        opacity: 1;
    }
    
    [data-unit="tab-container"] input#tabVideo:checked ~ .line {
        left: 33%;
    }
        
    [data-unit="tab-container"] input#tabVideo ~ [data-unit="video-section"] {
        display: none;
        opacity: 0;
    }

    [data-unit="tab-container"] input#tabVideo:checked ~ [data-unit="video-section"] {
        display: block;
        opacity: 1;
    }

    [data-unit="tab-container"] input#tabArchives:checked ~ .line {
        left: 66%;
    }

    [data-unit="tab-container"] input#tabArchives ~ [data-unit="archives-section"] {
        display: none;
        opacity: 0;
    }

    [data-unit="tab-container"] input#tabArchives:checked ~ [data-unit="archives-section"] {
        display: block;
        opacity: 1;
    }

    [data-unit="tab-container"] label {
        display: inline-block;
        font-size: 18px;
        height: 36px;
        line-height: 36px;
        width: 33%;
        text-align: center;
        background: #f4f4f4;
        color: #555;
        position: relative;
        transition: 0.25s background ease;
        cursor: pointer;
    }

        [data-unit="tab-container"] label::after {
            content: "";
            height: 2px;
            width: 100%;
            position: absolute;
            display: block;
            background: #ccc;
            bottom: 0;
            opacity: 0;
            left: 0;
            transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
        }

        [data-unit="tab-container"] label:hover::after {
            opacity: 1;
        }

    [data-unit="tab-container"] .line {
        position: relative;
        height: 4px;
        background: #7b4eb1; /*#1e88e5;*/
        width: 33%;
        top: 0;
        left: 0;
        transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
    }

    [data-unit="tab-container"] [data-unit="tab-content-container"] {
        background: #eee;
        position: relative;
        height: 100px;
        font-size: 16px;
    }

[data-unit="icon photo"] {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzZweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMzZweCIgZmlsbD0iIzg4OCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMuMiIvPjxwYXRoIGQ9Ik05IDJMNy4xNyA0SDRjLTEuMSAwLTIgLjktMiAydjEyYzAgMS4xLjkgMiAyIDJoMTZjMS4xIDAgMi0uOSAyLTJWNmMwLTEuMS0uOS0yLTItMmgtMy4xN0wxNSAySDl6bTMgMTVjLTIuNzYgMC01LTIuMjQtNS01czIuMjQtNSA1LTUgNSAyLjI0IDUgNS0yLjI0IDUtNSA1eiIvPjwvc3ZnPg==') no-repeat center center;
    padding-left: 36px;
    background-size: contain;
}

[data-unit="icon video"] {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzZweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMzZweCIgZmlsbD0iIzg4OCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOCA0bDIgNGgtM2wtMi00aC0ybDIgNGgtM2wtMi00SDhsMiA0SDdMNSA0SDRjLTEuMSAwLTEuOTkuOS0xLjk5IDJMMiAxOGMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjRoLTR6Ii8+PC9zdmc+') no-repeat center center;
    padding-left: 36px;
    background-size: contain;
}

[data-unit="icon archives"] {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzZweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMzZweCIgZmlsbD0iIzg4OCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yMC41NCA1LjIzbC0xLjM5LTEuNjhDMTguODggMy4yMSAxOC40NyAzIDE4IDNINmMtLjQ3IDAtLjg4LjIxLTEuMTYuNTVMMy40NiA1LjIzQzMuMTcgNS41NyAzIDYuMDIgMyA2LjVWMTljMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY2LjVjMC0uNDgtLjE3LS45My0uNDYtMS4yN3pNMTIgMTcuNUw2LjUgMTJIMTB2LTJoNHYyaDMuNUwxMiAxNy41ek01LjEyIDVsLjgxLTFoMTJsLjk0IDFINS4xMnoiLz48L3N2Zz4=') no-repeat center center;
    padding-left: 36px;
    background-size: contain;
}

[data-unit="tab-container"] > label > strong {
    display: inline;
}

@media screen and (max-width: 600px) {
    [data-unit="tab-container"] > label > strong {
        display: none;
    }
}

/* temporary style */
.webassembly-only, [data-unit=web-accessibility] {
	position: absolute!important;
}