@view-transition {
    navigation: auto;
}


        
        ::-webkit-scrollbar {
            background: none;
            scrollbar-width: thin;
            width: 3px;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border-color);
        }

        :root {
        --background: #000B22;
        --text: #c7c7c7;
        --border-color: rgba(0, 86, 247, 0.36);
        --border: var(--border-color) 1px solid;
        }

        *{
            padding: unset;
            margin: unset;
            box-sizing: border-box;
            scroll-behavior: smooth;
            transition: all 0.077s ease-out;
        }
        
        html{
            font-family: "resttext";
            height: 100svh;
            width: 100svw;
            background: var(--background);
            overflow:hidden;
            color: var(--text);

            svg{
                width: 25px;
                height: 25px;
            }
        } 
        
        body{
            height: 100%;
            width: 100%;
            color: var(--text);
            display: grid;
            justify-content: center;
            overflow-y: auto;
            overflow-x: none;
            padding: 1rem;
            justify-items: center;
            font-size: clamp(11px, 2vw, 1.3rem);

            .actionbuttons{
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
            }

            a{
                color: currentColor;
                text-decoration: none;
                &.tu{
                    text-decoration: underline;
                }            
            }
            
            [bylog]{
                display: flex;
                align-items: center;
                gap: 1ch;
                
            }

            input, textarea, button, .btn {
                background: transparent;
                padding: 0.7rem;
                border: rgba(0, 86, 247, 0.36) 1px solid;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-grow: 1;
                gap: 3px;
            }

            input:-webkit-autofill {
                -webkit-box-shadow:0 0 0 50px var(--background) inset; /* Change the color to your own background color */
                -webkit-text-fill-color: var(--text);
            }

            input:-webkit-autofill:focus {
            -webkit-box-shadow:0 0 0 50px var(--background) inset; /* Change the color to your own background color */
                -webkit-text-fill-color: var(--text);
            } 

            textarea{
                color: var(--text);
                width: 100%;
                height: auto;
            }

            input{
                color: var(--text);
            }

            .btn-success{
                background:rgb(0, 75, 0);
                color: var(--text);
            }
            .btn-info{
                background:rgb(0, 35, 75);
                color: var(--text);
            }
            .btn-warning{
                background: rgb(171, 125, 0);
                color: var(--background);
            }
            .btn-danger{
                background:rgb(75, 0, 0);
                color: var(--text);
            }

            form{
                width: 100%;
                gap: 1rem;
                display: grid;
                
            }

            .rest_h1
            {
                height: min-content;
                display: flex;
                justify-content: center;
                gap: 1rem;
                flex-wrap: wrap;
                align-items: center;

                font-size: clamp(2svw, 5svw, 32px);

                svg {
                    width: auto !important;
                    height: clamp(5svw, 8svw, 50px);
                }
            }

        }

        
    #rest-named{
        align-items: center;
    }

.rest-info{
    letter-spacing: 1px;
    display: flex;
    white-space: no-wrap;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;

    h4{
        width: 100%;
        text-align: center;
    }
    
    a{

        > *{
            display: flex;
            gap: 1ch;
            align-items: center !important;
        }
    }

    .rest-name{
        width: 100%;
        position: relative;
        gap: 1rem;
        font-size: clamp(40px, 10vw, 100svw);
        display: grid;
        grid-template-columns: clamp(40px, 10vw, 100svw) 1fr;

        svg{
            width: clamp(40px, 10vw, 100svw);
            height:auto;
        }
    }

    .rest-details{
        border: 1px solid whitesmoke;
        padding: 10px;
        border-radius: 0 10px;
        font-size: clamp(11px, 2vw, 1.3rem);
    }
}

.rest-gallery {
    gap: 0;
    box-shadow: 0px 0px 20px 1px rgba(0, 37, 78, 0.6);
    backdrop-filter: blur(7px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(177px, 233px, 300px), 1fr));
}

.rest-gallery img {
    width: 100%;
    transition: all 0.3s ease;
    grid-row-end: span var(--row-span);

    &:hover {
        transform: scale(1.05);
        filter: brightness(1.05);
        z-index: 1;
        position: relative;
        box-shadow: 0px 0px 100px 25px rgba(0, 0, 0, 1);
    }
}

.rest-rating{
    display: flex;
    align-items: center !important;
}

.rest-desc, .rest-menu, .rest-review, .rest-location, .rest-open{
    border: 1px solid var(--text);
    border-radius: 0 10px;
    padding: 1rem;
    letter-spacing: 2px;
    backdrop-filter: brightness(0.9);
    text-shadow: #000000 0 0 10px;
    text-align: justify;
    font-size: clamp(10px, 3vw, 20px);
}

.rest-menu{
    padding: 1rem;
    font-size: clamp(11px, 2.5vw, 1.7em);

    h3{
        border-bottom: 2px solid #ccc;
        margin-top: 2rem;
        padding-bottom: 0.4rem;
        font-size: 1.7em;
    }

    h2{
        text-align: center;
        &:has(svg)
        {
            svg{
                height: clamp(5svw, 13svw, 53px);
                width: auto;
            }
        }
    }

    ul{
        list-style: none;
        padding-left: 0;
    }

    li{
        margin: 0.7rem 0;
        font-size: clamp(14px, 2.5vw, 1.17em);
        display: flex;
        justify-content: space-between;
        [ulspf]
        {
            font-weight: unset;
            display: grid;
        }
    }

    span{
        font-weight: bold;
    }

    small{
        font-size: clamp(11px, 2vw, 1.3rem);
        text-align: left;
    }
        

    table{
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1.5rem;
    }

    th, td{
        border: 1px solid currentColor;
        padding: 0.6rem;
        text-align: center;
    }

    th{
        font-weight: bold;
    }

    .tl{
        text-align:center;
    }
}

[rest-h2ws]
{
    display: flex;
    align-items: center;
    svg{
        height: clamp(5svw, 13svw, 53px);
        width: auto;
    }
}

.rest-review{
    h3{
        display: grid;
        .span{
            align-items: center;
            justify-content: space-between;
            border-bottom: 0.1px solid var(--text);
            &:has(svg){
                display: flex;
                
            }
        }
    }

    [sp2]{
        text-align: end;
    }
}

.rest-location{
    h3{
        display: grid;
        gap: 1ch;
        span{
            display: flex;
            gap: 7px;
            align-items: center;
        }
    }
}

[rest-ifrm]{
    max-height: 67svh;
    height: 100svh;
    width: 100%;

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

.rest-open{
    h3{
        display: grid;
        gap: 1ch;
        
        > * {
            display: flex;
            justify-content: space-between;
            border-bottom: 0.3px solid var(--text) ;
            
            &:last-child{
                border-bottom: unset;
            }
        }
    }
}

section{
    width: 100%;
    display: grid;
    gap: 1ch;
}

.tl {
    font-size: clamp(33px, 7vw, 70px);
}


::view-transition-old(*),
::view-transition-new(*) {
}