@import 'fonts/fonts.css';
 @import 'discu.css';
 @import 'scrollbar.css';
 @import 'topbar.css';
 @import 'bottombar.css';
 @import 'modal.css';

 body {
     font-family: 'PrestigeElite';
     height: 100%;
     overflow: hidden;
     width: 100%;
     margin: 0;
     color: #4f65f7;
       scrollbar-color: #e137f4 #4f65f7 ;
    scrollbar-width: 5px;
 }

 body[title='home'] {
    height: 100vh;
     width: 100vw;
 }

 .mobile {
     display: none;
 }

 body.night {
    background: black !important;
 }

 body.night .befa2ba5-78ab-469b-9703-450180aa3943, body.night #b6e545ca-6e0f-4682-84cc-6e0790ea2684 {
    fill: black !important;
 }

 body.night #nav {
    background: black !important;
 }

 #main {
     display: flex;
     height: 100%;
     width: 100%;
     flex-direction: column;
     overflow: hidden;
 }

 [title="content"] {
     flex: 1;
     overflow-y: auto;
     border: none;
     height: 100%;
     width: 100%;
     position: relative;
 }


 [title="episode"] {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    border: 0;
    width: 550px;
    max-width: 100%;
    visibility: hidden;
    z-index: -2;
 }
 [title="episode"].actif {
visibility: visible;
z-index: 200;
 }


iframe[title="episode"] {
 border-left: 2.5px solid;
 border-right: 2.5px solid;
}

 .content {
    flex: 1;
     overflow-y: auto;
     border: none;
     height: 100%;
         margin: 15px 35px;

 }

 .pagecontent {
    max-width: 850px;
         font-size: clamp(1.15vw, 16px, 4rem);
     -webkit-text-stroke: 0.5px;
 }

 .smallText {
    font-size: 15px;
 }

 .border {
     position: fixed;
     height: 100vh;
     display: flex;
     justify-content: space-between;
     padding: 0px 20px;
     z-index: 5;
 }

 .border svg {
     stroke-width: calc(22.28px / var(--vhn));
     z-index: 3;
     fill: none;
     stroke: url(#my-cool-gradient) #447799;
     stroke-linejoin: round;
     height: 100%;
 }

 .borderhorizontal {
    background-image: -webkit-linear-gradient(left, #e649ff, #4f65f7);
    background-image: -moz-linear-gradient(left, #e649ff, #4f65f7);
    background-image: -ms-linear-gradient(left, #e649ff, #4f65f7);
    background-image: -o-linear-gradient(left, #e649ff, #4f65f7);
    background-image: linear-gradient(to right, #e649ff, #4f65f7);
    width: 100vw;
    height: 2px;
    z-index: 9;
 }

 .borderhorizontal.top {
    z-index: 0;
 }



 #nav_inner a:not(.actif), #nav_inner button:not(.actif, :hover),  #titrelecture > :first-child, h2, .title, .titleBlock, .chatInfo .shoutbox-username, input[type="text"], .isNotDirect, body:not(.menu) #mobilemenu span {
    color: #e649ff;
    background-image: -webkit-linear-gradient(left, #e649ff, #4f65f7);
    background-image: -moz-linear-gradient(left, #e649ff, #4f65f7);
    background-image: -ms-linear-gradient(left, #e649ff, #4f65f7);
    background-image: -o-linear-gradient(left, #e649ff, #4f65f7);
    background-image: linear-gradient(to right, #e649ff, #4f65f7);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
 }

   a.actif {
    color: white !important;
 }


 .rose, h3 {
    color: #e137f4;
 }

 a.actif {
    color: white !important;
 }

.smallText a {
    text-decoration: underline !important;
}

 #nav_inner a, #nav_inner button,
 .isNotDirect,
 .isDirect,
 #titrelecture > :first-child {
     text-decoration: none;
     font-family: 'PrestigeElite';
     font-size: clamp(1.15vw, 16px, 4rem);
     position: relative;
     -webkit-text-stroke: 1px;
     border: none;
 }

button.actif svg {
    display: block !important;
    z-index: -1;
}

 

 button.actif svg path, #nav_inner button:hover svg path,
 .socials a:hover svg path.colored,
 a:hover svg path.colored {
     fill: url(#my-cool-gradient) #447799 !important;
 }


 .socials a:hover svg path:not(.colored),
 button:hover svg path:not(.colored) {
     fill: white;
 }

 body.night .socials a:hover svg path:not(.colored),
body.night button:hover svg path:not(.colored) {
     fill: black;
 }

 

 h2 {
    font-family: 'PrestigeElite';
    margin: 0;
    padding: 0;
    font-size: clamp(1.15vw, 16px, 4rem);
    -webkit-text-stroke: 0.5px;
 }

 h3 {
    padding: 0;
    margin: 0;
    font-size: 1em;
    font-family: 'PrestigeElite' !important;
    -webkit-text-stroke: 0.5px;
 }

 .suisseType {
    font-family: 'SuisseIntlMono'; 
    -webkit-text-stroke: 0px;
 }

 .pagecontent a {
    font-family: 'PrestigeElite' !important;
    -webkit-text-stroke: 0.5px;
    text-decoration: none;
    color: inherit;
 }

 .pagecontent .cont {
    max-width: 850px;
}

.befa2ba5-78ab-469b-9703-450180aa3943 {
    fill: #fff;
    stroke-width: 2px;
}

.e1571fcf-c624-4acc-ac7b-34ab0a0cbc90 {
    stroke: url(#my-cool-gradient) !important;
    stroke-width: 2.54px !important;
}

.befa2ba5-78ab-469b-9703-450180aa3943, .a486f7db-babe-4af7-9556-dbb0b9dd39eb, #nav_inner a svg {
                    fill: #fff;
                    stroke-width: 2px;
                         stroke: url(#my-cool-gradient) #447799 !important;}

 @media screen and (max-width: 980px) {
     .border {
         padding: 0px 6px;
         top: 0px;
     }

     svg.mobile {
        width: 100%;
        transform: scale(1.05);
     }

     body, #main, .border  {
        height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
        max-height: 100vh;
     }

     .a486f7db-babe-4af7-9556-dbb0b9dd39eb,
     .befa2ba5-78ab-469b-9703-450180aa3943 {
         stroke-width: 5px !important;

     }

     body.menu [title="content"],
     #b6e545ca-6e0f-4682-84cc-6e0790ea2684 {
         display: none;
     }

     #acf6f3e7-30d9-467f-b30b-aef8189949e2 .befa2ba5-78ab-469b-9703-450180aa3943 {
         display: none;
     }

     .befa2ba5-78ab-469b-9703-450180aa3943 {
         fill: transparent !important;
     }

     .mobile .befa2ba5-78ab-469b-9703-450180aa3943 {
        stroke-miterlimit: 0;
        stroke-dasharray: none;
        stroke-dasharray: none;
     }

     .content {
        padding-bottom: calc(7.5vw + 20px) ;
     }

      a:hover svg:not(.draw) path,
 #nav_inner button:hover svg path,
 button:hover svg path {
     animation: none;
 }

 body #nav, body.night #nav {
    box-shadow: unset !important;
 }

body.night .discu {
    background: black !important;
 
 }


 @keyframes dash {
     to {
         stroke-dashoffset: 0;
     }
 }

 @keyframes glow {
     0% {
         visibility: hidden;
     }

     100% {
         visibility: visible;
     }
 }



  @keyframes openMenu {
     to {
         transform: translateY(0%);
     }
 }