@view-transition {
    navigation: auto;
}

:root{
    --background: rgb(0, 0, 0);
    --color: rgb(255, 255, 255);
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: all 0.3s ease-in;
    scroll-behavior: smooth;
}

html{
    min-height: 100dvh;
    scroll-snap-type: y mandatory;
}

html, body{
    background-color: var(--background);
    color: var(--color);
    min-width: 322px;
    font-family: "resttext";

    &[data-theme="dark"]{
        mix-blend-mode: unset;
    }
}

body{
    height: 100%;
    display: flex;
    flex-direction: column;
    place-content: center;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

#modal {
  height: 100dvh;
  width: 100%;
  background-color: rgb(0 0 0);
  color: rgb(255 255 255);
  gap: 1rem;
  justify-content: space-between;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform-origin: 100% 0%;
  pointer-events: none;
  z-index: -1; /* Behind everything when hidden */
  transition: opacity 0.4s ease;

  &.open {
    opacity: 1;
    pointer-events: auto;
    z-index: 9999;
    animation: scale-up-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
  }

  &.closing {
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    animation: scale-down-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
  }
}

@keyframes scale-up-ver-top {
  0% {
    transform: scaleY(0.4);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes scale-down-ver-top {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.4);
  }
}

    [modalcont]{
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
        pointer-events: auto;
        letter-spacing: 2px;
        
        [modalcontul]{
            padding-left: 2rem;
        }

        > * {
            padding: 1rem;

            &:not(:nth-child(2)){
                display: flex;
                align-items: center;
            }
            
            &:not(:last-child) {
                border-bottom: 1px solid;
            }

            &:last-child {
                border-top: 1px solid;
            }
        }

        [modalhead]{
            display: flex;
            justify-content: space-between;

            svg{
                width: 40px;
                height: auto;
            }
        }
   
        [modalactions]{
            display: flex;
            gap: 1rem;
            float: inline-end;
            justify-content: end;
        }
    }


[overlay]{
    position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Note: -50% for both X and Y */
    background-color: #ffffff;
    mix-blend-mode: difference;
    width: 100%; /* Set specific width */
    height: 100%; /* Set specific height */
    pointer-events: none;

    &.rand{
        width: 23%;
        transform: translate(-55%, -4%);
        height: clamp(40dvh, 74dvh, 74dvw);
    }

    &.rand2{
        width: 14%;
        transform: translate(-50%, -10%);
        height: clamp(40dvh, 74dvh, 74dvw);
    }

    &.rand3{
        width: 90%;
        transform: translate(-50%, -90%);
        height: clamp(40dvh, 74dvh, 74dvw);
    }

    &.w77{
        width: 77%;
        transform: translate(-50%, -24%);
        height: clamp(40dvh, 54dvh, 54dvw);
    }

    &.w50{
        width: 50%;
        transform: translate(-50%, -24%);
        height: clamp(40dvh, 54dvh, 54dvw);
    }
    
    &.w33{
        width: 33%;
        transform: translate(-153%, 6%);
        height: clamp(1dvh, 7dvh, 54dvw);
    }

    &.fw{
        width: 100%;
    }

    &.fwb{
        width: 100%;
        background: black;
    }

    &.t3di{
        transform: matrix3d(2,15,1,4);
    }
}

a{
    text-decoration: none;
    color: currentColor;
}


button{
    padding: 1rem;
    border-radius: 1rem;
    border: none;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    mix-blend-mode: difference;
    
    &:hover{
        cursor: pointer;
        background-color: rgb(255, 255, 255);
        color: rgb(0, 0, 0);     
        
        &.mov{
            background-color: rgb(204, 204, 204);
            color: rgb(34, 34, 34);
            mix-blend-mode: darken;
            box-shadow: -7px 7px 2px black;
            transform: matrix(1, 0.1, 0.1, 1, 3, 0) scale(1.1);
        }
    }
}

img{
    /* mix-blend-mode: difference; */
    z-index: 888888888888;
    position: relative;
}

input{
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    mix-blend-mode: difference;

    &:hover{
        cursor: pointer;
        background-color: rgb(255, 255, 255);
        color: rgb(0, 0, 0);     
        
        &.mov{
            background-color: rgb(204, 204, 204);
            color: rgb(34, 34, 34);
            mix-blend-mode: darken;
            box-shadow: -7px 7px 2px black;
            transform: matrix(1, 0.1, 0.1, 1, 3, 0) scale(1.1);
        }
    }
}

[newsletter]{
    display: grid;
    grid-template-columns: 1fr 1fr;

    @media (width <= 720px){
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    gap: 1rem;
    place-content: center;

    [opp]{
        background-color: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
        mix-blend-mode: darken;
        
        &:hover{
            cursor: pointer;
            background-color: rgb(255, 255, 255);
            color: rgb(0, 0, 0);  
            box-shadow: 3px 3px 3px 3px black;
            transform: translate(-3px, -3px);
            
        }
    }
}

svg{
    width: 25px;
    height: 25px;
    fill: currentColor;
}

section{
    padding: 0 3rem;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    scroll-snap-align: start;

    @media screen and (max-width: 720px) {
        padding: 1rem 1rem;
    }

    [cat]{
            float: left;
            transform: skew(10deg, 10deg);
            
            [text]{
                background-color: rgb(255 145 0);
                padding: 1rem;
                font-size: 1.5em;
                font-weight: 700;
            }
        }

    &[hero]{
        [text]{
            font-weight: 900;
            word-break: keep-all;
            text-align: center;
            width: 100%;
            text-align-last: justify;
            padding: 0 2.5vw 0 2.2dvw;
            font-size: small;
        }

        [scroll]
        {
            width: 3rem;
            height: auto;
            transition: unset;
        }
        
        [block]{
            display: grid;
            width: 100%;
            place-items: center;
        }

        @media screen and (max-width: 720px) {
            justify-content: space-evenly;
            
            > * {
                mix-blend-mode: difference;
            }
        }
    }

    &[personal]{
        justify-content: space-evenly;

        [text]{
            font-size: 3dvw;
        }

        div[block]
        {
            display: flex;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            
            > * :not(img){

                mix-blend-mode: difference;
            } 


            a:hover{
                transform: matrix(1, 0.1, 0, 1, 0, 0);
                padding: 1rem;
                cursor: pointer;
                background: #ffffff;
                border-radius: 1rem;
                mix-blend-mode: difference;
                color: currentColor;       
                
                > * {
                    mix-blend-mode: difference;
                }
            }
        }
    }

    &[offers]{
        width: auto;
        padding-inline: 10dvw;
        text-align: center;
        justify-content: space-evenly;
        display: flex;
        gap: 0;

        h1{
            font-size: 2em;
        }
     
           &[stp]{
                h3{
                    text-align: left;
                    font-size: clamp(1rem, 3dvw, 20px);
                }
                    @media screen (min-width: 720px)
                    {
                        font-size: 3dvw;
                    }

                    @media screen (min-width: 333px)
                    {
                        font-size: 1dvw;
                    }

                    [stp_2]{
                        background-color: #ffffff;
                        color: black;
                        display: block;
                        text-align: right;
                        padding: 1rem;
                    }
                    
                    [stp_3]{
                        display: block;
                        text-align: center;
                    }
                }

            }

        [high]{
            padding: 1rem;
            background-color: #ffffff;
            transform: skewX(161deg);
            display: inline-block;
            color: rgb(0, 0, 0);
            mix-blend-mode: difference;
            border: 1px solid rgb(0, 0, 0);
        }
        
        [cat]{
            width: 100%;

            [text]{
                left: 0;
                background-color: rgb(251 143 0);
                padding: 1rem;
                font-size: clamp(1dvw, 1.5em, 40px);
                font-weight: 700;
                display: inline-block;
            }
        }

        [wht]{
             color: var(--background);
        }
    }

    [high]{
        padding: 1rem;
        background-color: blanchedalmond;
        transform: translateX(30px);
    }
    
    [flex]{
        display: flex;
        gap: 1rem;
    }

    a{
        
    }

    [logo]
    {
        width: 100%;
        height: auto;

        svg{
            width: 100%;
            height: auto;
        }
/* 
        @media screen and (max-width: 720px) {
            svg{
                transform: rotate3d(1, 1, 1, 36deg) translate(4rem, 14dvh)
            }
        }
       
        @media screen and (max-width: 440px) {
            svg{
                width: 100dvh;
                transform: rotate3d(1, 1, 1, 53deg) translate(1rem, 39dvh);
            }
        } */
    }


html[resthtml]{
}

[restbody]{
    background-color: #ffffff;
    min-height: 100dvh;
    color: black;
    mix-blend-mode: unset;
    text-shadow: none;
    font-family: "resttext";

    .card{
        color: white;
    }

    [timesvg]{
        fill: unset;
    }

    [bylog]{
        display: flex;
        align-items: center;
        gap: 1ch;
    }

    .card-cont{
        display: grid;
        justify-content: center;
        gap: 1rem;
    }

    #rest-named{
        
    }

    .rest_h1{
        padding-top: 1rem;
        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);
        }
    }
}

[shapeupbody]{
    background-color: #ffffff;
    align-items: center;
    color: black;
    mix-blend-mode: difference;
    min-height: inherit;
    padding: 3rem;
    justify-content: space-between;

    svg{
        width: 10em;
        height: auto;
    }

    img{
        width: 100%;
        max-width: fit-content;
    }

}

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