@media all and (max-width: 767px) {
        /* smol */
        #title-bar {
        }
        #title {
            font-size: calc(18vw);
            text-align: center;
            position:  absolute;
            top:  0;
            left: 0;
        }
        #logo {
            width:  100%;
            display: flex;
            background-repeat: no-repeat;
            background-origin: 50% 50%;
            background-position: 50% 50%;
            justify-content: center;
        }
        #layer1,#title-layer1 {
            text-shadow: -2px -1px 0 rgba(255,255,0,1);
            display: block;
        }
        #layer2,#title-layer2 {
            mix-blend-mode: darken;
            text-shadow: 1px -1px 0 rgba(0,255,255,1);
        }
        #layer3,#title-layer3 {
            mix-blend-mode: darken;
            text-shadow: 2px 1px 0 rgba(255,0,255,1);
        }
    }
    
    @media not all and (max-width: 767px) {
        /* big */
        #title-bar {
            display:  flex;
        }
        #title {
            font-size: calc(min(256px, 14vw - 20px));
            position:  relative;
        }
        #logo {
            width: 300px;
        }
        #layer1,#title-layer1  {
            text-shadow: -5px -2px 0 rgba(255,255,0,1);
            display: block;
        }
        #layer2,#title-layer2  {
            mix-blend-mode: darken;
            text-shadow: 3px -4px 0 rgba(0,255,255,1);
        }
        #layer3,#title-layer3  {
            mix-blend-mode: darken;
            text-shadow: 5px 2px 0 rgba(255,0,255,1);
        }
    }

    #title-bar {
        position: relative;
        width: 100%;
        height: 256px;
    }
    
    #title {
        display: block;
        height: 100%;
        margin: 0;
        padding: 0;
        text-overflow: clip;
        overflow: hidden;
        white-space:  nowrap;
        line-height: initial;
        width: 100%;
        font-family: "Arial Black", "Arial", serif;
        color: transparent;
        pointer-events: none;
    }

    .layer {
        line-height: 100%;
        position:  absolute;
        text-align: center;
        bottom:  0;
        left:  0;
        width: 100%;
    }
    #logo {
        height: 100%;
        flex-shrink: 0;
    }
    #logo {
        background-image: url("img/error-base.png");
    }
    #logo > a {
        opacity: 0;
    }
    #logo > a:hover {
        opacity: 100;
    }