/* -------------------------------------------------------- */
                        /* FONTS */
/* -------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');


:root {
    --font: 'Rubik', sans-serif;
    --heading-font: 'Space Mono', monospace; 
    --background-color: #D9D9D9;
    
}

/* -------------------------------------------------------- */
                    /* SCHEMA COLORI */
/* -------------------------------------------------------- */

            [data-theme="light"] {
  --background-color: #D9D9D9;
  --navbar-color: #252c3731;
  --side-background-color: #c8c8c8;
  --text-color: #232934;
  --navbar-link-color: #7c3474;
  --text-footer: #86898f;
  --heading-color: #9D4D94;
  --h1: 	#6C1A63;
  --subheading-color: #252C37;
  --navbar-link-hover: #BF98CD;
  --text-link: #6c2c3c	; /*#aa405c*/
  --link-visited: #e1af09; 
  --scroll: #e5e5e5;
  --todo-background: #feff9c;
  --sub-subheading: #b58e56;
  --upd-bg: #ECECEC;
  --upd-text: #721D68;
  --upd-date-bg: #594857; 
  --selection: #412028;
  --description-color-bg: 	#e3c4df93; 
  --shadow: #00000033;
  --shadow-hover: rgba(0,0,0,0.2);
  --hover-bg: 	#FBF6FA;
  --footer: #0000004e;
  }

    [data-theme="dark"]{
    
  --background-color: #030712;
  --navbar-color: 		#9d4d9422;
  /*--text-link: 	#d1a0f2;*/
  --side-background-color: #080f22;
  --text-color: #ddd;
  --navbar-link-color: #BF98CD; 
  --text-footer: #86898f;
  --heading-color: #a65e9e;
  --h1: 	#E3A6DC;
  --subheading-color: #9CBFE7;
  --navbar-link-hover: #7c3474;
  --text-link: 	#D7ADB8;
  --link-visited: #4D9D86;
  --scroll: #060a16;
  --todo-background: #414139;
  --sub-subheading: #98817b;
  --upd-bg: #353841;
  --upd-text: #E8A6E0;
  --upd-date-bg: #E7E7E7;
  --selection: #FF9E9E;
  --sub-heading: #0366d64d;
  --description-color-bg: #041825;
  --shadow: #0418257e;
  --shadow-hover: #041825bc;
  --hover-bg: 	#03141F;
  --footer: #7473734e;
  }

/* -------------------------------------------------------- */
                    /* IL SITO */
/* -------------------------------------------------------- */

            body {
                font-family: var(--font);
                font-size: 100%; /*default è 16px*/
                margin: 0;
                min-height: 100vh;
                background-color: var(--background-color);
                color: var(--text-color);
            }

            /* -------------------------------------------------------- */
                                    /* INDEX */
            /* -------------------------------------------------------- */
            #body-index {
                height: 100vh;
                margin: 0;
                background-color: var(--background-color);
                overflow: hidden;
            }
            
            .container {
                height: 100%;
                display: flex;
            }

            .flex-content {
                margin: auto;
                max-width: 700px;
                padding: 1rem;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
            }

            .left {
                width: auto;
                align-items: center;
                
                
            }
            .left img{
                width: 200px;
            }

            .right {
                width: 65%;
                padding: 1.5rem;
                /*box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;*/
                
            }
            
            #body-index button {
                padding: 1rem;
                float: right;
            }

            #body-index a {
                text-decoration: underline;
                    text-transform: uppercase;
                    color: var(--text-link);
            }

            #body-index a:hover {
                text-decoration: none;
            }

            .right p.link {
                text-align: center;
                padding: 14px 16px;
                text-align: center;
                font-weight: bold;
                text-transform: uppercase;
            }
            .right p.link a:hover {
                text-decoration: none;
            }

            .right p.txt-small {
                font-size: 0.75rem; /*12px*/
            }
            
            /* -------------------------------------------------------- */
                                    /* 404 */
            /* -------------------------------------------------------- */
            #bg-404 {
                background-color: whitesmoke;
            }
            #page404 {
                width: fit-content;
                padding:20px;
                margin: 0 auto;
                text-align: center; 
            }
            #page404 h1, #wip {           
                margin-top: 10px;
                margin-bottom: 0;
                font-size: 11.25rem;
                font-weight: 600;
                line-height: 11.875rem;
            }
            #page404 p a {
                    text-decoration: underline wavy;
                    text-transform: uppercase;
                    color: var(--text-link);
            }
            #page404 p a:hover {
                text-decoration: underline;
                font-weight: 600;    
            }


            * {
                box-sizing: border-box;
                scrollbar-color: var(--heading-color) var(--scroll);
                scrollbar-width: thin;
                scroll-behavior: smooth;
            }
            ::selection {
                background-color: var(--selection);
                color: var(--background-color);
                
            }

            #page {
                max-width: 850px;
                margin: 0 auto; /* per centrare la pagina */
                margin-top: 20px;
                
            }
            
            #btn-to-top {
                display: none;
                position: fixed;
                bottom: 20px;
                right: 30px;
                z-index: 99;
                font-size: 1.125rem; /*18px*/
                border: none;
                outline: none;
                background-color: var(--navbar-color);
                color: var(--text-link);
                cursor: pointer;
                padding: 15px;
                border-radius: 50%;
                -webkit-transition: .5s;
                transition: .5s;
            }

            #btn-to-top:hover {
                background-color: #777777;
                color: var(--scroll);
                transition: 0.3s;
            }

             .navbar {
                overflow: hidden;
                text-align: center;
                font-family: var(--heading-font);
                margin-bottom: 0px;
                margin-top: 2px;
            }

            .navbar a {
                display: inline-block;
                color: var(--navbar-link-color);
                padding: 14px 16px;
                text-align: center;
                text-decoration: underline;
                font-weight: bold;
                transition: color 0.2s;
            }

            .navbar a:hover {
                color: var(--navbar-link-hover);
            }

            .navbar .icon {
                display: none;
            }

            .navbar a.active-link {
                background-color: var(--side-background-color);
                border-radius: 10px;
                text-decoration: none;
                border: 1px solid var(--navbar-link-hover);
            }

            #theme-switch {
                cursor: pointer;
                font-size: large;
                padding: 6px 10px;
                border-radius: 5px;
                border: none;
                color: var(--navbar-link-color);
            }

            #theme-switch:hover {
                background-color: var(--side-background-color);
                margin: 0;
           }
           
            button {
                border: none;
                background-color: transparent;
                padding: 5px 25px;
                color: var(--text-color);
            }
        
            #flex {
                display: flex;
            }

            #rightSidebar { 
                width: 200px;
                padding: 20px;
                font-size: smaller;
                margin-top: 20px;
            }

            main { 
                
                flex: 1;
                padding: 1.3rem;
                
                margin-top: 1rem;   
                
            }

            section {
                margin-top: 0.125rem;
            }
            
            .fun {	
                text-shadow: 0px 0px 6px var(--heading-color);
                color: var(--text-link);
                font-size: 1.063rem;
            }

            hr {
                border: none;
                border-top: 0.125rem dashed var(--navbar-color);
                overflow: visible;
                text-align: center;
                height: 0.313rem; /*5px*/
            }

            .tooltip {
                position: relative;
                display: inline-block;
                border-bottom: 1px dotted var(--text-color);
            }

            .tooltip .tooltiptext {
                visibility: hidden;
                width: 150px;
                background-color: var(--subheading-color);
                color: var(--background-color);
                text-align: center;
                font-size: small;
                border-radius: 6px;
                padding: 5px 0;
                position: absolute;
                z-index: 1;
                bottom: 150%;
                left: 50%;
                margin-left: -60px;
            }

            .tooltip .tooltiptext::after { /*la freccia*/
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: var(--subheading-color) transparent transparent transparent;
            }

            .tooltip:hover .tooltiptext {
                visibility: visible;
            }

            main a, .todo-text a, #footer a {
                color: var(--text-link);
                font-family: var(--font);
                font-weight: 600;
            }

            main a:hover, footer a:hover, .todo-text a:hover {
                text-decoration: none;
                cursor: pointer;
            }

            main a:visited, #footer a:visited, .todo-text a:visited {
                color: var(--link-visited);
            }

            .scrollable {
                height: 100px;
                overflow-y: auto;
                border: 0.063rem dashed var(--text-footer);
                border-radius: 0 5px 5px 0;
                font-size: 0.875rem; /*14px*/
                border-top: none;  
                padding: 0.25rem; 
                padding-left: 0.8rem;
                scrollbar-color: var(--upd-date-bg) var(--background-color);
                scrollbar-width: thin;
            }
            .scrollable-header {
                
                background-color: var(--side-background-color);
                border-radius: 5px 5px 0 0;
                border: 0.063rem dashed var(--text-footer);
                margin-top: 0.75rem;
            }

            .scrollable-header h3 {
                margin: 0;
                text-align: center;
                font-size: 1.1rem;
            }

            .upd-date {
                background-color: var(--upd-date-bg);
                color: var(--background-color);
                padding: 2px 5px;
            }

            .pg-upd {
                background-color: var(--upd-bg);
                color: var(--upd-text);
                padding: 2px 5px;
                border-radius: 3px;
            }
            
            .title-favs {
                color: var(--upd-text);
                padding: 2px 5px;
                /*border: 1px dashed var(--upd-bg);
                border-radius: 2px;*/
                text-align: center;
                text-transform: uppercase;
            }

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

            #rightSidebar {
                order: 2;
                /*background-color: var(--side-background-color);*/
            }

            #stressclass, h1, h2, h3, .todo-title {
                font-family: var(--heading-font);
                margin-bottom: .5rem;
                
            }
            #stressclass {
                font-size: 3rem;
                color: var(--heading-color) !important;
                font-weight: 700;
                margin-bottom: 2rem;
            }

            h1 {
                font-size: 1.875rem; /*30px*/
                color: var(--heading-color);
                /*margin-bottom: 0;*/
                margin-top: 20px;
                /*text-transform: uppercase;*/
            }

            h2 {
                font-size: 1.625rem; /*26px*/
                color: var(--heading-color);
                margin-bottom: 0;
                /*margin-top: 2rem;*/
            }

            .upd-date-theme h2 {
                margin: 0 auto;
                padding: 2px 5px;
            }

            .flex-item-playlist {
                width: 30%;
                margin: 0.75em;
                padding: 0.25em;
            }

            .cover-img {
                width: 100%;
                display: block;
                margin-left: auto;
                margin-right: auto;
                padding: 10px;
                padding-bottom: 0;
            }

            .desc {
                padding-left: 10px;
                font-weight: 300;
                font-size: smaller;
                font-family: var(--font);
            }

            h2.centered {
                text-align: center;
                color: var(--subheading-color);
            }

            h3.centered {
                font-size: 1.125rem; /*18px*/
                color: var(--sub-subheading);
                margin-top: 0.5rem;
            }

            h3 {
                font-size: 1.5rem; /*24px*/
                color: var(--subheading-color);
            }

            h4 {
                font-size: 1.25rem; /*20px*/
            }


            p {
                line-height: 1.35;
                margin: 0.5rem 0; 
            }
            
            .spaced-underline {
                text-underline-offset: 4px; 
                text-decoration-thickness: 1.4px;
            }

            .strike {
                text-decoration: line-through;
            }

            #posts {
                max-height: 900px;
                overflow-y: scroll;
                border: 1px solid black;
            }

            .flexcontainer, .theme-flexcontainer {
                width: 100%;
                display: flex;
                flex-wrap: wrap;  
            }

            .theme-flexcontainer .flex-item {
                width: 45%;
                border-radius: 5px;
                border-top:  1px solid var(--side-background-color);
                border-bottom: 1px solid var(--side-background-color);
            }
             .layout-img {
                width: 100%;
            }

            .upd-date-theme {
                background-color: var(--side-background-color);
                color: var(--navbar-link-color);
                padding: 2px 5px;
                text-align: center;
                width: 100%;
            }

            .upd-date-theme p {
                font-weight: 500;
                /*font-size: 17px;*/
                
            }

           /* .center svg {
                width: 100px;
            }*/

            .flex-item {
                width: 30%;
                margin: 0.75em;
                padding: 0.25em;
            }

            .flex-item ul {
                padding-left: 1.25em !important;
                font-size: 0.875rem; /*14px*/
                padding-right: 2em;
            }

            .flex-item li::marker {
             content: "⭒ ";
             font-size: 0.938rem; /*15px*/
            }

            .flex-col1, .flex-col2, .flex-col3 {
                text-align: center;
                width: 33%;
                margin-bottom: 0;
                position: relative;
            }

            .fa-solid.background-icon {
                position: absolute;
                color: var(--subheading-color);
                font-size: 5rem; /*80px*/
                bottom: 5px;
                right: -5px;
                opacity: .05;
            }
           
            #media {
                max-height: 900px;
                overflow-y: scroll;
            }

            .item {
                border: 1px solid var(--side-background-color);
                padding: 0 20px;
                border-radius: 2px;
                margin-bottom: 20px;
            }

            .item h4 {
                margin-bottom: auto;
            }

            .flexcontainer li {
                list-style-type:none;
                line-height: 1.35;
            }
        
            .flexcontainer ul {
                padding-left: 2px;
            }

            .lists {
                margin-top: .25em; /*da rivedere un attimo*/
            }
            .lists li {
                line-height: 1.6;
            }

            #rightSidebar li, #toc li {
                line-height: 1.5;
            }


            #rightSidebar li::marker, #toc li::marker {
             content: "› ";
            font-weight: bold;
            }

            #toc li::marker, .icon-index, #toc p{
                color: var(--text-link);
            }
            
            #toc {
               
                border-radius: 5px;
                padding-top: 15px;
                width: 50%;
            }

            #toc p {
                padding: 0;
                /*letter-spacing : .013em;*/
                font-size: 1.125rem; /*18px*/
            }

            .todo-title {
                font-size: 1.1rem;
                text-align: center;
                margin: 0;
                background-color: 	var(--todo-background); 
                border-radius: 5px 5px 0 0;
                border: 1px solid var(--text-footer);
                cursor: help;
            }

            .todo-text {
                border-radius: 0 0 5px 5px;
                overflow: hidden;
                
            }

            .todo-box ul {
                padding-left:10px;
            }

            .box {
                border: 1px solid yellow;
                
            }

            .bold {
                font-weight: 500;
            }

            

#media .title-original { 
  font-weight: 300;
  font-style: italic;
}
            .language-html {
                font-size: 12px !important;
                margin: 10px;
                opacity: 0.8;
                
            }

            #toc ul {
                padding-left: 20px;
                margin-top: 12px;
                
            }
            #toc p {
                font-weight: bold;
                margin-top: 2px;
            }

            #toc a {
                font-weight: normal;
                color: var(--text-link);
            }

            #toc a:hover {
                opacity: .8;
            }

            #toc a:visited {
                color: var(--text-link);
            }
            .todo-box {
                background-color: var(--side-background-color);
                border: 1px solid var(--text-footer);
                border-top: none;
                padding: 10px;
                transition: .5s ease;
            }

             footer {
                width: 100%;
                display: flex;
               /* padding-left: 0.25rem; */
                margin-top: 1rem;
                text-align: left;
                font-size: 0.75rem; /*12px*/
                color: var(--text-footer);
                text-align: center;
                border-top: 1px solid var(--footer);
             }

             .col1, .col2, .col3 {
                width: 33%;
                margin: 0.5rem;
                
             }

             .col1 {
                text-align: left;
                margin-left: 0;
             }

             .col2 a {
                padding: 0 0.3rem 0 0.3rem;
             }

             a.normal-link {
                padding: 0;
             }

             .col3 {
                padding: 0.75rem 0;

             }


             footer a {
                color: var(--text-link);
                font-weight: bold;
                font-family: var(--heading-font);
             }

            

            /* -------------------------------------------------------- */
             /* RESPONSIVE */
            /* -------------------------------------------------------- */


            @media only screen and (max-width: 800px) {
                #page404 {  
                width: 100%;
            }

            

            #page404 p a,  #body-index a {
                    text-decoration: none;  
            }

                #btn-to-top {
                    font-size: 0.875rem;
                    padding: 13px;
                }
                #page {
                    margin: 0 10px 0 10px;
                }
                #flex {
                    flex-wrap: wrap;
                }

                #rightSidebar {
                    width: 100%;
                }

                main {
                    order: 1;
                    
                    
                }

                .grid-img-container img {
                    width: 85px;
                }

                main a, .todo-text a, footer a {
                    text-decoration: none;
                }

                .scrollable {
                    overflow-y: hidden;
                    height: fit-content;
                }

                .scrollable :not(:first-child){
                    display: none;
                }

                #rightSidebar {
                    display: none; 
                }

                .navbar a, .navbar button {display: none; /*padding-top: 20px;*/}
                .navbar a.icon {
                    float: right;
                    display: block; 
                }

                .navbar a.icon {
                    margin: 14px 16px;
                    padding: 0;
                }
                
                .navbar.responsive {
                    /*background-color: var(--description-color-bg); 
                    border-radius: 5px;
                    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;*/
                    border-radius: 5px;
                    background-color: var(--side-background-color);
                    position: relative;
                }
                .bi-list::before {
                    font-size: 1.55rem;
                     -webkit-text-stroke: 2px;
                }

                .navbar.responsive .icon {
                    position: absolute;
                    right: 0;
                    top: 0;
                    
                    
                }
                .navbar.responsive a, .navbar.responsive button {
                    float: none;
                    display: block;
                    text-align: left;
                    text-decoration: none;
                }

                .navbar.responsive button {
                    padding-left: 15px;
                    padding-bottom: 15px;
                    float: right;
                }

                .navbar a.active-link {
                    background-color: transparent;
                    border: none;
                    text-decoration: underline;
                }
                

                #footer, .flex-content, .flexcontainer, .theme-flexcontainer {
                    flex-wrap: wrap;
                }

                .left img{
                    display: block;
                    margin: auto;
                    width: 180px;
                }

                .right {
                    margin: 0 10px 0 10px !important;
                    
                }
               

                footer p {
                    font-size: 0.8125rem;
                    margin: 0.3rem;
                }

                /*.lists li {
                line-height: 1.6;
                }*/

                 .upd-date-theme {
                    width: 100%;
                 }

                  .theme-flexcontainer .flex-item,  #toc , .cover-img {
                    width: 100%;
                    
                  }


                  .flex-item-playlist {
                    width: 44%;
                  
                  }
                .col1, .col2, .col3, .left, .right, .flex-item {
                width: 100%;
                flex-direction: column;
                /*margin: 0.1rem;*/
                padding: 0; /*rivedere un po' questa parte*/
                }

                .flex-col1, .flex-col2, .flex-col3
                {
                    width: 100%;
                    flex-direction: column;
                    margin: 0.25rem;
                    padding: 0.25rem;
                }
               
                .col1 {
                    order: 3;
                } 

                .col2, .right {
                    order: 2;
                } 

                .col3, .left {
                    order: 1;
                } 

                .layout-img {
                width: 100%;
             }   
            }