@color_back:white;
@color_back_light: #f5f5f5;
@color_text:#222a30;
@color_text_secondary: blue;
@active:grey;

@color_back_dark:#121976;
@color_back_light_dark: #1F1B24;
@color_text_dark: #ff8cfd;
@color_text_secondary_dark:#ec5ae9;
@active_dark:rgb(15, 255, 247);

@block_margin:10vh;

/*@t_base:clamp(43px, 46em, 122px);*/ 
@t_base:clamp(34px, 46em, 122px);
@t_base_mobile:clamp(26px, 46em, 122px);

@t_font1: 'IBM Plex Sans', sans-serif;
@t_font2:'Helvetica Now Variable'; 

@mobile: 758px;
  
@font-face {
	src: url('/site/templates/styles/fonts/HelveticaNowVar.woff2') format('woff2-variations');
	font-family:@t_font2;
	font-style: normal;
}

:root{
    /*font-size: 0.0625vw;*/
    font-size: 0.0425vw;
}

*{
    box-sizing: border-box; 
}

.catbutton(){
    text-decoration: none;
    font-family: @t_font2;
    border-bottom: solid 2px;
    font-variation-settings:  "wdth" 110, "wght" 400;
    transition: all 0.3s ease;
    &.active,&:hover{
        font-variation-settings:  "wdth" 180 ,"wght" 700; /*font-variation-settings:  "wdth" 100 ,"wght" 700;*/   
        /*BANI adds font-stretch: 200%; */
        //*color:@active;*// 
        
        @media (prefers-color-scheme: dark) {
            //* color:@active_dark; *//
        }
    }
}


html{
    height: 100%;
   

    body{
        
        height: 100%;
        width: 100%;
        font-size:  @t_base;
        @media(max-width: @mobile) {
            font-size:  @t_base_mobile;
        }
        font-family:@t_font2;
        /*font-family:'Helvetica Now Variable';*/
        justify-content: center;
        align-items: center;
       
        overflow-x: hidden;
        margin: 0px;
        
        #main{
            padding: 50rem 560rem; 
            @media(max-width: @mobile) {
                padding: 50rem 160rem;
            }
        }
        h1,h2,h3,h4{
                line-height: 110%;
        }
        /*BANI adds h5 to use it as alternative paragraph style*/
        h5 { 
            
            font-weight: 600;
            line-height: 125%;
            font-size: 90%;
        }
        background-color: @color_back;
        color:  @color_text;

        &.t_home{
            header{
                /* Bani adds*/ font-size: 100%;
                h3{
                    font-size: 120%;
                    font-weight: 800;
                    margin-bottom: @block_margin;
                }
                a{
                    .catbutton();
                }
            }
        }

        @media (prefers-color-scheme: dark) {
            background-color: @color_back_dark;
            color:  @color_text_dark;
        }
        
        &.t_post,&.t_basic-page{
            .pagetitle{
                font-size: 1.8em;
                @media(max-width: @mobile) {
                    font-size: 1.2em;
                }
            }
            .summary{
                display: none;
            }
        }
       
        &.t_post,&.t_node{
            header{
                margin-bottom: 0rem;
            }
        }
        .btn{
            background-color: @color_text;
            color: @color_back;
              padding: 0rem 0.3em;
            border-radius: 99999px;
            /* font-size: 90%; */
            /* line-height: 12px; */
            /* display: flex; */
            line-height: 0px;
            svg{
                width: 0.6em;
                height: auto;
                /* height: 100%; */
                position: relative;
                margin: 0.05em;
                rect{
                    @media (prefers-color-scheme: dark) {
                        fill:@color_back_dark; 
                    }
                }
            }
            @media (prefers-color-scheme: dark) {
                background-color: @color_text_dark;
                color: @color_back_dark;
            }
        }
        header{
            width: 100%;
            position: relative;
            z-index: 30;
            /* BANI takes it off to give padding only to container 
            padding: 87rem; */
            padding-bottom: 48rem;
            /*BANI adds*/ font-size: 85%;
           
           .menuline *{
            text-transform: lowercase;
            display: inline;
           }
            h3{
                
                
                margin: 0px;
                /* BANI font-weight: 900;   text-transform: uppercase;*/
                /* BANI off margin-bottom: 20rem; */
            }
            .summary{
                font-size: 1em;  
                margin-block-start: @block_margin;
                margin-block-end: @block_margin;
                * {
                    display: inline;
                }
                strong,b{
                   font-weight: 900;
                /*opacity: 0.5;
                text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
                color:white;*/
                color:@color_text_secondary;
                @media (prefers-color-scheme: dark) {
                    color:@color_text_secondary_dark;
                }
               
                }
            }
            
        }
        &.hovering{
            .works{
              
                .work{
                    opacity: 0.1;
                    h3{
                      
                    }
                    .summary{
                      
                    }
                }
            }
        }

        &.actives{
            header a{
                &.active{
                   
                }
            }
          
            .works{
                .work{
                    font-variation-settings:  "wdth" 50, "wght" 400;
                    
                    h3{
                      
                    }
                    .summary{
                      
                    }
                }
            }
           
        }
        
        a{
            text-decoration: none;
            color: black; 
            /* BAni adds border-bottom: solid 2px;*/
            @media (prefers-color-scheme: dark) {
                color:@color_text_dark;
            }
            &.cat{
                .catbutton();
                
                
            }
            
        }

        .box {

            height: 20vw;
            width: 105vh;
            background-color: white;
            box-shadow: 88px 0px 74px #dcd6f7, 9px 0px 23px #88bef5;
                animation: shadowColorChange 15s infinite; 
            /* border-radius: 20px; */
            position: fixed;
            z-index: 0;

            &::before{
                content: " ";
                display: block;
                width: 169px;
                height: 105vh;
                left: -144px;
                background-color: white;
                position: relative;
            }
        } 
        .padded{
            /* OFF by BANI padding: 87rem;*/
            padding-bottom: @block_margin;

            padding-top: 0px; 
        }
        .works{ 
            display: flex;
            flex-direction: column;
            
            z-index: 20; 
            padding-top: 0rem; /* BANI padding-top: 50rem;*/
            .work{ 
                margin: 30rem 0 10rem 0; /*BANI CHANGED margin-bottom: 80rem;*/
                display: block; /* BANI CHANGED display: inline;*/
                /* BANI added*/ line-height: 80%; font-size: 1.3em;
                
                &.dimmed{
                    opacity: 0.1;
                    /* Bani adds*/ color: #a8a8a8;
                }
                transition: all 0.3s ease;

                    &.active,&:hover{
                        h3{
                            font-variation-settings:  "wdth" 100, "wght" 700;
                           
                        }
                    }
              
                .emoji{
                    /* BANI margin-left: 13rem; */
                    /* BANI ADDED */ display: none;
                }
                &.active{
                    font-variation-settings:  "wdth" 100;
                    opacity: 1;
                    
                    h3{
                        font-variation-settings:  "wdth" 100, "wght" 700;
                        
                    }
                    .summary{
                        font-variation-settings:  "wdth" 100, "wght" 400;
                       
                    }
                }
                h3{
                    font-family: @t_font2;
                }
                h3,.summary {
                    
                    /* BANI took it off display: inline;  font-size: 0.9em; */
                    transition: font-variation-settings 0.3s ease;
                }
                h3{
                    margin:0px;
                    /*padding-right: 10rem; */
                    font-variation-settings:  "wdth" 110, "wght" 500;
                    display: inline;
                
                    &:hover{
                      
                    }
                }
                .summary{
                    font-variation-settings:  "wdth" 90, "wght" 100; /*BANI font-variation-settings:  "wdth" 80, "wght" 200;*/
                    /*BANI ADDED*/ font-size: 0.7em;    
                    
                }
                
               
                
                
            }
        }
        
        .date{
            text-transform: uppercase;
            font-size: 0.4em;
            padding: 40rem 20rem;
            font-weight: 300;
            color: blue;
            @media (prefers-color-scheme: dark) {
                color:@color_text_secondary_dark;
            }
        }
      

        .titular{
            text-align: center;
            padding: 180rem;
            background-color: @color_back_light;
            margin-bottom: 90rem;

            @media (prefers-color-scheme: dark) {
                background-color: @color_back_light_dark;
            }
          
            .emoji{
                margin-top: 60rem;
                margin-bottom: 34rem;
             
            }
            h1{
                margin-top: 0px;
            }
            .summary{
                font-weight: 100;
            }
        }
        .group{
            b{
                font-weight: 200; 
                /* opacity: 0.2; text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
                color:white;*/
                /* BANI */ color: blue;
                font-size: 80%;
                /* BANI color:@color_text_secondary;*/
                @media (prefers-color-scheme: dark) {
                    color:@color_text_secondary_dark;
                }

                padding: 30rem 0; /*BANI padding-right: 20rem;*/
                /* Bani ADDED */ display: block;
            }
        }
        .titleblock{
            padding-bottom: 0px;
            h3{
                margin-bottom: 0px;
            }
        }
        .blocks {
            .block{
                padding: 1em 0;

                a{
                    word-break: break-word;
                }

                &.b_1{
                    h1,h2,h4,h4{
                        &:first-of-type{
                            margin-top: 0px;
                        }
                    }
                    p{
                        font-size: 0.7em;
                    }
                    a{
                        border-bottom: solid 2px;
                        font-variation-settings:  "wdth" 100, "wght" 400;
                        transition: all 0.3s ease;
                        line-height: 110%;
                        display: inline-block;
                        &.active,&:hover{
                            font-variation-settings:  "wdth" 100 ,"wght" 700;   
                        } 
                    }
                    .container{
                        /* BANI takes it offf because padding is only given to container padding: 87rem;*/
                        img{
                            max-width: 100%;
                        }
                        table{
                            max-width: 100%;
                            tr{
                                max-width: 100%;
                                @media(max-width: @mobile) {
                                display: flex;
                                flex-direction: column;
                                max-width: 100%;
                                }
                                td{
                                    border:none !important;
                                    max-width: 100% !important;
                                    @media(max-width: @mobile) {
                                        width: 100% !important;
                                    }
                                    img{
                                        max-width: 100%;
                                        height: auto;
                                    }
                                }
                            }
                        }
                    }
                }

                &.b_2{
                   
                    .container{
                        /* BANI takes it offf because padding is only given to container padding: 87rem; */
                        text-align: center;
                    }
                    p {
                        font-size: 1.4em;
                        font-weight: 200;
                        line-height: 1.2em;
                    }
                }

                &.b_3{
                    //fullimage
                    margin-left: -160rem;
                    margin-right: -160rem; 
                    img{
                        width: 100%; 
                      
                    }
                }

                &.b_4{
                    //centered image
                    padding: 100rem;
                    display: flex;
                    align-items: center;
                    align-content: center; 
                    justify-content: center; 
               
                    img{
                        max-width: 70vw;
                        @media(max-width: @mobile) {
                            max-width: 100vw;
                        }
                    }
                }

                &.b_5{
                    .gallery{
                        
                        /*padding: 112rem;
                        justify-content: space-between; 
                        display: flex; */
                        flex-wrap: wrap;
                        

                        img{
                            width: 500rem;
                            height: auto;
                            object-fit: scale-down;
                            padding: 0; /*padding: 27rem;*/
                          
                        }

                    }
                }
                &.b_6{
                    .embed{
                        position: relative;
                        padding-bottom: 56.25%; /* 16:9 aspect ratio */
                        height: 0;
                       
                        max-width: 100%;
                        @media(max-width: @mobile) {
                            margin-left: -160rem;
                            margin-right: -160rem;
                          
                            padding-bottom: 65.25%;
                        }
                        iframe{
                            position: absolute !important;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            border: 0;
                            @media(max-width: @mobile) {
                                width: 100vw !important;
                            }
                        }
                    }
                }
                &.b_7{
                    video{
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }
        .undertitle{
            display: flex;
            top: 30rem;
            position: relative;
           
            .date{
                padding-left: 0px;
                font-weight: 100;
                padding-right: 20rem;
                font-size: 0.5em;
                vertical-align: top;
               padding-top: 0px;
               @media(max-width: @mobile) {
                font-weight: 200;
               }
               
            }
            .tags{
                font-size: 0.5em;
           
    
                .tag{
                    margin: 0px 10rem;
    
                }
            }
        }
      

        #back{
            margin-bottom: @block_margin;
            display: block;
            font-size: max(0.5em, 16px);
            cursor: pointer;
            .text{
                opacity: 1;
                transition: opacity 300ms;
            }
        }

        &.scrolloncontent{
            #back{
                .text{
                    opacity: 0;
                }
            }
        }

        .social_media a{
            font-size: 0.8em;
            margin-right: 0.3em;
            font-weight: 300;
            color: blue;
            @media (prefers-color-scheme: dark) {
                color:@color_text_secondary_dark;
            }
        }
       
    }
 
    .follow{
        position: absolute;
        z-index: -1; 
        display: none;
        transform:translateX(-50%;) translateY(-50%);
        pointer-events: none;
        border-radius: 9px;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }
    
}